<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--以移动设备为优先--> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" > <title>BootStrap</title> <!--引入外部的bootstrap中的css文件--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!--jQuery文件务必在bootstrap.min.js之前引入--> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!--再引入bootstrap.min.js--> <script src="bootstrap/js/bootstrap.min.js"></script> </head> <body style="background:gray;"> <!--布局容器--> <!--contailner 固定宽度为1170px--> <div class="container" style="background: #ffffff;"> 大家好 </div> <!--fluid宽度为100%--> <div class="fluid" style="background: #ffffff"> 同志们辛苦了 </div> <!--排版容器--> <!--<h1-h6>--> <!--.page-header设置页头--> <h1 class="page-header">为人民服务</h1> <!--small小一号标题--> <!--big大一号标题--> <p> p默认定义文字大小为12像素 行距也已经定义好了 </p> <strong>推荐使用的加粗</strong> <em>推荐使用的倾斜</em> <del>推荐使用的删除</del> <!--文本对齐方式--> .text-left左对齐 .text-center居中 .text-uppercase英文大写 .text-lowercase英文小写 .text-capitalize首字母大写 <!--列表--> .list-unstyled 去掉列表前面的符号和原有的格式 .list-inline 变横向排列 dl dt dd 自定义列表 .dl-horizontal 横向列表 <!--表格--> .table表格的一个基类，如果加其他的样式。都在此之上 .table-bordered 给表格加上外边框 .table-hover 鼠标悬停效果 .table-striped 斑马线效果，隔行换色 .table-condensed 变紧凑 <!--响应式表格--> .table-responsive 给table的父元素加，不是加在table里面 响应式表格 如果内容不能完全显示，自动加滚动条 状态类设置的行或单元格 .active 鼠标悬停在单元格时所设置的颜色 .success标识成功或积极的动作 .info标识普通的提示信息或动作 .warning标识警告或需要用户注意 .danger标识危险或潜在的带来负面影响的动作 <!--响应式图片--> .img-responsive .img-circle 椭圆 .img-rounded 圆角矩形 .img-thumbnail 给图片加圆角边框 <!--栅格系统--> 栅格系统一定要放入容器中 <div class="container"></div> <div class="container-fluid"></div> 栅格系统，浏览器窗口自动分配最多12列，如果满了，会换到下一行 栅格系统由row col组成 <!--偏移--> col-md-offset-x 向右偏移x个列 <!--排序--> col-xs/sm/md/lg-pull-x 向左偏移 col-xs/sm/md/lg-push-x 向有偏移 <!--文本颜色--> .text-muted .text-success .text-info .text-primary .text-waring .text-danger <!--下拉三角--> <span class="caret"></span> <!--快速浮动--> .pull-left 左浮动 .pull-right 右浮动 .clearfix 清除浮动 <!--表单--> .form-control 圆角边框 .form-group 给外面包裹的盒子加 .checkbox-inline 给label标签加 .redio-inline给label标签加 .form-horizontal响应式表单 </body> </html>