bootstrap课程1 bootstrap为何这么火

bootstrap课程1 bootstrap为何这么火

1、总结

一句话总结：响应式，样式多，功能多。

 

一、bootstrap经过什么药实现响应式？

响应式web布局是让用户经过不一样尺寸的浏览器均可以得到良好视觉的一种方法。是目前比较流行的一种布局方法。

经过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不一样的媒体环境下运行时能够展现不一样的样式（这个样式固然是由咱们来书写规定的）。

 

二、响应式布局是什么？

响应式web布局是让用户经过不一样尺寸的浏览器均可以得到良好视觉的一种方法。是目前比较流行的一种布局方法。

 

三、html5的data属性有什么用？

data属性是HTML5中定义的一个全局属性，它用来存在页面或者应用程序的私有自定义数据。

咱们能够为全部 HTML 元素上嵌入自定义 data 属性，自定义（存储）的数据能够被CSS或者JS来使用，来提升用户体验。

 

四、bootstrap中的响应式栅格系统如何实现？

经过断点来变化

在上面这样视口宽度由小变大的过程当中，首先是保持默认的竖直堆叠，而后超过了sm的断点，sm的样式生效，变为一行两列的排版，再继续超过lg的断点后，lg的样式也生效，因为lg的样式代码定义在sm以后，因此会覆盖掉sm的样式，从而获得一行四列的排版。

 

 

2、bootstrap简介

预处理脚本

虽然能够直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你能够采用预编译的 CSS 文件快速开发，也能够从源码定制本身须要的样式。

 

一个框架、多种设备

你的网站和应用能在 Bootstrap 的帮助下经过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

 

特性齐全

Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的全部详细文档。

 

 

3、bootstrap使用心得总结

背景介绍：2015年9月份开始接触bootstrap前端框架集，为何呢，由于它实在是太火了，慕课网、菜鸟教程这些我常常逛的网站上bootstrap都是一个专题了，再加之它简单好上手因而就选了它来入门。
项目：1.电子手册阅读网站的搭建；2.我的博客网站的搭建。

bootstrap的特色：

1.响应式布局

概念：响应式web布局是让用户经过不一样尺寸的浏览器均可以得到良好视觉的一种方法。是目前比较流行的一种布局方法。
实现原理：经过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不一样的媒体环境下运行时能够展现不一样的样式（这个样式固然是由咱们来书写规定的）。@media是CSS3中规定的属性，它能够实现针对不一样媒体设备来设置不一样的样式的目的。并且就算是在同一设备中它也能够在你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面。
Bootstrap主要用到min-width、max-width，以及and语法，用于在不一样的分辨率下设置不一样的CSS样式。
@media的语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

其中mediatype有print（打印设备）、screen（用于电脑屏幕，平板电脑，智能手机等）、speech（应用于屏幕阅读器等发声设备）；media feature则是用来规定如最大宽度或者最小宽度。

咱们来看看bootstrap中布局容器的例子：
Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。
以下

固定宽度布局
<div class="container">
  ...
</div>
或者 流式布局
<div class="container-fluid">
  ...
</div>

在bootstrap的css文档中@media属性

1591~1605行

@media (min-width: 768px) {
  .container { width: 750px; }
}
@media (min-width: 992px) {
  .container { width: 970px; }
}
@media (min-width: 1200px) {
  .container { width: 1170px; }
}
……

以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。

2.移动设备优先

在html文件中head区域加入这样的一个meta标签，name=“viewpoint”是指这个标签对移动设备生效，content中width=device-width是指宽度为设备宽度，initial-scale=1意思是初始缩放比例为1.

<meta name="viewport" content="width=device-width, initial-scale=1">

可是在css文档中没有对超小屏幕定义任何媒体查询相关的代码，由于这在 Bootstrap 中是默认的移动设备优先！

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，由于这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

3.data-*属性的使用

data属性是HTML5中定义的一个全局属性，它用来存在页面或者应用程序的私有自定义数据。咱们能够为全部 HTML 元素上嵌入自定义 data 属性，自定义（存储）的数据能够被CSS或者JS来使用，来提升用户体验。

data-* 属性包括两部分：
属性名不该该包含任何大写字母，而且在前缀 “data-” 以后必须有至少一个字符
属性值能够是任意字符串

data属性是bootstrap中应用不少的一个属性，它可让开发者仅仅经过data属性API就能使用全部Bootstrap中的插件，并且不用写一行JavaScript代码。
bootstap中封装的data-*属性的API

**css中**
[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .btn-group > .btn input[type="radio"], [data-toggle="buttons"] > .btn input[type="checkbox"], [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } **js中** [data-toggle="buttons"
[data-toggle="collapse"][data-toggle="dropdown"][data-toggle="modal"][data-toggle="tab"][data-toggle="pill"]

4.栅格系统

参考：http://www.jb51.net/css/362199.html
栅格将一个页面能够拆分红多个区块来理解，而正是这些区块共同构成了真个页面的布局。根据不一样的屏幕尺寸状况，调整这些区块的排版，就能够实现响应式设计。另外，屏幕宽度较大的时候，区块倾向于水平分布，而屏幕宽度较小的时候，区块倾向于竖直堆叠。
栅格样式库通常是这样作的：将页面划分为若干等宽的列（column），而后推荐你经过等宽列来建立响应式的页面区块。
Bootstrap把它的栅格放在CSS这个分类下，并称它为Gird system。默认分为12列。

要点一：容器、行与列

<div class="container">  
    <div class="row">  
        <div class="col-md-6"></div>  
        <div class="col-md-6"></div>  
    </div>  
</div>

container、row、column必须保持特定的层级关系，栅格系统才能够正常工做。

要点二：断点类型

Bootstrap栅格的column对应的类名形如.col-xx-y。y是数字，表示该元素的宽度占据12列中的多少列。而xx只有特定的几个值可供选择，分别是xs、sm、md、lg，它们就是断点类型。
在Bootstrap栅格的设计中，断点的意义是，当视口（viewport）宽度小于断点时，column将竖直堆叠（display: block的默认表现），而当视口宽度大于或等于断点时，column将水平排列（float的效果）。按照xs、sm、md、lg的顺序，断点像素值依次增大，其中xs表示极小，即认为视口宽度永远不小于xs断点，column将始终水平浮动。
有时候，会须要将多种断点类型组合使用，以实现更细致的响应式设计。此时不一样的断点类型之间会有怎样的相互做用呢？
先看看Bootstrap的sass源码是如何定义栅格的：

@include make-grid-columns;   
@include make-grid(xs);   
@media (min-width: $screen-sm-min) {   
  @include make-grid(sm);   
}   
@media (min-width: $screen-md-min) {   
  @include make-grid(md);   
}   
@media (min-width: $screen-lg-min) {   
  @include make-grid(lg);   
}

能够看到，用了min-width的写法，并且断点像素值越大的，对应代码越靠后。因此，若是有这样的一些元素：

<div class="container">   
    <div class="row">   
        <div class="col-sm-6 col-lg-3">1</div>   
        <div class="col-sm-6 col-lg-3">2</div>   
        <div class="col-sm-6 col-lg-3">3</div>   
        <div class="col-sm-6 col-lg-3">4</div>   
    </div>   
</div>

 

 
结合前面的源码，能够想到，在上面这样视口宽度由小变大的过程当中，首先是保持默认的竖直堆叠，而后超过了sm的断点，sm的样式生效，变为一行两列的排版，再继续超过lg的断点后，lg的样式也生效，因为lg的样式代码定义在sm以后，因此会覆盖掉sm的样式，从而获得一行四列的排版。 因此，结合使用多个断点类型，就能够引入多个断点变化，把响应式作得更加细致。