引入boostrap的方法，简单运用boostrap

boostrap是基于前端的一条目框架，它可以晋升我们前端工程师写代码的效率，而且能解决所有本家儿流浏览器的兼容问题。此刻带大师来引入boostrap，而且简单运用boostrap。

东西/原料

• 前端编纂器（Dreamweaver或者sublime）
• boostrap情况包（可到官网下载）

boostrap引入

1. 1

   一、下载并解压boostrap的情况包。解压后为css,fonts,js文件夹。

   
2. 2

   二、css文件夹中，boostrap.css是未压缩的css，boostrap.min.css是压缩过的css。js文件夹中必需要有jQuery.min.js，没有的话下载并放入。

   
3. 3

   三、引入boostrap，窗口和设备的窗口连结一致，初始缩放 100%，禁止用户双击，引入boostrap.min.css，jQuery.min.js，boostrap.min.js。

   

简单运用boostrap

1. 1

   一、bootstrap结构容器，将内容包裹在<div class="container ">...</div>中。<div class=”container”>固心猿意马宽度1170px内容</div><div class=”container-fluid”>宽度为 100%内容</div>。

   
2. 2

   二、.list-unstyled 去失落列表前面的符号，和去失落原有的格局。.list-inline 把<li></li>之间的内容 ，酿成横标的目的摆列。

   
3. 3

   三、.dl-horizontal 设置酿成横标的目的摆列，结果如下：

   
4. 4

   四、.table 表格的一个基类 ，若是加其他的样式，都在.tabel的根本上。

   
5. 5

   五、.table-bordered 给表格加外边框，.table-hover 鼠标悬停结果，鼠标移动行或单位格，变色. table-striped 斑马线结果，隔行换色。

   
6. 6

   六、. table-responsive 给table的父元素加以移动设备为优先，若是内容不克不及完全的显示，会呈现滚动条状况类设置的是行tr或 td。

   
7. 7

   七、栅格系统：Bootstrap 供给了一套响应式、移动设备优先的流式栅格系统，跟着屏幕或视口（viewport）尺寸的增添，系统会主动分为最多12列。

   
8. 8

   最后，让我们本身脱手来试一下boostrap吧！！

注重事项

• Js文件夹中必需有jquery.min.js文件。
• boostrap也可以在线引入。