BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。
1.编写头部
<head> <meta charset="UTF-8"> <!--为了让ie采用最新的渲染模式，要把这个标签添加上--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--针对响应式布局，首先获取设备的物理宽度，根据设备物理宽度设置网页宽度，按照1:1缩放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>LearnBootstrap</title> <!--直接引用文件--> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!--引用cdn地址--> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!--为了支持ie9以下，要加上这些--> <!--[if lt IE 9]> <!--让他支持h5标签--> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <!--让他支持媒体查询，也就是响应式--> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <!--[endif]--></head>
2.引入js
这个可以写在body
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
3.使用container类
container类是一个常用的div类
主要是用居中功能
<div>hello</div>
4.使用栅格化系统
栅格化系统是BootStrap一个非常常用的一个布局系统
简单的使用如下
<div> <!--xs表示在手机上，sm表示在平板上，md表示在桌面上。后面的数字表示占多少列，满屏为12列--> <!--内容超过栅格高度，则会增加高度，不会增加宽度--> <!--offset表示向右移动几列--> <div>.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8</div> <div>.col-xs-6 .col-md-4</div></div><div> <!--push向后移动，pull向前移动--> <div>.col-xs-12 .col-sm-6 .col-md-8</div> <div>.col-xs-6 .col-md-4</div></div>
可以看到栅格化系统可以根据不同设备调整不同宽度
5.使用表格
<div> <!--响应式表格，内容太长可以左右移动--> <div> <!--table 后几个分别是表格有边框，鼠标经过tbody行时颜色加深，表格紧缩--> <table> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <!--该行颜色为浅绿--> <tr> <th>表格内容</th> <th>表格内容</th> <th>表格内容</th> </tr> <!--该行颜色为浅蓝--> <tr> <th>表格内容</th> <th>表格内容</th> <th>表格内容</th> </tr> <!--该行颜色为米白--> <tr> <th>表格内容</th> <th>表格内容</th> <th>表格内容</th> </tr> </tbody> </table> </div></div>
如果是想某一格变颜色也可以在th标签内加类像tr一样
6.使用表单
最基本的用法如下
<div> <form> <!--的部分项是一个form-group的父布局，里面有label和input--> <div> <!--label的for要和input的id对应--> <label for="exampleInputEmail1">Email address</label> <!--input的class要设为form-control--> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <!--帮助提示文字--> <p>Example block-level help text here.</p> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form></div>
如果将form的类设为form-inline则将所有元素显示在同一行
如果将form的类设为form-horizontal则每个form-group显示一行，不过要自己设置宽度
如
<div> <!--让每一个form-group显示一行，不过每个form-group的子项都要规定宽度--> <form> <div> <label for="Emai">Email</label> <!--input-group让提示和补充显示在同一行--> <div> <input type="email" placeholder="Email" id="Emai"> </div> </div> <div> <label for="Passwor">Password</label> <div> <input type="password" placeholder="Password" id="Passwor"> </div> </div> <button type="submit">summit</button> </form></div>
我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同
Bootstrap给我们提供了这个很实用的功能
<div> <form> <!--父div的类要增加两项--> <!--成功状态--> <div> <label for="inputSuccess2">Input with success</label> <input type="text" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <!--右边的图标--> <span aria-hidden="true"></span> <!--这个信息隐藏，增加了代码的可读性--> <span id="inputSuccess2Status">(success)</span> </div> <!--警告状态--> <div> <label for="inputWarning2">Input with warning</label> <input type="text" id="inputWarning2" aria-describedby="inputWarning2Status"> <span aria-hidden="true"></span> <span id="inputWarning2Status">(warning)</span> </div> <!--错误状态--> <div> <label for="inputError2">Input with error</label> <input type="text" id="inputError2" aria-describedby="inputError2Status"> <span aria-hidden="true"></span> <span id="inputError2Status">(error)</span> </div> </form></div>
7.按钮
按钮是必不可少的一样东西
<!-- 白色背景 --><button type="button">（默认样式）Default</button><!-- 蓝色背景 --><button type="button">（首选项）Primary</button><!-- 绿色背景 --><button type="button">（成功）Success</button><!-- 浅蓝色背景 --><button type="button">（一般信息）Info</button><!-- 橙黄色背景 --><button type="button">（警告）Warning</button><!-- 红色背景 --><button type="button">（危险）Danger</button>
类中还可以添加尺寸
<button type="button">（大按钮）Large button</button> <button type="button">（默认尺寸）Default button</button> <button type="button">（小按钮）Small button</button> <button type="button">（超小尺寸）Extra small button</button>
以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了，质量也提升了。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。