Bootstrap初体验

今天学习了Bootstrap的知识，没有学习Bootstrap之前，我一直以为是Bootstrap是一个很高大上的东西。今天终于能一睹Bootstrap的风采了！

1.Bootstrap是什么呢？

Bootstrap是一个基于html，css，javascript的超强前端框架。它能够以移动设备为优先，解决浏览器的兼容问题。这里有一个 Bootstrap中文网，在这里可以查看最官方的Bootstrap的文档。在Bootstrap中，我认为比较突出的特点就是响应式以及栅格系统。

2.Bootstrap中的响应式开发

响应式简单的理解就是让同一个网页在不同大小的设备中显示能相应的显示出不同规格，从而不影响用户的浏览体验，而Bootstrap能很好的解决这一点。首先要想页面能随着窗口的大小做出调整，必不可少的以下代码：

这句代码的意思是：可视窗口和设备窗口的宽度保持一致，初始缩放为100%，禁止用户双击。完成这一个代码操作后，页面就会随着设备窗口的大小来缩放。但是这不意味着里面的所有内容都会跟着缩放。有些元素如图片，表格他们的宽高是本来就有的，原本图片多大就是多大，表格被撑开多大就是多大，窗口的缩放也无法改变他们的规格。这时候就需要另外给他们设置响应式的样式了。

...

3.栅格系统

什么是栅格系统呢？就是运用固定的格子设计版面布局，就像画画一样，想要构造物体的形，可以借助一些辅助的网格定型，这就是栅格系统，他能够让你清晰的看清楚页面的布局，像一个橱柜一样，把你想要摆的东西放上去就可以了，再也不需要左定位右定位，标准也已经规定好了，是一个很方便的设计框架。

那么怎么样定义一个栅格系统呢？

1）栅格系统一定要写在class="container"或者class="container-fluid"的div标签中

2）栅格系统以行为一个基本单位，一行中最多可以定义12列。就像一个打横柜子，有12个小格子，你可以定义哪个格子放什么，怎么放。例如：

   

   

   

     

  上面代码意思是中等屏幕时一个div占4列，三个div加起来刚好12列，如果一行中的列数超过了12则会被挤到下一行。Bootstrap提供的一套响应式移动设备优先的流式栅格系统，随着屏幕或视口尺寸改变。我们可以利用栅格系统创建页面布局，把内容放入创建好的布局中。上面代码有一个bug，当缩放浏览器时，栅格不会自动调整规格，产生堆叠的情况。栅格系统为我们提供了不同类型浏览器的栅格设置样式：

手机（<768px） .col-xs-

小屏幕（>=768px） .col-sm-

中屏幕（>=992px） .col-md-

大屏幕（>=1200px） .col-lg-

将他们同时设置在一个div中，即可随浏览器窗口的改变而变换。

3）栅格系统的偏移与排列

栅格系统就仅仅是这样设置吗？当我希望一列在一行中定位到我想要的位置时，可以使用偏移或者排列。

栅格系统中的偏移是只能向右偏移，且如果要偏移的块右边有其他块，该块很可能因为偏移为被挤到下一行。

        //向右偏移2列

栅格系统中的排列与偏移不同，它能够向右也能向左，因此也会使得格子重叠：

      //向右移动8列

        //向左移动4列

4.Bootstrap中的一些样式

Bootstrap的样式实在是很多很多，不过全部都已经定义好了，直接使用类名就能拿过来用，而且样式还是很好看的，让我特别喜欢。

容器

Bootstrap布局容器

     //固定宽度1170px

      //宽度100%

标签

bootstrap中的标签与普通的标签不同，已经定义好了好看的样式，直接使用就可以啦~如：

36px   

30px   

24px   

18px   

14px   

12px 

副标题：

小一号    大一号    加粗    倾斜    删除

".page-header"页头，设置分割线

    下拉三角形

,pull-left/pull-right左右浮动

文本

".text-left"左对齐    “.text-right”右对齐    “.text-center”居中    “.text-uppercase”英文大写    ".text-lowercase"英文小写    “.text-capitalize”首字母大写

列表

“.list-unstyle” 去掉列表前面的符号，去掉原有的格式

".list-inline"把li标签之间的内容横向排列

表格

什么是基类？基类就是如果要加这个属性的其他样式，就必须把这个类写在前面。

.table    基类

.table-bordered    给表格加外边框

.table-hover    鼠标悬停效果，停留变色

.table-striped    斑马线效果，隔行换色

.table-condensed    表格紧凑

状态类：

active     悬停时（灰色）

success    成功或积极的动作（绿色）

info    普通提示（蓝色）

warning    警告，注意（黄色）

danger    危险/负面（红色）

图片

.img-circle    椭圆形

.img-rounded    圆角矩形

.img-thumbnail    图片外加圆角边框