本文共 6848 字，大约阅读时间需要 22 分钟。
We've been talking a lot this week about . It's a great front-end framework that is a solid alternative to the awesome and deserves at least a look at the before being dismissed. It does have a few features that Bootstrap doesn't.
This will be a simple article that will help alleviate moving from Bootstrap over to Foundation. We'll be comparing the classes for the main parts of both frameworks. For the most part, both frameworks can build out components of your site for you (grid, buttons, forms, tables), so here's the cheat sheet to see side-by-side classes:本周我们一直在谈论 。 这是一个很棒的前端框架，是很棒的的可靠替代品，并且在被解雇之前至少应了解一下这些 。 它确实具有Bootstrap所没有的一些功能。
这是一篇简单的文章，将有助于减轻从Bootstrap迁移到Foundation的麻烦。 我们将比较两个框架主要部分的类。 在大多数情况下，这两个框架都可以为您构建网站的组件（网格，按钮，表单，表格），因此，这是速查表，用于了解并排的类：| Element | Bootstrap | Foundation |
|---|---|---|
| Alert | .alert .alert-success .alert-danger .alert-info | .alert-box .success .warning .info .round .radius .secondary |
| Buttons | .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .btn-block | .button .tiny .small .large .secondary .success .alert .radius .round .disabled .expand |
| Lists | .list-unstyled .list-inline | .inline-list (will unstyle it also) |
| Labels | .label .label-default .label-primary .label-success .label-info .label-warning .label-danger | .label .success .alert .secondary .round .radius |
| Tables | .table .table-striped .table-hover .table-bordered .table-condensed .active .success .info .warning .danger | Tables are automatically formatted with borders, stripes, and headers. No extra style classes given. |
| Panels | .panel .panel-default .panel-primary .panel-success .panel-info .panel-warning .panel-danger | .panel .callout .radius No other colors provided and no syntax for having a header and body of the panel. |
| Progress Bars | .progress-bar .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped .active | .progress .small-# .large-# .secondary .success .alert .radius .round |
| Text Utilities | .text-left .text-center .text-right .text-justify .text-nowrap .text-lowercase .text-uppercase .text-capitalize .text-muted .text-primary .text-success .text-info .text-warning .text-danger | .text-left .text-right .text-center .text-justify .small-text-left (also works for medium, large, xlarge) .small-only-text-left (also works for medium, large, xlarge) .small-text-center (also works for medium, large, xlarge) .small-only-text-center (also works for medium, large, xlarge) .small-text-right (also works for medium, large, xlarge) .small-only-text-right (also works for medium, large, xlarge) .small-text-justify (also works for medium, large, xlarge) .small-only-text-justify (also works for medium, large, xlarge) |
| Visiblity Classes | .visible-*-block .visible-*-inline .visible-*-inline-block .hidden-xs .hidden-sm .hidden-md .hidden-lg | .show-for-small-only (medium, large, xlarge, xxlarge) .show-for-small-up (medium, large, xlarge, xxlarge) .hide-for-small-only (medium, large, xlarge, xxlarge) .hide-for-small-up (medium, large, xlarge, xxlarge) .show-for-landscape .show-for-portrait .show-for-touch .hide-for-touch .hidden-for-small-only (medium, large, xlarge, xxlarge) .hidden-for-medium-up (large, xlarge, xxlarge) .visible-for-small-only (medium, large, xlarge, xxlarge) .visible-for-medium-up (large, xlarge, xxlarge) |
| 元件 | 引导程序 | 基础 |
|---|---|---|
| 警报 | .alert .alert-成功.alert-danger .alert-info | .alert-box。成功.warning .info .round .radius .secondary |
| 纽扣 | .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .btn-block | 。按钮。小。小。大。第二成功。警报半径。圆形。禁用。扩展 |
| 清单 | .list-unstyled .list-inline | .inline-list（也会取消样式） |
| 标签 | .label .label-default .label-primary .label-success .label-info .label-warning .label-danger | .label .success .alert .secondary .round .radius |
| 桌子 | .table .table-striped .table-hover .table-bounded .table-condensed .active .success .info .warning .danger | 表格会自动用边框，条纹和标题格式化。 没有给出额外的样式类。 |
| 面板 | .panel .panel-default .panel-primary .panel-success .panel-info .panel-warning .panel-danger | .panel .callout .radius没有提供其他颜色，也没有包含面板标题和主体的语法。 |
| 进度条 | .progress-bar .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped .active | .progress .small-＃.large-＃.secondary .success .alert .radius .round |
| 文字工具 | .text-left .text-center .text-right .text-justify .text-nowrap .text-smallcase .text-uppercase .text-capitalize .text-muted .text-primary .text-success .text-info .text警告.text-danger | .text-left .text-right .text-center .text-justify .small-text-left（也适用于Medium，Large，xlarge）.small-only-text-left（也适用于Medium，Large，xlarge） .small-text-center（也适用于中，大，xlarge）.small-only-text-center（也适用于中，大，xlarge）.small-text-right（适用于中，大，xlarge） .small-only-text-right（也适用于中，大，xlarge）.small-text-justify（也适用于中，大，xlarge）.small-only-text-justify（也适用于中，大， xlarge） |
| 可见性等级 | .visible-*-block .visible-*-inline .visible-*-inline-block .hidden-xs .hidden-sm .hidden-md .hidden-lg | .show-for-small-only（中，大，xlarge，xxlarge）.show-for-small-up（中，大型，xlarge，xxlarge）.hide-for-small-only（中，大型，xlarge，xxlarge） ）。为小图片隐藏（中，大，xlarge，xxlarge）。为风景显示。为肖像显示。为触摸显示。为触摸隐藏。为小隐藏（中型，大型，xlarge，xxlarge）.hidden-for-medium-up（大型，xlarge，xxlarge）.visible-for-small-only（中型，大型，xlarge，xxlarge）.visible-for-medium-up（大，x大，xx大） |
| Bootstrap | Foundation |
|---|---|
| .container .container-fluid .row .col-xs-# .col-sm-# .col-md-# .col-lg-# .col-xs-offset-# .col-sm-offset-# .col-md-offset-# .col-lg-offset-# | .row .columns .small-# .medium-# .large-# .small-offset-# .medium-offset-# .large-offset-# |
| 引导程序 | 基础 |
|---|---|
| .container .container-fluid .row .col-xs-＃.col-sm-＃.col-md-＃.col-lg-＃.col-xs-offset-＃.col-sm-offset-＃.col -md-offset-＃.col-lg-offset-＃ | .row .columns .small-＃.medium-＃.large-＃.small-offset-＃.medium-offset-＃.large-offset-＃ |
.secondary, .success, .alert, .radius, and .round while Bootstrap prefixes its classes with the element like .btn-, .alert-, and .panel-. This could act as a cheat sheet and also a comparison chart for what features are supported. Foundation has a lot of visibility classes compared to Bootstrap while Bootstrap has more flexibility in its table creation. This should serve as an easy guide to moving between the two front-end frameworks. If you need help finding the correct classes for a certain element, let this little cheat sheet be your guide. .secondary ， .success ， .alert ， .radius和 .round而Bootstrap在其类的 .btn-加上元素 .btn- - .alert-和 .panel- 。 这可以用作备忘单，也可以作为支持哪些功能的比较表。 与Bootstrap相比，Foundation具有许多可见性类，而Bootstrap在表创建方面具有更大的灵活性。 这应该作为在两个前端框架之间转换的简单指南。 如果您需要帮助以找到适合某个元素的正确类，请以该备忘单为指南。 翻译自:
转载地址：http://enywd.baihongyu.com/