bootstracp.html
来源：原创
时间：2016-07-17
作者：脚本小站
分类：代码笔记
<!------------------------------------------------------------> <!-------------------------布局-------------------------------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>标题</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- 低版本的jq不支持，必须使用高版本的jq --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> <!------------------------------------------------------------> <!----------------------移动端开发----------------------------> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- user-scalable=no 可以禁用其缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!------------------------布局容器---------------------------> <!------------------------------------------------------------> <!-- 以下两种容器类不能互相嵌套 --> <!-- 固定宽度 支持响应式布局 --> <div></div> <!-- 类用于 100% 宽度，占据全部视口（viewport）的容器 --> <div></div> <!------------------------------------------------------------> <!-------------------------栅格系统--------------------------> <!-- 所有div放在.container中 --> <div> <!-- 每个row里边的 “col-md-数字” 之和不可大于12 --> <div> <div>.col-md-8</div> <div>.col-md-2</div> <div>.col-md-2</div> </div> </div> <!-- 各种屏幕下的栅格 .col-xs- (<768px) 手机 .col-sm- (≥768px) 平板 .col-md- (≥992px) 电脑屏幕 .col-lg- (≥1200px) 大屏幕 --> <div class="col-md-4 hidden-xs">.col-md-2</div> <!-- 在各种模式下隐藏方式 hidden-xs hidden-sm hidden-md hidden-lg --> <!------------------------------------------------------------> <!--------------------设置栅格之间的距离---------------------> <!-- 通过为“列（column）”设置 padding 属性， 从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）” 所包含的“列（column）”抵消掉了padding --> <!------------------------------------------------------------> <!------------------------列偏移------------------------------> <div> <div> <!-- 左右两列为4 右边偏移为4一共为12 --> <div></div> <div class="col-md-4 col-md-offset-4"></div> </div> </div> <!------------------------------------------------------------> <!------------------------嵌套列------------------------------> <!-- 栅格系统可以互相嵌套 --> <div> <div> <div> <div class="col-xs-8 col-sm-6"></div> <div class="col-xs-4 col-sm-6"></div> </div> </div> </div> <!------------------------------------------------------------> <!---------------------------列排序---------------------------> <!-- 通过使用 .col-md-push-* 和 .col-md-pull-* 类可以改变列的顺序 --> <div> <!-- 可以使第一个和第二个调换 --> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> <!------------------------------------------------------------> <!------------------------------------------------------------> <h1></h1> ~ <h6></h6> .small <!-- small --> .lead <!-- 中心内容 --> <!------------------------------------------------------------> <!---------------------------对齐-----------------------------> <p>左对齐</p> <p>居中对齐</p> <p>右对齐</p> <p>合适的</p> <p>不包裹</p> <!------------------------------------------------------------> <!----------------------改变大小写----------------------------> <p>转小写</p> <p>转大写</p> <p>首字母大写</p> <!------------------------------------------------------------> <!------------------------缩略语------------------------------> <!-- 鼠标悬停显示title的内容 --> <abbr title="attribute">attr</abbr> <!-- 首字母缩略语 --> .initialism <abbr title="HyperText Markup Language">HTML</abbr> <!------------------------------------------------------------> <!-------------------------无样式列表-------------------------> <!-- 直接子元素有效 --> .list-unstyled <ul> <li></li> </ul> <!------------------------------------------------------------> <!----------------------水平排列的描述-----------------------> .dl-horizontal <!-- 标题和说明水平排列 --> .text-overflow <!-- 自动截断过长的标题(dt)，在小屏幕中排列显示 --> <dl> <dt>标题</dt> <dd>说明</dd> </dl> <!------------------------------------------------------------> <!-----------------------用户输入-----------------------------> <!-- 将里面的内容用小黑框包裹起来 --> <kbd></kbd> <!------------------------------------------------------------> <!--------------------------代码块----------------------------> .pre-scrollable <!-- max-height 为 350px ，并在垂直方向展示滚动条 --> <!------------------------------------------------------------> <!-------------------------响应式表格------------------------> <!-- 小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 --> .table-responsive <!------------------------------------------------------------> <!------------------------------------------------------------>