Bootstrap笔记
------------------------------------------------------------------------------------------------------------------------
Bootstrap基础 内容概要 全局CSS样式 栅格系统 1. row必须放到container和container-fluid里面 2. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 列的样式 .col-xx（lg md sm xs）-数字（1~12） 响应式应用： - col-md-6 - col-xs-8 container有一个padding是15px row有一个margin是-15px 列是支持嵌套的 列偏移： col-xx-offset-数字（1~12） 列排序： .col-md-pull-数字 .col-md-push-数字 文本对齐类：display-inline - .text-left - .text-center - .text-right 表单 默认的 - label标签放在input框上面 .form-inline - 横着放一排 .form-horizontal - label标签和input框左右分开放的 都会用到：.form-group --> label + input + span form-horizontal模板： <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="邮箱"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form> 表格 <table class="table"> ... </table> .table .table-striped --> 斑马线 .table-bordered --> 加上外边框 .table-hover --> 鼠标悬浮变色 .table-condensed --> padding减半 响应式表格： <div class="table-responsive"> // table外面包裹一层div <table class="table"> ... </table> </div> 当屏幕宽度过小的时候，表格本身会出来滚动条 按钮 <button type="button" class="btn btn-primary">蓝色按钮</button> <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> 如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。 .btn 当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。 禁用状态： button : disabled="disabled" a : .disabled 颜色： .btn-default .btn-success .btn-warning .btn-danger 尺寸： .btn-lg .btn-sm .btn-xs 块级btn: .btn-block 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素 图片 响应式图片： .img-responsive 图片形状： .img-rounded .img-circle .img-thumbnail 显示或隐藏 <div class="show">...</div> <div class="hidden">...</div> 快速浮动: - .pull-left --> 往左浮 - .pull-right --> 往右浮 清除样式： - .clearfix 情景背景色 .bg-primary （#337ab7） .bg-success （#dff0d8） .bg-info （#d9edf7） .bg-warning （#fcf8e3） .bg-danger （#f2dede） 一个高大上的背景颜色 #eeeeee 文本颜色 .text-muted (#777) .text-primary (#337ab7) .text-success (#3c763d) .text-info (#31708f) .text-warning （#8a6d3b） .text-danger （#a94442） Bootstrap3居中处理： 水平居中： - .center-block 不涉及到列的居中 本质上就是 margin: 0 auto col-*自带float-left。不使用.center-block 让哪个标签居中就把它写在哪个标签的样式类中 <div class="center-block" style="border: 1px solid red; width: 200px">不涉及列的水平居中</div> - 我们自定义的居中 可在涉及到列的居中时使用 .col-centered { float: none; margin: 0 auto; } - 文本类居中或者display: inline .text-center 自定义垂直居中： .vertical-center { display: flex; align-items: center; } .vertical-center要用在父标签中，让子块级标签垂直居中 <div class="vertical-align" style="height: 200px;border: 1px solid black"> <div style="width: 100px;height: 100px;background-color: red"> </div> </div> Bootstrap组件： 图标： span标签，里面加上样式类 <span class="glyphicon glyphicon-search"></span> 参考：http://v3.bootcss.com/components/#glyphicons-glyphs 下拉菜单： 引入bootstrap.js --> 之前还要先引入jQuery.js <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 点我展开 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li role="separator" class="divider"></li> <li><a href="#">我被一条线分离</a></li> </ul> </div> 按钮组 参考：http://v3.bootcss.com/components/#btn-groups .btn-group .btn-toolbar 为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"。 此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，我们使用 aria-label，但是， aria-labelledby 也可以使用。 <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> 尺寸 .btn-group-lg .btn-group-sm .btn-group-xs 按钮式下拉菜单 参考：http://v3.bootcss.com/components/#btn-dropdowns 单按钮下拉菜单 分裂式按钮下拉菜单 尺寸 向上弹出菜单 .css 和.min.css的区别是： .min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小 .css 是没有压缩的 .min.js .js 同上 js文件我们通常放在body标签里面的最下面 除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面 输入框组 参考：http://v3.bootcss.com/components/#input-groups 导航 <!--导航区开始--> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> </ul> <!--导航区结束--> <!--面板区开始--> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div> <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div> <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div> </div> <!--面板区结束--> .nav-tabs --> tab式 .nav-pills --> 胶囊式 .nav-justified --> 两端对齐 .nav-stacked --> 垂直方向堆叠排列 导航条 参考：http://v3.bootcss.com/components/?#navbar .navbar-btn .navbar-text .navbar-left .navbar-right --> 在导航条里面用左右浮动的话需要使用这两个 .navbar-link 导航条不需要放在.container里面 .navbar-fixed-top --> 固定在顶部 如果使用了上面固定在顶部的样式，那么就需要给body设置padding body { padding-top: 70px; } .navbar-static-top --> 静止在顶部 .navbar-inverse --> 反色 面包屑导航/路径导航 <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> 分页 <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><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="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> 你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类 我们建议将 active 或 disabled 状态的链接（即 <a> 标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击。 <nav aria-label="..."> <ul class="pagination"> <li class="disabled"> <span> <span aria-hidden="true">«</span> </span> </li> <li class="active"> <span>1 <span class="sr-only">(current)</span></span> </li> ... </ul> </nav> 翻页 <nav aria-label="..."> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> .previous .next 向两端对齐 标签 .label <span class="label label-default">Default</span> 徽章 .badge 微信未读消息 个人中心通知的提示 <a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> 巨幕 .jumbotron 如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。 <div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> 页头 <div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div> 缩略图 <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> 进度条 应用场景： - 上传下载加载 - 体现步骤进度 <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> .progress-bar-striped 条纹状进度条 动起来 .active 颜色 .progress-bar-success .progress-bar-warning .progress-bar-info .progress-bar-danger 媒体对象 后面写项目会用到 .media-left .media-body .media-right 头像的位置： .默认 .media-middle --> 中间 .media-bottom --> 底部 <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div> 列表组 参考：http://v3.bootcss.com/components/?#list-group 外面的div加这个样式： .list-group 里面的元素加这个样式: .list-group-item <ul class="list-group"> <li class="list-group-item">11111</li> <li class="list-group-item">22222</li> <li class="list-group-item">33333</li> </ul> 面板 <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">标题</h3> </div> <div class="panel-body"> 内容 </div> <div class="panel-footer">脚注</div> </div> 情景颜色： .panel-primary .panel-success .panel-info .panel-warning .panel-danger Well 把 Well 用在元素上，就能有嵌入（inset）的简单效果。 .well .well-lg .well-sm <div class="well well-sm">hello lcg</div> JavaScrippt插件 模态框 位置要放在body里面（body的直接子元素） 模态框包含了模态框的头、体和一组放置于底部的按钮 弹出方式： 1. 通过 data 属性 data-toggle="modal" data-target="#myModal" 2. 通过JS代码 - $("#myModal").modal("show") --> 显示出来 - $("#myModal").modal("hide) --> 隐藏 模态框大小：(放在modal里面标签上的) .modal-lg .modal-sm 动画效果： fade 一个正经模态框： 1. .modal-header 2. .modal-body 3. .modal-footer 参数 backdrop： true/false/'static' --> 遮罩层的参数 keyboard: true/false --> 键盘上的ESC按键 事件 显示之前 显示完 隐藏之前 隐藏完 $(document).ready(function () { $('#myModal').on('show.bs.modal', function (e) { // do something... alert("我让模态框显示出来，但是它还没来得及显示"); }); $('#myModal').on('shown.bs.modal', function (e) { // do something... alert("我让模态框显示出来，现在它已经显示出来了"); }) <!-- 打开模态框的按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <!--打开模态框的按钮结束--> <!--模态框开始--> <!--如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。--> <div id='myModal' class="modal fade" tabindex="-1" role="dialog"> <!--模态框提供了两个可选尺寸类modal-lg modal-sm，通过为 .modal-dialog 增加这个样式调整类实现 。--> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- modal --> <!--模态框结束--> Carousel(轮播图) Collapse(可伸缩菜单) 其他前端库 font awesome http://fontawesome.io/ i 标签 区别于Bootstrap自带图标的span标签 sweetalert: https://limonte.github.io/sweetalert2/ 引用css文件和JS文件之后 swal("标题", "内容", "success") 以下为了解内容： Toastr http://www.jq22.com/yanshi476 可以查看简单示例 jQueryLazyLoad
初识Bootstrap
1、什么是
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
在Bootstrap出现之前：
命名：重复、复杂、无意义（想个名字费劲）
样式：重复、冗余、不规范、不和谐
页面：错乱、不规范、不和谐
在使用Bootstrap之后：
各种命名都统一并且规范化。
页面风格统一，画面和谐。
3、Bootstrap下载
我们使用V3（当前版本 v3.3.7）版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。
1、为什么要进行响应式开发？
随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。
2、什么是响应式？
利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。
3、用到的技术：
（1）CSS3@media查询
用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
常见属性：
-
device-width, device-height 屏幕宽、高
-
width,height 渲染窗口宽、高
-
orientation 设备方向
-
resolution 设备分辨率
语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
不同的媒体使用不同的stylesheet
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
（2）viewport
手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
-
height：和 width 相对应，指定高度。
-
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
-
maximum-scale：允许用户缩放到的最大比例。
-
minimum-scale：允许用户缩放到的最小比例。
-
user-scalable：用户是否可以手动缩放。
bootstrap-3.3.7-dist/
├── css // CSS文件
│ ├── bootstrap-theme.css // Bootstrap主题样式文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件
│ ├── bootstrap-theme.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css // 核心CSS样式压缩文件
│ └── bootstrap.min.css.map
├── fonts // 字体文件
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件
├── bootstrap.js
├── bootstrap.min.js // 核心JS压缩文件
└── npm.js
2、处理依赖
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，并且版本相对应。
为了确保适当的绘制和触屏缩放，需要在<head>之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1>
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
指定IE内核：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
在pycharm中更改HTML初始模板方法：Settings - Editor - File and Code Templates - HTML File
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<body>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
布局容器 container
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ... </div>
栅格系统
http://v3.bootcss.com/css/#grid
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-md-4 来创建。
<div class="row">
<div class="col-md-4" style="border: 1px solid black">我占据前面三分之一</div>
<div class="col-md-4" style="border: 1px solid black">我占据中间三分之一</div>
<div class="col-md-4" style="border: 1px solid black">我占据后面三分之一</div>
</div>
可以设置当屏幕缩小时候的显示方式，当列缩小小于8的时候，两行会合并为一行显示：
<div class="row" style="background-color: green">
<div class="col-xs-8 col-md-12" style="border: 1px solid black">我最小为8</div>
<div class="col-xs-4 col-md-12" style="border: 1px solid black">我最小为4</div>
</div>
其他栅格参数：
http://v3.bootcss.com/css/#grid-options
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
媒体查询示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS媒体查询示例</title> <style> .c1 { background-color: red; } /*浏览器宽度小于600px的时候 背景颜色由red变为green;*/ @media screen and (max-width: 600px) { .c1 { background-color: green; } } </style> </head> <body> <div class="c1" style="height: 400px;width: 400px"></div> </body> </html>
列示例
col自带padding-right: 15px; padding-left: 15px; 即内填充（内容与border距离15px）
row自带的是margin-right: -15px;margin-left: -15px;
<div class="container-fluid">
<div class="row" style="background-color: hotpink">
<div class="col-md-6" style="background-color: red">
<div class="col-md-1" style="background-color: green">111</div>
<div class="col-md-1" style="background-color: green">222</div>
<div class="col-md-1" style="background-color: green">333</div>
<div class="col-md-1" style="background-color: green">444</div>
</div>
</div>
</div>
.row {
margin-right: -15px;
margin-left: -15px;
}
--------
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
列偏移 .col-md-pull .col-md-push-3
<div class="row">
<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>
本来应该在右边.col-md-3 .col-md-pull-9 本来应该在左边.col-md-9 .col-md-push-3
排版
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
<span class="h1">
大标题
<small>
小标题
</small>
</span>
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
通过添加 .lead 类可以让段落突出显示。
<p>hahahaaaaaaaaaaaa<span class="lead">bbbb</span>aaaaaaaaaaaaaa</p>
You can use the mark tag to <mark>highlight</mark> text.
文本对齐
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
文本大小写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
<abbr title="attribute">attr</abbr>
引用
<blockquote>
人面不知何处去，桃花依旧笑春风
<footer>崔护《题都城南庄》</footer>
</blockquote>
......
表格
http://v3.bootcss.com/css/#tables
<table class="table"> ... </table>
条纹状表格
<table class="table table-striped"> ... </table>
带边框的表格
<table class="table table-bordered"> ... </table>
鼠标悬停响应
<table class="table table-hover"> ... </table>
紧缩表格（单元格中的内补（padding）均会减半。）
<table class="table table-condensed"> ... </table>
状态类
.active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作
响应式表格：
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
所有效果：
<div class="table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed"> ... </table> </div>
表单
http://v3.bootcss.com/css/#forms
基本实例
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
内联表单
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword3">Password</label> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> <div class="input-group-addon">.00</div> </div> </div> <button type="submit" class="btn btn-primary">Transfer cash</button> </form>
水平排列的表单
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
输入框 <input type="text" class="form-control" placeholder="Text input"> 文本域 <textarea class="form-control" rows="3"></textarea>
.disabled 使得单选框radio和多选框checkbox不可被选
.checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
下拉列表
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
多选项
<select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
表单验证
.has-warning
.has-error
.has-success
autocomplete="off" novalidate
按钮
http://v3.bootcss.com/css/#buttons
<!-- Standard button --> <button type="button" class="btn btn-default">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首选项）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（链接）Link</button>
尺寸：
<p> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-default">（默认尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p>
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
为基于 <a> 元素创建的按钮添加 .disabled 类。
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
图片
响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
<img src="riz.png" alt="" class="img-rounded"> <img src="riz.png" alt="" class="img-circle"> <img src="riz.png" alt="" class="img-thumbnail">
情境文本颜色
text-muted (#777)
text-primary (#337ab7)
text-success (#3c763d)
text-info (#31708f)
text-warning （#8a6d3b）
text-danger （#a94442）
情境背景色
bg-primary （#337ab7）
bg-success （#dff0d8）
bg-info （#d9edf7）
bg-warning （#fcf8e3）
bg-danger （#f2dede）
显示或隐藏
<div class="show">...</div> <div class="hidden">...</div>
登录界面示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>登录界面</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> body { background-color: #eeeeee; } /*自定义用于col栅格的的居中样式.col-centered */ .col-centered { float: none; margin: 100px auto 0; } </style> </head> <body> <div class="container"> <div class="row"> <form class="form-horizontal col-sm-5 col-centered"> <div class="form-group"> <!--列的嵌套，列里面的列又被均分为12份--> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </div> </div> </form> </div> </div> </body> </html>
<div class="text-center">
<p>这段文字是居中显示的</p>
</div>
@media (min-width: 992px)
bootstrap.min.css:5
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
float: left;
}
Bootstrap3中有两种方法居中：
<div class="row">
<div class="col-md-4 col-md-offset-4" style="border: 1px solid red">12均分成三份，向右移动一份的距离</div>
</div>
2.使用自定义样式
.col-centered {
float: none;
margin: 0 auto;
}
<div class="center-block" style="border: 1px solid red; width: 200px">一般水平居中</div>
-
text-center还是用来水平居中display:inline的元素 -
mx-auto取代center-block用来水平居中display:block的元素 -
offset-*或mx-auto用来水平居中栅格系统的列元素
.vertical-align {
display: flex;
align-items: center;
}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .vertical-align { display: flex; align-items: center; } </style> <body> <div style="height: 200px;border: 1px solid black" class="vertical-align"> <div style="width: 100px;height: 100px;background-color: red"></div> </div> </body> </html>
注意：用在父标签中，让子块级标签垂直居中
flex布局介绍： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
常用组件
-
组件的很多功能需要用到bootstrap.js。
-
使用bootstrap.js之前当然需要引用一下对应版本的jQuery.js。
图标
http://v3.bootcss.com/components/#glyphicons
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
图标的可访问性 现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。 如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。 如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属性。
一个实例：
<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>
alert 组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了。
效果：
信息收集卡示例
示例代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>信息收集卡</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container"> <!--页头组件开始--> <div class="page-header"> <h1>信息收集卡 <small>共三步</small> </h1> </div> <!--页头组件结束--> <!--进度条组件开始--> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"> 1/3 </div> </div> <!--进度条组件结束--> <!--面板组件开始--> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">基本信息 <span class="glyphicon glyphicon-pushpin pull-right"></span></h3> </div> <div class="panel-body"> <!--表单开始--> <form class="form-horizontal"> <div class="form-group"> <label for="inputName" class="col-sm-2 control-label">姓名</label> <div class="col-sm-3"> <input type="text" class="form-control" id="inputName" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="inputMobile" class="col-sm-2 control-label">手机</label> <div class="col-sm-3"> <input type="text" class="form-control" id="inputMobile" placeholder="手机"> </div> </div> <div class="form-group"> <label for="inputEmail" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-3"> <input type="email" class="form-control" id="inputEmail" placeholder="邮箱"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">密码</label> <div class="col-sm-3"> <input type="password" class="form-control" id="inputPassword" placeholder="密码"> </div> </div> <div class="form-group"> <label for="inputFile" class="col-sm-2 control-label">头像</label> <div class="col-sm-3"> <input type="file" id="inputFile"> <span class="help-block">只支持png、jpg、gif格式。</span> </div> </div> <hr> <!--radio组件开始--> <div class="form-group"> <label class="col-sm-2 control-label">属性</label> <div class="col-sm-3"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 我是一个好人 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 我是一个坏人 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> 我不是个人 </label> </div> </div> </div> <!--radio组件结束--> </form> <!--表单结束--> </div> </div> <button class="btn btn-success pull-right">下一步</button> <!--面板组件结束--> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
效果图：
后台管理界面示例（优化版）
参考案例：http://v3.bootcss.com/examples/dashboard/
目录结构：
代码实现：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="http://v3.bootcss.com/favicon.ico"> <title>后台管理</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="dashboard.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">令人窒息的后台管理界面</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Dashboard</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-primary"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 菜单一 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> 菜单一下面的内容 </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 菜单二 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> 菜单二下面的内容 </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 菜单三 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> 菜单三下面的内容 </div> </div> </div> </div> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <!--面板组件开始--> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> <div style="padding-bottom: 15px"> <form class="form-inline"> <div class="form-group"> <input type="text" class="form-control" id="exampleInputEmail2" placeholder="搜索"> </div> <button type="submit" class="btn btn-primary">搜索</button> <button type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#myModal">添加 </button> </form> </div> <!--表格开始--> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th class="text-center">#</th> <th class="text-center">姓名</th> <th class="text-center">邮箱</th> <th class="text-center">爱好</th> <th class="text-center">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>LCG</td> <td>lcgbeautiful@gmail.com</td> <td>下棋、练字、弹琴、画画、读书，游泳，舞蹈，摄影</td> <td> <button type="button" class="btn btn-success edit"><span class="glyphicon glyphicon-pencil "></span>编辑 </button> <button type="button" class="btn btn-danger delete"><span class="glyphicon glyphicon-remove "></span>删除 </button> </td> </tr> <tr> <td>2</td> <td>LCG</td> <td>lcgbeautiful@gmail.com</td> <td>下棋、练字、弹琴、画画、读书，游泳，舞蹈，摄影</td> <td> <button type="button" class="btn btn-success edit"><span class="glyphicon glyphicon-pencil "></span>编辑 </button> <button type="button" class="btn btn-danger delete"><span class="glyphicon glyphicon-remove "></span>删除 </button> </td> </tr> <tr> <td>3</td> <td>LCG</td> <td>lcgbeautiful@gmail.com</td> <td>下棋、练字、弹琴、画画、读书，游泳，舞蹈，摄影</td> <td> <button type="button" class="btn btn-success edit"><span class="glyphicon glyphicon-pencil "></span>编辑 </button> <button type="button" class="btn btn-danger delete"><span class="glyphicon glyphicon-remove "></span>删除 </button> </td> </tr> <tr> <td>4</td> <td>LCG</td> <td>lcgbeautiful@gmail.com</td> <td>下棋、练字、弹琴、画画、读书，游泳，舞蹈，摄影</td> <td> <button type="button" class="btn btn-success edit"><span class="glyphicon glyphicon-pencil "></span>编辑 </button> <button type="button" class="btn btn-danger delete"><span class="glyphicon glyphicon-remove"></span>删除 </button> </td> </tr> </tbody> </table> </div> <!--表格结束--> <nav aria-label="Page navigation" class="pull-right"> <div> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><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="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </div> <!--面板组件结束--> </div> </div> </div> <!--模态框开始--> <!--如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。--> <div id='myModal' class="modal fade" tabindex="-1" role="dialog"> <!--模态框提供了两个可选尺寸类modal-lg modal-sm，通过为 .modal-dialog 增加这个样式调整类实现 。--> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">添加信息</h4> </div> <div class="modal-body"> <!--表单开始--> <form class="form-horizontal"> <div class="form-group"> <label for="inputName" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputName" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="inputEmail" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail" placeholder="邮箱"> </div> </div> <div class="form-group"> <label for="inputHobby" class="col-sm-2 control-label">爱好</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputHobby" placeholder="爱好"> </div> </div> </form> <!--表单结束--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary submit">提交</button> </div> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- modal --> <!--模态框结束--> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script> // 模态框上的提交按钮绑定事件 // 1. 取值 --> 取的模态框里面input的值 --> 保存到变量 // 2. 添加一行新记录 --> 新的tr标签 --> 自己拼接 // 4. 关闭模态框 $Mymodal = $("#myModal"); $(".submit").on("click", function () { // 1. 取值 --> 取的modal里面input的值 --> 保存到变量 var name = $("#inputName").val(); var email = $("#inputEmail").val(); var hobby = $("#inputHobby").val(); var num = $("tbody tr").length + 1; // 因为我们的编辑和新添加都用的一个模态框 // 需要做判断，我到底是添加呢还是编辑呢？ if ($Mymodal.data("currentTr") === undefined) { // 不是编辑操作 // 是新添加操作 // 生成完整的tr var trEle = document.createElement("tr"); var $trEle = $(trEle); $trEle.append("<td>" + num + "</td>"); $trEle.append("<td>" + name + "</td>"); $trEle.append("<td>" + email + "</td>"); $trEle.append("<td>" + hobby + "</td>"); $trEle.append('<td><button type="button" class="btn btn-success edit"><span class="glyphicon glyphicon-pencil "></span>编辑</button><button type="button" class="btn btn-danger delete"><span class="glyphicon glyphicon-remove"></span>删除</button></td>'); // 把tr加到table里面 $trEle.appendTo("tbody"); } else { // 是一个编辑操作 var $data = $Mymodal.data("currentTr"); // 这里可以删除掉.data("currentTr") $Mymodal.removeData("currentTr"); $data.eq(1).text(name); $data.eq(2).text(email); $data.eq(3).text(hobby); } $Mymodal.modal("hide"); }); // 编辑按钮 $table = $("table"); // $(".edit").on("click", function () { $table.on("click", ".edit", function () { // 1. 弹出模态框 $Mymodal.modal("show"); // 2. 取值 --> 当前行的姓名和爱好 --> 赋值给变量 var $siblings = $(this).parent().siblings(); var name = $siblings.eq(1).text(); var email = $siblings.eq(2).text(); var hobby = $siblings.eq(3).text(); // 3. 给modal框里的input赋值 $("#inputName").val(name); $("#inputEmail").val(email); $("#inputHobby").val(hobby); // 把当前的tr保存起来 $Mymodal.data("currentTr", $siblings); }); // 点击模态框里面的提交按钮要做的事儿 // 1. 取值 --> 取的modal里面input的值 --> 保存到变量 // 做判断 // 1. 如果能从$Mymodal.data("tr")能取到值（undefined）表示这是一个编辑操作 // 去替换当前tr的对应值 // 否则就是一个新添加的操作 // 删除按钮的事件 $table.on("click", ".delete", function () { // 更新序号 // 每一行的序号都减1 $(this).parent().parent().nextAll().each(function () { var $currTd = $(this).children().first(); var num = $currTd.text() - 1; $currTd.text(num); }); $(this).parent().parent().remove(); }); </script> </body> </html>
自定义样式：
/* * Base structure */ /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; } /* * Global add-ons */ .sub-header { padding-bottom: 10px; border-bottom: 1px solid #eee; } /* * Top navigation * Hide default border to remove 1px line. */ .navbar-fixed-top { border: 0; } /* * Sidebar */ /* Hide for mobile, show later */ .sidebar { display: none; } @media (min-width: 768px) { .sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; border-right: 1px solid #eee; } } /* Sidebar navigation */ .nav-sidebar { margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; } /* * Main content */ .main { padding: 20px; } @media (min-width: 768px) { .main { padding-right: 40px; padding-left: 40px; } } .main .page-header { margin-top: 0; } /* * Placeholder dashboard ideas */ .placeholders { margin-bottom: 30px; text-align: center; } .placeholders h4 { margin-bottom: 0; } .placeholder { margin-bottom: 20px; } .placeholder img { display: inline-block; border-radius: 50%; }
效果图：
JavaScript 插件
模态框
代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>模态框</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <body> <!-- 打开模态框的按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <!--打开模态框的按钮结束--> <!--模态框开始--> <!--如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。--> <div id='myModal' class="modal fade" tabindex="-1" role="dialog"> <!--模态框提供了两个可选尺寸类modal-lg modal-sm，通过为 .modal-dialog 增加这个样式调整类实现 。--> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- modal --> <!--模态框结束--> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
效果：
轮播图
图片不够下面会留空白。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>轮播图示例</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://oyh98v0ft.bkt.clouddn.com/aaa.jpg" alt="..."> <div class="carousel-caption"> <h2>这是第一张图</h2> <p>你好好看</p> </div> </div> <div class="item"> <img src="http://oyh98v0ft.bkt.clouddn.com/bbb.jpg" alt="..."> <div class="carousel-caption"> <h2>这是第二张图</h2> <p>你好好看</p> </div> </div> <div class="item"> <img src="http://oyh98v0ft.bkt.clouddn.com/ccc.jpg" alt="..."> <div class="carousel-caption"> <h2>这是第三张图</h2> <p>你好好看</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script> $('.carousel').carousel({ interval: 2000 }) </script> </body> </html>
效果：
伸缩自如的左侧菜单
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-primary"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 菜单一 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> 菜单一下面的内容 </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 菜单二 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> 菜单二下面的内容 </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 菜单三 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> 菜单三下面的内容 </div> </div> </div> </div>
效果：
Font Awesome
官网：http://fontawesome.io/
常用图标样式：
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i>
Delete
</a>
<a class="btn btn-primary" href="#">
<i class="fa fa-pencil fa-lg"></i>
Edit
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-ban fa-lg"></i>
Ban
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-unlock fa-lg"></i>
Make admin
</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i>
Settings
</a>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Name">
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
SweetAlert2
下载：https://limonte.github.io/sweetalert2/
引用css文件和JS文件之后 ：swal("标题", "内容", "success")
swal( 'Good job!', 'You clicked the button!', 'success' )
success
error
warning
info
question
补充
模态框button与form绑定
<!--将form表单外面的按钮与form表单绑定，使其有提交表单的功能，下面modal-submit是按钮id-->
<script>
$("#modal-submit").on('click',function(){
$("#myModal form").submit();
});
</script>
栅格表单前面提示文字对齐
