功能强大的Bootstrap使用手册（一）

2024-03-14 20:51:03 169

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。

1.编写头部

<head>
<metacharset="UTF-8">
<!--为了让ie采用最新的渲染模式，要把这个标签添加上-->
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<!--针对响应式布局，首先获取设备的物理宽度，根据设备物理宽度设置网页宽度，按照1:1缩放-->
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>LearnBootstrap</title>
<!--直接引用文件-->
<linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css">
<!--引用cdn地址-->
<linkrel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!--为了支持ie9以下，要加上这些-->
<!--[ifltIE9]>
<!--让他支持h5标签-->
<scriptsrc="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--让他支持媒体查询，也就是响应式-->
<scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
</head>

2.引入js

这个可以写在body

<!--jQuery文件。务必在bootstrap.min.js之前引入-->
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!--最新的Bootstrap核心JavaScript文件-->
<scriptsrc="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

3.使用container类
container类是一个常用的div类
主要是用居中功能

<divclass="container">hello</div>

4.使用栅格化系统

栅格化系统是BootStrap一个非常常用的一个布局系统
简单的使用如下

<divclass="row">
<!--xs表示在手机上，sm表示在平板上，md表示在桌面上。后面的数字表示占多少列，满屏为12列-->
<!--内容超过栅格高度，则会增加高度，不会增加宽度-->
<!--offset表示向右移动几列-->
<divclass="col-xs-12col-sm-6col-md-8col-md-offset-4">.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>
<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>
</div>

<divclass="row">
<!--push向后移动，pull向前移动-->
<divclass="col-xs-12col-sm-6col-md-8col-md-push-4">.col-xs-12.col-sm-6.col-md-8</div>
<divclass="col-xs-6col-md-4col-md-pull-8">.col-xs-6.col-md-4</div>
</div>

可以看到栅格化系统可以根据不同设备调整不同宽度

5.使用表格

<divclass="container">
<!--响应式表格，内容太长可以左右移动-->
<divclass="table-responsive">
<!--table后几个分别是表格有边框，鼠标经过tbody行时颜色加深，表格紧缩-->
<tableclass="tabletable-borderedtable-hovertable-condensed">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<!--该行颜色为浅绿-->
<trclass="success">
<th>表格内容</th>
<th>表格内容</th>
<th>表格内容</th>
</tr>
<!--该行颜色为浅蓝-->
<trclass="info">
<th>表格内容</th>
<th>表格内容</th>
<th>表格内容</th>
</tr>
<!--该行颜色为米白-->
<trclass="warning">
<th>表格内容</th>
<th>表格内容</th>
<th>表格内容</th>
</tr>
</tbody>
</table>
</div>
</div>

如果是想某一格变颜色也可以在th标签内加类像tr一样

6.使用表单

最基本的用法如下

<divclass="container">
<form>
<!--的部分项是一个form-group的父布局，里面有label和input-->
<divclass="form-group">
<!--label的for要和input的id对应-->
<labelfor="exampleInputEmail1">Emailaddress</label>
<!--input的class要设为form-control-->
<inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email">
</div>
<divclass="form-group">
<labelfor="exampleInputPassword1">Password</label>
<inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password">
</div>
<divclass="form-group">
<labelfor="exampleInputFile">Fileinput</label>
<inputtype="file"id="exampleInputFile">
<!--帮助提示文字-->
<pclass="help-block">Exampleblock-levelhelptexthere.</p>
</div>
<divclass="checkbox">
<label>
<inputtype="checkbox">Checkmeout
</label>
</div>
<buttontype="submit"class="btnbtn-default">Submit</button>
</form>
</div>

如果将form的类设为form-inline则将所有元素显示在同一行

如果将form的类设为form-horizontal则每个form-group显示一行，不过要自己设置宽度
如

<divclass="container">
<!--让每一个form-group显示一行，不过每个form-group的子项都要规定宽度-->
<formclass="form-horizontal">
<divclass="form-group">
<labelfor="Emai"class="col-md-2control-label">Email</label>
<!--input-group让提示和补充显示在同一行-->
<divclass="col-md-10">
<inputclass="form-control"type="email"placeholder="Email"id="Emai">
</div>
</div>
<divclass="form-group">
<labelfor="Passwor"class="col-sm-2control-label">Password</label>
<divclass="col-sm-10">
<inputclass="form-control"type="password"placeholder="Password"id="Passwor">
</div>
</div>
<buttontype="submit"class="btnbtn-primarycol-md-offset-2">summit</button>
</form>
</div>

我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同
Bootstrap给我们提供了这个很实用的功能

<divclass="container">
<form>
<!--父div的类要增加两项-->
<!--成功状态-->
<divclass="form-grouphas-successhas-feedback">
<labelclass="control-label"for="inputSuccess2">Inputwithsuccess</label>
<inputtype="text"class="form-control"id="inputSuccess2"aria-describedby="inputSuccess2Status">
<!--右边的图标-->
<spanclass="glyphiconglyphicon-okform-control-feedback"aria-hidden="true"></span>
<!--这个信息隐藏，增加了代码的可读性-->
<spanid="inputSuccess2Status"class="sr-only">(success)</span>
</div>
<!--警告状态-->
<divclass="form-grouphas-warninghas-feedback">
<labelclass="control-label"for="inputWarning2">Inputwithwarning</label>
<inputtype="text"class="form-control"id="inputWarning2"aria-describedby="inputWarning2Status">
<spanclass="glyphiconglyphicon-warning-signform-control-feedback"aria-hidden="true"></span>
<spanid="inputWarning2Status"class="sr-only">(warning)</span>
</div>
<!--错误状态-->
<divclass="form-grouphas-errorhas-feedback">
<labelclass="control-label"for="inputError2">Inputwitherror</label>
<inputtype="text"class="form-control"id="inputError2"aria-describedby="inputError2Status">
<spanclass="glyphiconglyphicon-removeform-control-feedback"aria-hidden="true"></span>
<spanid="inputError2Status"class="sr-only">(error)</span>
</div>
</form>
</div>

7.按钮

按钮是必不可少的一样东西

<!--白色背景-->
<buttontype="button"class="btnbtn-default">（默认样式）Default</button>
<!--蓝色背景-->
<buttontype="button"class="btnbtn-primary">（首选项）Primary</button>
<!--绿色背景-->
<buttontype="button"class="btnbtn-success">（成功）Success</button>
<!--浅蓝色背景-->
<buttontype="button"class="btnbtn-info">（一般信息）Info</button>
<!--橙黄色背景-->
<buttontype="button"class="btnbtn-warning">（警告）Warning</button>
<!--红色背景-->
<buttontype="button"class="btnbtn-danger">（危险）Danger</button>

类中还可以添加尺寸

<buttontype="button"class="btnbtn-primarybtn-lg">（大按钮）Largebutton</button>
<buttontype="button"class="btnbtn-primary">（默认尺寸）Defaultbutton</button>
<buttontype="button"class="btnbtn-primarybtn-sm">（小按钮）Smallbutton</button>
<buttontype="button"class="btnbtn-primarybtn-xs">（超小尺寸）Extrasmallbutton</button>

以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了，质量也提升了。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

功能强大的Bootstrap使用手册（一）

热门推荐

随机推荐