bootstrap布局容器

<div class="container">固定宽度 1170px</div> <div class="container-fluid">宽度为 100%</div>

bootstrap排版标签

<h1></h1> 36px <h2></h2> 30px <h3></h3> 24px <h4></h4> 18px <h5></h5> 14px <h6></h6> 12px `.page-header`设置页头，给标题加一个分割线 <h1 class="page-header">hello world</h1> <small></small>副标题小一号 <big></big>副标题大一号 <strong></strong>推荐使用的加粗 <em></em>推荐使用的 <del></del>删除线 <div class="container"> <big>《送孟浩然之广陵》</big><br/> <small>故人西辞黄鹤楼</small><br/> <strong>烟花三月下扬州</strong><br/> <em>孤帆远影碧山尽</em><br/> <del> 唯见长江天际流</del> </div>

文本对齐方式

.text-left 左对齐 .text-center居中对齐 .text-right 右对齐

英文大小写

.text-uppercase 大写 .text-lowercase 小写 .text-capitalize 首字母大写

列表

.list-unstyled去掉列表前面的符号，和去掉原有的格式 .list-inline 把<li></li>之间的内容，变成横向排列 <ul class="list-inline list-unstyled"> <li>PHP</li> <li>iOS</li> </ul>

自定义列表

.dl-horizontal 设置变成横向排列 <dl class="dl-horizontal"> <dt>PHP</dt> <dd>server script</dd> </dl>

表格

.table 表格的一个基类，如果加其他的样式，都在.tabel的基础上 .table-bordered 给表格加外边框 .table-responsive给table的父元素加以移动设备为优先，如果内容不能完全的显示，会出现滚动条

状态类

状态类设置的是行tr或 td

Class描述.active鼠标悬停在单元格或行上设置颜色.bg-success标识成功或积极的动作.bg-info标识普通的提示信息或动作.bg-warning标识警告或需要用户注意的动作.bg-danger标识危险或潜在带来负面影响的动作

响应式图片

.img-responsive 响应式图片 图片的形状 .img-circle 椭圆形 .img-rounded 圆角矩形 .img-thumbnail 给图片加圆角的边框

栅格系统

栅格系统一定要放入容器中 <div class=”container”></div> <div class=”container-fluid”></div> Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

如果想做成响应式效果，使用栅格系统参数 - 小于768 手机端 Col-xs- - 大于768 小于992 平板 Col-sm- - 大于992 小于1200 Col-md- - 大于1200 Col-lg-

偏移

偏移 offset注意：只能向右偏移语法：col-xs/sm/md/lg-offset-数值举例：col-md-offset-2 pc中等屏幕向右偏移 2个列

排序

语法：col-xs/sm/md/lg-pull 向左偏移语法：col-xs/sm/md/lg-push 向右偏移 <div class="row"> <div class="col-md-4">hello</div> <div class="col-md-2 col-md-offset-5">world</div> </div> <div class="row"> <div class="col-md-4">hello</div> <div class="col-md-8">world</div> </div> <div class="row"> <div class="col-md-4 col-md-push-8">hello</div> <div class="col-md-8 col-md-pull-4">world</div> </div>

辅助样式

情境文本颜色 - .text-muted(柔和) - .text-success - .text-info - .text-primary - .text-warning - .text-danger

背景文本颜色 - .bg-success - .bg-info - .bg-primary - .bg-waring - .bg-danger

下拉三角 <span class=”caret”></span>

快速浮动 - pull-left 左浮动 - pull-right 右浮动

清除浮动 - .clearfix给父盒子加就相当于<div style=”clear:both”></div>

表单

<!-- .form-inline表单行内显示 --> <form class="form-inline"> <div class="form-group"> <label for="email">邮箱</label> <input type="email" name="email" id="email" class="form-control"> </div> <div class="form-group"> <label for="pwd">密码</label> <input type="password" name="pwd" id="pwd" class="form-control"> </div> <div class="form-group"> <label for="tel">手机号</label> <input type="text" name="tel" id="tel" class="form-control"> </div> <!--复选框--> <div class="form-group"> <label class="checkbox-inline"><input type="checkbox" name="hobby" >唱歌</label> <label class="checkbox-inline"><input type="checkbox" name="hobby" >旅游</label> <label class="checkbox-inline"><input type="checkbox" name="hobby" >睡觉</label> <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled >敲代码</label> </div> <!--单选框--> <div class="form-group"> <label class="radio-inline"><input type="radio" name="sex" value="男">男</label> <label class="radio-inline disabled"><input type="radio" name="sex" value="女" disabled="">女</label> </div> <!--输入框组--> <div class="form-group" > <div class="input-group"> <span class="input-group-addon">搜索</span> <input type="search" name="sc" id="sc" class="form-control"> </div> </div> <!--输入框组--> <div class="form-group"> <div class="input-group"> <input type="search" name="sear" id="sear" class="form-control"> <div class="input-group-addon">查询内容</div> </div> </div> <!--输入框组--> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" name="username" class="form-control"> </div> </form>

响应式表单

注意：输入框不能使用栅格系统，给

…给这类的标签加

<!-- .form-horizontal响应式表单 --> <div class="container" style="background:#e6e6e6;"> <form class="form-horizontal"> <div class="form-group"> <label class="col-md-2 col-sm-2 col-xs-2 text-right" for="username">账号</label> <div class="col-md-10 col-sm-10 col-xs-10"> <input type="text" name="username" id="username" class="form-control"> </div> </div> <div class="form-group"> <label for="pwd" class="col-md-2 col-sm-2 col-xs-2 text-right">密码</label> <div class="col-md-10 col-sm-10 col-xs-10"> <input type="password" name="pwd" id="pwd" class="form-control"> </div> </div> </form> </div>

按钮

<button class="btn btn-primary">登陆</button> <input type="button" value="修改 " class="btn btn-default"> <a href="#" class="btn btn-danger btn-lg ">修改内容</a> <a href="#" class="btn btn-warning btn-sm">修改内容</a> <a href="#" class="btn btn-success btn-xs">修改内容</a> <a href="#" class="btn btn-success active">修改内容</a> <a href="#" class="btn btn-danger active ">修改内容</a> <!--按钮组--> <div class="btn-group"> <button class="btn btn-success">按钮内容</button> <button class="btn btn-success">修改内容</button> <button class="btn btn-success">查询内容</button> </div>

下拉菜单

.dropdown-menu 给下拉列表中的内容给ul加样式.dropdown 包含触发的按钮和下拉列表加样式 —父元素.data-toggle 按钮的触发器.dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 右对齐.divider 给加之间没有内容 <div class="dropdown "> <button class="btn btn-default" data-toggle="dropdown"> 登录 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">qq登录</a></li> <li><a href="#">微信登录</a></li> <li class="divider"></li> <li><a href="#">邮箱登录</a></li> <li><a href="#">手机登录</a></li> <li><a href="#">微博登录</a></li> </ul> </div>

标签页

.nav是标签页的一个基类 —给ul加.nav-tabs 普通标签页.nav-pills 胶囊式标签页.nav-stacked垂直排列.active 给加默认显示的是哪个标签页内容 <h2>标签页1</h2> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> <h2>标签页2</h2> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> <h2>标签页2</h2> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul>

导航栏

.navbar：导航栏的基类，用于 元素。 .navbar-default：导航栏默认样式，用于 元素。 .container是 的子元素。导航栏内容都放入其中。 .navbar-header：导航栏头部样式。.collapse是折叠导航栏的样式的基类。列表 父元素加 .navbar-collapse是折叠导航栏样式。给ul的父元素加.nav是导航栏的链接基类。 .navbar-nav是导航栏的链接样式。 .navbar-left 或 .navbar-right - .navbar-fixed-top：导航栏固定在顶部，用于 元素。需要为设置padding-top:70px .navbar-fixed-bottom：导航栏固定在底部，用于 元素 .navbar-inverse：可以实现反色导航栏，用于 元素。 <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" > <div class="container"> <!--页面的头部--> <div class="navbar-header"> <a href="#"><img src="../images/1.jpg" height="50"></a> </div> <!--导航链接--> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">iOS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Swift</a></li> <li><a href="#">Java</a></li> </ul> </div> </div> </nav>

分页

<div class=""> <ul class="pagination"> <li ><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </div>