Bootstrap的优缺陷有哪些？--百分百源码网

Bootstrap的优缺陷有哪些？-

发布时间：08/01 来源：未知浏览：关键词：

Bootstrap的优缺陷有哪些？bootstrap是一个用于迅速开发web利用程序和网站的前端框架，基于html、css、javascript。长处是:挪移设施优先，支撑主流阅读器，易运用，相应式设计缺陷：不支撑IE6，重度运用class而class不足语义化，运用bootstrap开发的网站同质化重大。Bootstrap供给了一套相应式、挪移设施优先的流式网格系统，随着屏幕或视口（view Bootstrap的优缺陷有哪些？
bootstrap是一个用于迅速开发web利用程序和网站的前端框架，基于html、css、javascript。
长处是:挪移设施优先，支撑主流阅读器，易运用，相应式设计
缺陷：不支撑IE6，重度运用class而class不足语义化，运用bootstrap开发的网站同质化重大。

【相干视频举荐：Bootstrap教程】

Bootstrap 供给了一套相应式、挪移设施优先的流式网格系统，随着屏幕或视口（viewport）尺寸的添加，系统会主动分为最多12列。

挪移设施优先战略

内容

决议什么是最重要的。

布局

优先设计更小的宽度。
根基的 CSS 是挪移设施优先，媒体查询是针关于平板电脑、台式电脑。

渐进加强

随着屏幕大小的添加而增加元素。

相应式网格系统随着屏幕或视口（viewport）尺寸的添加，系统会主动分为最多12列。

Bootstrap 网格系统（Grid System）的工作道理

网格系统通过一系列包括内容的行和列来新建页面布局。下面列出了 Bootstrap 网格系统是怎样工作的：

行必需放置在 .container class 内，以便获得恰当的对齐（alignment）和内边距（padding）。
运用行来新建列的水平组。
内容应当放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比方 .row 和 .col-xs-4，可用于迅速新建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来新建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示首先列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来新建的。例如，要新建三个相称的列，则运用三个 .col-xs-4。
媒体查询
媒体查询是非常新奇的"有前提的 CSS 法则"。它只适用于一些基于某些规定前提的 CSS。要是知足那些前提，则利用响应的样式。
Bootstrap 中的媒体查询允许您基于视口大小挪移、显示并隐蔽内容。下面的媒体查询在 LESS 文件中运用，用来新建 Bootstrap 网格系统中的关键的分界点阈值。
```
/* 超小设施（手机，小于 768px） */
/* Bootstrap 中默许状况下没有媒体查询 */

/* 小型设施（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }

/* 中型设施（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }

/* 大型设施（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }
```

我们有时候也会在媒体查询代码中包括 max-width，从而将 CSS 的影响限定在更小范畴的屏幕大小以内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个局部，先是一个设施标准，然后是一个大小法则。在上面的案例中，设定了以下的法则：
让我们来看下面这行代码：
```
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
```
根本的网格构造
下面是 Bootstrap 网格的根本构造：
```
   
      
            
   
   .......
```