------------------------------------------------------------------------------------------------------------------------
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