总结Bootstrap
时间：2019-11-23
栅格布局
布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
<div class="container"> ... </div> <div class="container-fluid"> ... </div>
栅格系统是通过一系列的行和列的组合来创建页面布局，你的内容就可以放入这些创建好的布局中
行(row)必须包含在.container (固定宽度) 或.container-fluid（100%宽度中），内容应当放在列里面，并且row的直接子元素只能是列，每一行最多包含12列，超出的列则换到下一行。
栅格布局图
媒体查询
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
<style>
.box {
margin-top: 20px;
background-color: #bbb;
}
</style>
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"><div class="box">1</div></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"><div class="box">2</div></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"><div class="box">3</div></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"><div class="box">4</div></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"><div class="box">5</div></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"><div class="box">6</div></div> </div> </div>
<!-- 数字代表在不同屏幕尺寸下占多少份 -->
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度，设偏移的元素会把后面的元素把后挤。
<style> .box { margin-top: 20px; background-color: #bbb; } </style> <div class="container"> <div class="row"> <div class="col-xs-4"><div class="box">1</div></div> <div class="col-xs-4 col-xs-offset-4"><div class="box">2</div></div> </div> <div class="row"> <div class="col-xs-3 col-xs-offset-3"><div class="box">1</div></div> <div class="col-xs-3 col-xs-offset-3"><div class="box">2</div></div> </div> <div class="row"> <div class="col-xs-6 col-sm-4"><div class="box">1</div></div> <div class="col-xs-6 col-sm-4"><div class="box">2</div></div> <div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0"><div class="box">3</div></div> </div> </div>
列嵌套
通过在列中嵌套行（row),可以讲原有的列再分成12列。代码略~
列排序
在列上使用 .col-* -push-* ,可以将列向右推，使用.col-* -pull-* 可以将列向左拉
表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线 .table表格必须的基类
.table-border 带边框的表格
.table-striipt 带条纹的表格
.table-hove 鼠标悬浮时为整行添加背景色
.table-condensed 紧凑的单元格（减少单元格之间的pdding）
响应式表格，当屏幕宽度不足以显示表格所有内容的时候，表格内容出现折叠甚至溢出的时候为了解决这个问题，我们可以在table外面嵌套一个有 table-responsive类的元素，这时不足以显示表格所有的内容的时候会出现一个滚动条
按钮
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<div class="col-xs-12 col-md-6">
a标签 button按钮 input type=“button” 都一样
<a href="" class="btn btn-default">default</a> <a href="" class="btn btn-primary">primary</a> <a href="" class="btn btn-success">success</a> <a href="" class="btn btn-danger">danger</a> <a href="" class="btn btn-warning">warning</a> <a href="" class="btn btn-info">info</a> <a href="" class="btn btn-link">link</a> </div>
块级按钮宽度会充满整个父元素，移动设备上比较常见 .btn-block
<div class="col-xs-12 col-md-6">
<a href="" class="btn btn-success btn-sm btn-block">提交</a>
</div>
响应式图片
通过img标签添加 .img-responsive 类名，就可以让图片自动根据父元素的宽度进行缩放
也可以改变图片的形状：
.img-rounded 圆角的图片
.img-circle 椭圆的图片
.img-thumbnail 外面带白色边框的图片
文本的颜色
通过 .text-* 改变文字的颜色
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-info">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-danger">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
背景颜色
通过 .bg-* 改变元素的背景颜色
<p class="bg-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="bg-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="bg-info">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="bg-warning">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="bg-danger">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
浮动
左浮动 .pull-left ，右浮动 .pull-right 清除浮动 .clearfixI（为父元素添加）
剧中元素
添加 .center-block 就可以让元素转换为块元素并在父元素水平剧中
显示和隐藏
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。
响应式显示和隐藏
打印机类
.visible-print-*，打印时显示（打印机） *：block inline inline-block
下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
<div class="container"> <div class="row"> <div class="col-xs-12"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 编辑 <span class="caret"></span> </button> <ul class="dropdown-menu"> <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> <li><a href="">查找</a></li> </ul> </div> </div> </div> </div>
按钮组
<!-- 按钮组基本用法 把按钮元素放入一个btn-group 类的元素里面 --> <div class="btn-group"> <div class="btn btn-info">消息</div> <div class="btn btn-info">状态</div> <div class="btn btn-info">通话</div> <a href="" class="btn btn-danger">动态</a> </div> <!-- 工具栏 --> <!-- 把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。 --> <!-- 按钮组的尺寸 btn-group-lg、btn-group-md(默认)、btn-group-sm、btn-group-xs --> <div class="btn-toolbar"> <div class="btn-group-xs"> <button class="btn btn-success">搜索</button> <button class="btn btn-success">评论</button> </div> <div class="btn-group-sm"> <button class="btn btn-info">登录</button> <button class="btn btn-info">发表</button> <button class="btn btn-info">查看</button> </div> <div class="btn-group-mg"> <button class="btn btn-danger">退出</button> </div> </div> <!-- 两端对齐的按钮组 只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。 --> <div class="container"> <div class="row"> <div class="col-xs-12"> <!-- <div class="btn-toolbar"> --> <div class="btn-group btn-group-justified"> <div class="btn btn-info">消息</div> <div class="btn btn-info">联系人</div> <div class="btn btn-info">动态</div> </div> <!-- </div> --> </div> </div> </div> <!-- 垂直排列的按钮组 加入一个 btn-group-vertical 类 --> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="btn-group btn-group-vertical"> <div class="btn btn-danger">消息</div> <div class="btn btn-danger">联系人</div> <div class="btn btn-danger">动态</div> </div> </div> </div> </div> <!-- 具有下拉菜单的按钮组 --> <div class="btn-group"> <div class="btn btn-danger">消息</div> <div class="btn btn-danger">联系人</div> <div class="btn-group "> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 一级菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href=""> 菜单1</a></li> <li> <a href=""> 菜单2</a></li> <li> <a href=""> 菜单3</a></li> </ul> </div> </div>
表单
<!-- form 基本样式 将每一个控件放到一个form-group 类里 控件添加一个类 form-control 按钮直接写就行 不用在按钮外面套一个有form-group类的元素 --> <form action=""> <div class="container"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="nc">昵称:</label> <input type="text" class="form-control" id="nc"> </div> <div class="form-group"> <label for="mm">密码:</label> <input type="password" class="form-control" id="mm"> </div> <button type="submit" class="btn btn-success">登录</button> </div> </div> </div> </form><br> <!-- 内联式(行内表单) 为form元素添加 .form-inline类 可以使其内容左对齐并且表现为 行内块元素当屏幕大于768px时，所有表单控件都会显示在一行，当屏幕宽度小于768px时， 变成堆叠式的显示方法 --> <form action="" class="form-inline"> <!-- <div class="container"> <div class="row"> <div class="col-xs-6"> --> <div class="form-group"> <label for="nc">昵称:</label> <input type="text" class="form-control" id="nc"> </div> <div class="form-group"> <label for="mm">密码:</label> <input type="password" class="form-control" id="mm"> </div> <button type="submit" class="btn btn-success">登录</button> <!-- </div> </div> </div> --> </form><br> <!-- 水平排列的表单 在form里添加 form-horizontal类 添加form-horizontal类名时 .form-group 就变成 栅格系统中的行（row）因此就无需再添加row了直接在 form-group 中添加列 。 在label中要添加 control-label --> <form action="" class="form-horizontal"> <div class="container"> <div class="form-group"> <label for="" class="col-xs-2 control-label">明天吃什么：</label> <div class="col-xs-5"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label">今晚几点睡：</label> <div class="col-xs-5"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label">明早几点起：</label> <div class="col-xs-5"> <input type="text" class="form-control"> </div> </div> </div> </form><br>
表单支持的控件
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="col-xs-4 control-label">账号：</label> <div class="col-xs-6"> <input type="text" class="form-control"> </div> </div> <!-- 文本域 --> <div class="form-group"> <label for="" class="col-xs-4 control-label">介绍：</label> <div class="col-xs-6"> <textarea id="" cols="30" rows="5" class="form-control"></textarea> </div> </div> <!-- 多选按钮 --> <div class="form-group"> <label for="" class="col-xs-4 control-label">爱好：</label> <div class="col-xs-6"> <!-- 默认情况下是堆叠的可以通过checkbox-inline 改成水平排列的方式 --> <!-- <div class="checkbox-inline"> --> <label class="checkbox-inline" > <input type="checkbox" name="xxx" value="qdm" >敲代码 </label> <!-- </div> --> <!-- <div class="checkbox-inline"> --> <label class="checkbox-inline"> <input type="checkbox" name="xxx" value="eat">吃饭 </label> <!-- </div> --> </div> </div> <!-- 单选按钮 --> <div class="form-group"> <label for="" class="col-xs-4 control-label">性别：</label> <div class="col-xs-6"> <label for="" class="radio-inline"><input type="radio" name="gender">男</label> <label for="" class="radio-inline"><input type="radio" name="gender">女</label> </div> </div> <div class="form-group"> <label for="" class="col-xs-4 control-label">城市：</label> <div class="col-xs-6"> <!-- 下拉列表 --> <!-- 添加 multiple 可以多选 --> <select id="" class="form-control"> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> </select> </div> </div> <div class="col-xs-4 col-xs-offset-4"> <button type="submit" class="btn btn-info">提交</button> </div> </form>
模态框
<!-- data-modal="modal" 表示按钮时用来切换模态框的显示和隐藏的 --> <!-- data-target="模态框ID" 表示按钮切换的目标模态框是谁 --> <button class="btn btn-danger" data-toggle="modal" data-target="#mymodal">模态框按钮</button> <!-- fade 不是必须的 只是用来模态框显示时添加的一些动态效果 过渡效果 --> <div class="modal fade" id="mymodal"> <!-- modal-sm 设置模态框的大小 默认md 没有xs --> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <!-- data-dismiss="modal" 表示该按钮具有关闭模态框的功能 --> <button class="close" data-dismiss="modal"><span>×</span></button> <h3>窝窝头</h3> </div> <div class="modal-body"> <h4>窝窝头~</h4> <h4>一块钱四个,</h4> <h4>嘿嘿！！</h4> </div> <div class="modal-footer"> <button class="btn btn-danger">买</button> <button class="btn btn-info" data-dismiss="modal">不买</button> </div> </div> </div> </div>
导航栏
<!-- 所有导航组件都要依赖 .nav这个基类 .nav-tabs要依赖.nav这个类 --> <!-- 胶囊式导航条 使用 .nav-pills这个类 --> <!-- 垂直排列使用 .nav-stacked --> <!-- 两端对齐 .nav-justified --> <div class="container"> <div class="row"> <div class="col-xs-6 col-xs-offset-3"> <ul class="nav nav-pills nav-justified"> <li role="presentation" class="active"><a href="">幸运者</a></li> <li role="presentation"><a href="">悲伤者</a></li> <li role="presentation"><a href="">失败者</a></li> </ul> </div> </div> </div>
轮播图
<div class="container"> <div class="row"> <div class="col-xs-6"> <!-- carousel 旋转木马的意思必须的类 slide 滑动的意思 data-interval 用来控制轮播的速度 默认5秒--> <div class="carousel slide" data-ride="carousel" id="mycarousel"data-interval="3000"> <!-- 指示符号 --> <!-- carousel-indicators 选择指标的意思 控制选择的指示符号 --> <ul class="carousel-indicators"> <!-- id指示这个li指示符号指向那个轮播图 data-slide-to 指示第几个图片 active 表示激活只有先激活第一个后面的才能继续 --> <li data-target="#mycarousel" data-slide-to="0"class="active" ></li> <li data-target="#mycarousel" data-slide-to="1" ></li> <li data-target="#mycarousel" data-slide-to="2" ></li> <li data-target="#mycarousel" data-slide-to="3" ></li> <li data-target="#mycarousel" data-slide-to="4" ></li> <li data-target="#mycarousel" data-slide-to="5" ></li> </ul> <!-- 轮播图片 --> <!-- 轮播图标 首先加一个类为 carousel-inner --> <div class="carousel-inner"> <!-- 把没个图片都包裹在 item类里 首先第一张图片要激活 active --> <div class="item active"> <img src="../images/1.jpg" alt=""> <!-- carousel-caption 表示轮播图片上显示的字 --> <div class="carousel-caption">轮播图片1</div> </div> <div class="item"> <img src="../images/2.jpg" alt=""> <div class="carousel-caption">轮播图片2</div> </div> <div class="item"> <img src="../images/3.jpg" alt=""> <div class="carousel-caption">轮播图片3</div> </div> <div class="item"> <img src="../images/4.jpg" alt=""> <div class="carousel-caption">轮播图片4</div> </div> <div class="item"> <img src="../images/5.jpg" alt=""> <div class="carousel-caption">轮播图片5</div> </div> <div class="item"> <img src="../images/6.jpg" alt=""> <div class="carousel-caption">轮播图片6</div> </div> <!-- 翻页按钮 --> <!-- 用a标签 href指向这个轮播图的id 左边加left类 carousel-control 表示控制轮播图 data-slide="prev" 表示滑动上一个 --> <a href="#mycarousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#mycarousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div>
标签页
<div class="container"> <div class="row"> <div class="col-xs-6"> <!-- 标签栏 --> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#home" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#news" data-toggle="tab">News</a></li> <li role="presentation"><a href="#about" data-toggle="tab">About</a></li> </ul> <!-- 标签要切换的内容 --> <div class="tab-content"> <div class="tab-pane fade active" id="home"> <h1>Home Page</h1> </div> <div class="tab-pane fade" id="news"> <h1>News Page</h1> </div> <div class="tab-pane fade" id="about"> <h1>About Page</h1> </div> </div> </div> </div> </div>
滚动监听
滚动监听需要和导航条配合使用 所有要先建一个导航条
<body data-spy="scroll" data-target="#navbar_collapse" data-offset="60"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" class="navbar-brand">旅游宝地</a> </div> <div class="collapse navbar-collapse navbar-right" id="navbar_collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#box1">张家界</a></li> <li><a href="#box2">成都</a></li> <li><a href="#box3">北京</a></li> <li><a href="#box4">郑州</a></li> <li><a href="#box5">驻马店</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="box bg-primary" id="box1"> <h2>张家界</h2> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="box bg-success" id="box2"> <h2>成都</h2> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="box bg-danger" id="box3"> <h2>北京</h2> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="box bg-info" id="box4"> <h2>郑州</h2> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="box bg-warning" id="box5"> <h2>驻马店</h2> </div> </div> </div> </div>