全局CSS样式

基础模板

<!DOCTYPE html>
<html lang="en">
<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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shiv 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!-- 条件注释的作用：条件满足时，执行注释中的HTML代码 条件不满足时，就会当做注释--><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--><!-- 自己写的CSS文件 --><link rel="stylesheet" type="text/css" href="">
</head>
<body><!-- 必须引入，且位置必须这样--><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://cdn.jselivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><!-- 自己写的js文件--><script src=""></script>
</body>
</html>

模板中移动端所用到的属性介绍
width:视口的宽度 width=device-width => 视口的宽度随着设备的宽度进行响应式变化。
initial-scale：初始化缩放
minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
maximum-scale:最大缩放

栅格参数

默认一行12列

栅格系统

布局容器 .container .container-fluid

row必须包含在布局容器里面不然会没有alignment和padding

row的直接子元素只能是col

为col设置padding 从而创建列与列之间的间隔(gutter) ; 为.row设置负margin-left 抵消.container的padding，也就间接为row包含的col抵消掉了padding

列偏移 col-xs-offset-8

列嵌套

<div class='container'><div class='row'><div class='col-sm-6'><div class='row'><div class='col-sm-4'>4</div><div class='col-sm-4'>4</div><div class='col-sm-4'>4</div></div></div></div>
</div>

列排序 push向右推 pull向左拉

例

<div class='row'><div class= 'col-md-2 row-md-push-3'>  向右推三列</div>
</div>

排版

标题

HTML 中的所有标题标签，h1 到 h6均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

例如

<span class='h1'>具有h1标签样式的文本</span>

在标题内还可以包含标签或赋予 .small 类的元素，可以用来标记副标题

例如

<h2>今天吃什么？<small>不知道，心情不好，没胃口</small></h2>
<h2>今天吃什么？<span class='small'>不知道，心情不好，没胃口</span></h2>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 body 元素和所有段落元素。另外，p(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

.lead 突出显示

<p class='lead'>今天吃什么？<small>不知道，心情不好，没胃口</small></p>

内联文本元素

标记文本 <;mark>高亮</mark>

删除文本和无用文本 <del>被删除的文本</del>和<s> 无用文本</s>的格式没有区别只有语义上的区别

插入文本和下划线文本 <ins>被删除的文本</ins>和<u> 无用文本</u>的格式没有区别只有语义上的区别

小号文本对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。也可以为行内元素赋予 .small 类以代替任何元素。

着重(加粗)和斜体 <strong>rendered as bold text<strong> <em>rendered as bold text<em>

对齐方式

 <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">转成小写 apple banana car dog</p><p class="text-uppercase">转成大写 apple banana car dog</p><p class="text-capitalize">首字母大写 apple banana car dog</p>

缩略语 <attr titele=“隐藏的内容”>显示的内容<attr>

     <abbr title="一室一厅一书房、卫生间带大浴缸、厨房够大4个人做饭依旧宽敞、阳台有天文望远镜、有个衣帽间也不错、两个冰箱(厨房一个客厅一个)、扫地机器人、自动洗碗机、黏人的小猫咪、书房电脑桌足够长可升降">单人的理想居住环境什么样子？</abbr>

引用 blockquote

<blockquote><p>12341241</p>
</blockquote><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>//右对齐  cite表示倾斜 添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
<blockquote class='blockquote-reverse'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表无样式列表添加类 .list-unstyled 内联列表 .list-inline

 <ul class="list-unstyled"><li>111</li><li>111</li><li>111</li><li>111</li></ul><ul class="list-inline"><li>111</li><li>111</li><li>111</li><li>111</li></ul>

<dl><dt>上午</dt><dd>语文</dd><dd>数学</dd>
</dl>
//.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<dl class='dl-horizontal'><dt>下午</dt><dd>英语</dd> <dd>体育</dd>
</dl>

表格

类table-striped table-bordered table-hover table-condensed acitve info success danger warning

通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
通过添加 .table-hover 类可以让中的每一行对鼠标悬停状态作出响应。
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
通过这些状态类可以为行或单元格设置颜色。

  <table class="table table-striped table-bordered table-hover table-condensed"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr><tr><td class="info">景天</td><td>18</td><td>男</td></tr><tr class="success"><td>唐雪见</td><td>16</td><td>女</td></tr><tr class="danger"><td>徐长卿</td><td>20</td><td>男</td></tr><tr><td>紫萱</td><td class="warning">不详</td><td>女</td></tr></table>

响应式表格表格过长出现滚动条

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive"><table class="table">...</table>
</div>

表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

 <form><div class="form-group"><label for="userName">姓名</label><input type="text" class="form-control" id="userName" placeholder="UserName"></div><div class="form-group"><label for="userAddress">地址</label><input type="text" class="form-control" id="userAddress" placeholder="Address"><p class="help-block">Example block-level help text here.</p></div></form>

内联表单

    <!--单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。--><!--为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。--><form class="form-inline"><div class="form-group"><label for="userName">姓名</label><input type="text" class="form-control" id="userName" placeholder="UserName"></div><div class="form-group"><label for="userAddress">地址</label><input type="text" class="form-control" id="userAddress" placeholder="Address"><!--<p class="help-block">Example block-level help text here.</p>--></div></form>

水平排列表单 form-horizontal

     <!--在label标签中添加control-label属性后,label标签就变成了可控制的标签,可以通过不同的属性值来控制当前控件的状态。--><!--对form表单标签添加.form-horizontal类，使每个form-group里的内容水平排列--><form class="form-horizontal"><div class="form-group"><label for="userName2" class="col-md-3 control-label">姓名</label><div class="col-md-9"><input type="text" class="form-control" id="userName2" placeholder="UserName2"></div></div><div class="form-group"><label for="userAddress2" class="col-md-3 control-label">地址</label><div class="col-md-9"><input type="text" class="form-control " id="userAddress2" placeholder="Address2"></div></div></form>

被支持的控件

<input type="text" class="form-control" placeholder="Text input">

文本域 textarea

<input type='textarea' rows='10'>

多选和单选框 checkbox radio

只有框而没有框后的内容在input标签内写上 aria-label
使多选框/单选框及其框后的内容不可选在div内加上disabled类和input加disabled属性
同一行显示多个多选框或单选框将同一行显示的内容不放在div里并在lable标签内加上checkbox-inline类或radio-inline类
PS: 单选框需要有共同的name属性才能实现单选

<div class="checkbox"><label><input type="checkbox">apple</label></div><div class="checkbox disabled"><label><input type="checkbox" disabled>banana 不可选</label></div><div class="checkbox"><label><input type="checkbox" aria-label="..."></label></div><div class="radio"><label><input type="radio" id="userName3">用户3</label></div><div class="radio"><label><input type="radio" aria-label="..."></label></div><div class="radio"><label><input type="radio" id="userName4">用户4</label></div><div class="radio disabled"><label><input type="radio" id="userName5" disabled>用户5 不可选</label></div>

下拉列表 select

对于标记了 multiple 属性的控件来说，默认显示多选项。

 <select class='form-control' multiple><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option>   </select>

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为

元素添加 .form-control-static 类即可

<form class="form-horizontal"><div class="form-group"><label class="col-md-3 control-label">Email</label><div class="col-md-9"><p class="form-control-static">email@example.com</p></div></div><div class="form-group"><label class="col-md-3 control-label">Password</label><div class="col-md-9"><input type="password" class="form-control" placeholder="password"></div></div></form>

焦点状态

将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性

禁用状态 disabled

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。
被禁用的 fieldset
为设置 disabled 属性,可以禁用中包含的所有控件。

<form><fieldset disabled><div class="form-group"><label class="sr-only">Email</label><p class="form-control-static">email@example.com</p></div><div class="form-group"><!-- .sr-only sr-only全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。给残障人士(弱视或盲人)使用的屏幕阅读器读取但是不会影响UI的视觉呈现--><label for="inputPassword2" class="sr-only">Password2</label><input type="password" class="form-control" id="inputPassword2" placeholder="Password"></div><button type="submit" class="btn btn-default">Confirm identity</button><button type="submit" class="btn btn-primary">Submit</button></fieldset>
</form>

只读状态 readonly

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

    <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

提示文本 .help-block

<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

校验样式 .has-success .has-warning .has-error

使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

控件尺寸

高度尺寸

默认md 还有lg和sm 没有xs

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

水平排列的表单组的尺寸

通过对div的.form-group添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸

按钮

可作为按钮使用的标签或元素

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

详见bootstrap的全局CSS样式文档

预定义样式

class=“btn btn-default”
除btn-default 还有btn-primary btn-info btn-success btn-warning btn-danger btn-link

尺寸

使用 .btn-lg、默认是btn-md、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

激活状态给button、a添加active类

禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果
为 <button> 元素添加 disabled 属性，使其表现出禁用状态 disabled=‘disabled’
为a标签添加disabled类 class=‘btn disabled’ 使其表现出禁用状态

图片

响应式图片

通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，使用 .center-block 类

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

情境文本颜色

text-muted 颜色浅
text-primary text-success text-info text-warning text-danger

情境背景颜色

bg-primary bg-success bg-info bg-warning bg-danger

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号

<span class="caret"></span>

快速浮动

添加 .pull-left 实现左浮动添加 .pull-right 实现右浮动

让内容块居中

添加类 .center-block

清除浮动

为父元素添加类 .clearfix

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏

图片替换(文字隐藏 )

.text-hide 用来将文字隐藏例如将h1标签的文本隐藏使h1能被搜索引擎抓取到但是不会显示出文字内容

<h1 class="text-hide">Custom heading</h1>

组件

Glyphicons 字体图标

详细使用的注意事项见文档

<!--Glyphicons 字体图标  先写glyphicon这个类名  再在类中加入该图标的名字 例如：-->
<span style="color: #9ACD32;font-size: 30px " class="glyphicon glyphicon-signal"></span>

下拉菜单

实例

去bootstrap的文档里直接复制粘贴实例，并进行相应修改即可

对齐 ul class=“dropdown-menu dropdown-menu-right”

标题 li class=“dropdown-header”

分割线 li role=“seperator” class=“divider”

禁用的菜单项 li class=“disabled”

按钮组：把一组按钮放在一行

//三个按钮在一行
<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>

按钮工具栏

<div class="btn-toolbar" role="toolbar"><div class="btn-group" role="group"><button class="btn btn-default">1</button><button class="btn btn-default">2</button><button class="btn btn-default">3</button><button class="btn btn-default">4</button></div><div class="btn-group" role="group"><button class="btn btn-default">5</button><button class="btn btn-default">6</button><button class="btn btn-default">7</button></div><div class="btn-group" role="group"><button class="btn btn-default">8</button></div></div>

尺寸
给 btn-group 加上 btn-group-lg 该组内的按钮都变成lg尺寸
lg、默认是md、sm、xs

嵌套

<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">1</button><button type="button" class="btn btn-default">2</button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Dropdown link</a></li><li><a href="#">Dropdown link</a></li></ul></div>
</div>

垂直排列 div class=“btn-group btn-group-vertical”

<div class="btn-group btn-group-vertical" role="group" aria-label="..."><button type="button" class="btn btn-default">1</button><button type="button" class="btn btn-default">2</button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">Dropdown<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Dropdown link</a></li><li><a href="#">Dropdown link</a></li></ul></div></div>

两端对齐排列的按钮组 class=“btn-group btn-group-justified”

关于 <a>元素
只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可
关于 <button> 元素
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group

<div class="btn-group btn-group-justified"><a href="#" class="btn btn-default">left</a><a href="#" class="btn btn-default">middle</a><a href="#" class="btn btn-default">right</a><div class="btn-group"><button class="btn btn-default">aaa</button></div><div class="btn-group"><button class="btn btn-default">bbb</button></di</div>

按钮式下拉菜单

向上弹出式

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打

<!--按钮式下拉菜单--><div class="btn-group"><button class="btn dropdown-toggle btn-success" type="button" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">Success<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another Action</a></li><li class="divider" role="separator"></li><li><a href="#">Separated link</a></li></ul></div><!--向上弹出式 分裂式菜单(按钮上显示的字与三角形之间有一条线)--><div class="btn-group dropup"><button type="button" class="btn btn-info btn-lg">Info分裂式按钮</button><button class="btn btn-default dropdown-toggle btn-info btn-lg" type="button" data-toggle="dropdown"aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another Action</a></li><li class="divider" role="separator"></li><li><a href="#">Separated link</a></li></ul></div>

导航 nav

标签页 .nav-tabs

<ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation"><a href="#">Messages</a></li>
/ul>

胶囊式标签页 .nav-pills

<ul class="nav nav-pills"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation" ><a href="#">Messages</a></li>
</ul>

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类

<ul class="nav nav-pills nav-stacked">

两端对齐的标签页 .nav-justified 已经弃用

禁用的链接 .disabled 实现链接为灰色且没有鼠标悬停效果

添加下拉菜单

<ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation" class="disabled"><a href="#">Profile</a></li><li role="presentation"><a href="#">Question</a></li><li role="presentation" class="dropdown" ><a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Messages <span class="caret"></span></a><ul class="dropdown-menu dropdown-menu-justified"><li><a href="#">111</a></li><li><a href="#">222</a></li></ul></li></ul>

导航条 .navbar

路径导航 .breadcrumb

<ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li role="active">Data<span class="badge">43</span></li></ol>

分页 .pagination

<nav aria-label="Page navigation"><ul class="pagination pagination-lg" ><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li class="active"><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">&raquo;</span></a></li></ul></nav>

禁用和激活状态

建议将 active 或 disabled 状态的链接（即 < a> 标签）替换为 < span> 标签，或者在向前/向后的箭头处省略< a> 标签，这样就可以让其保持需要的样式而不能被点击。

尺寸 pagination-lg 不写则默认是md

翻页 ul class=“pager”

 <nav aria-label="..."><!--默认居中--><ul class="pager"><li><a href="#">Previous</a></li><li><a href="#">Next</a></li></ul><!--可两端对齐--><ul class="pager"><!--.disabled 类也可用于翻页中的链接--><li class="previous disabled"><a href="#">Previous</a></li><li class="next"><a href="#">Next</a></li></ul></nav>

标签 class=“label label-default” success、info、warning、danger

    <h3>Example heading <span class="label label-danger">Danger</span></h3>

徽章 class=“badge”

给链接、导航等元素嵌套元素，可以很醒目的展示新的或未读的信息条目

巨幕 class=“jumbotron”

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

<div class="jumbotron"><div class="container"><h1>Hello World!</h1><p>...</p><p><a href="#" class="btn btn-primary btn-lg">Learn More</a></p></div></div>

如果在div class=“jumbotron” 外面再套一个div class=“container-fluid” 则有圆角

缩略图 .thumbnail

 <div class="row"><div class="col-xs-6 col-md-3"><div class="thumbnail"><img src="../day02/1.png" 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 class="col-xs-6 col-md-3"><div class="thumbnail"><img src="../day02/1.png" 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>

警告框 .alert 只有success、info、warning、danger

警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。

<div class="alert alert-info"><button class="close" type="button" role="button" ><span>&times;</span></button><strong>info!</strong>Better check yourself, you`re not <a href="#">Looking good</a></div>

可关闭的警告框 .alert-dismissible

data-dismiss=“alert” aria-label="Close"不要缺
对于链接要有 .alert-link类名使链接变粗并使颜色与警告框相近

<div class="alert alert-info alert-dismissible"><button class="close" type="button" role="button" data-dismiss="alert" aria-label="Close"><span>&times;</span></button><strong>info!</strong>Better check yourself, you`re not <a class="alert-link" href="#">Looking good</a></div>

进度条 .progress

<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span><span >60%</span></div></div>

在很低的百分比时，让文本提示能够清晰可见，为进度条设置 min-width 属性

<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width:0%;"><span class="sr-only">0% Complete</span><span >0%</span></div></div>

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果

progress-bar-success info warning danger 默认蓝色

条纹效果 .progress-bar-striped

条纹的动画效果 .progress-bar-striped .active

堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

媒体对像 .media

.media-right 需要在.media-body的后面写

对齐

图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐

媒体对象列表 (对评论或文章列表很有用)

在…下一行复制一遍ul

<ul class="media-list"><li 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></li>
</ul>

列表组

徽章、链接、按钮、disabled、情景类(success等)、active

    <!--在列表组中加入徽章badge，会自动放在右边--><!--用a标签代替li标签，可以组成一个全是链接的列表组，此时将ul替换成div即可，没必要给列表组中每一个元素都加一个父元素--><!--列表中的元素可以直接是按钮，那么父元素就必须是div而不能是ul 且不能使用标准的.btn类--><!---列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组--><ul class="list-group" style="width: 300px;margin-left: 20px"><li class="list-group-item"><span class="badge">2</span>语文</li><li class="list-group-item">数学</li><li class="list-group-item">英语</li></ul><hr><div class="list-group" style="width: 300px;margin-left: 20px"><a class="list-group-item" href="#"><span class="badge">2</span>语文</a><a class="list-group-item disabled" href="#">数学</a><a class="list-group-item active" href="#">英语</a><button class="list-group-item list-group-item-danger">报名</button></div>

面板 .panel

带标题、注脚的面板

<div class="panel panel-default"><div class="panel-heading">Panel without title</div><div class="panel-body">panel-content</div></div><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">Panel-title 标题</h3></div><div class="panel-body">panel content</div><div class="panel-footer">Panel-footer注脚</div></div>

带表格的面板

<div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading">Panel heading</div><div class="panel-body"><p>...</p></div><!-- Table --><table class="table">...</table>
</div>

2021-10-4Bootstrap相关推荐

电动力学每日一题 2021/10/23 载流板产生的电磁场
电动力学每日一题 2021/10/23 载流板产生的电磁场载流板的辐射载流板的辐射先验证电荷守恒: ∂ρ∂t=−∇⋅J=−∂∂zJz=0\frac{\partial \rho}{\partial ...
电动力学每日一题 2021/10/15 Fourier变换法计算均匀电流密度产生的磁场
电动力学每日一题 2021/10/15 Fourier变换法计算均匀电流密度产生的磁场无限长均匀电流无限长圆柱面均匀电流密度无限长均匀电流假设z轴上有一根非常细的电线,携带均匀电流I0I_0I ...
电动力学每日一题 2021/10/14
电动力学每日一题 2021/10/14 (a) Define r∣∣=xx^+yy^\textbf r_{||}=x\hat x+y\hat yr∣∣=xx^+yy^, r∣∣=x2+y2r_{| ...
电动力学每日一题 2021/10/13 用Fourier变换法计算静止电荷产生的电场
电动力学每日一题 2021/10/13 用Fourier变换法计算静止电荷产生的电场静止点电荷具有均匀线密度的静止电荷产生的电场具有均匀面密度的静止电荷产生的电场用Fourier变换法计算电场 ...
电动力学每日一题 2021/10/12
电动力学每日一题 2021/10/12 (a) To make the EM field trapped inside a perfectly electric conducting cavity, ...
电动力学每日一题 2021/10/11
电动力学每日一题 2021/10/11 日复一日,必有精进! (a) Integrating the DDD-field over the surface of the sphere of radiu ...
电动力学每日一题 2021/10/10
电动力学每日一题 2021/10/10 上大学以前觉得自己大概数理化都能学得不错,后来大一有两门课让我认清了现实,一门是程序设计,另一门是模电.程序设计学C语言,我当时学得勤奋刻苦,每次上机课都会主动 ...
科恩第一章Friday, October 29, 2021 10:13 AM
文章目录 Chapeter 1 Part A Electromagnetic Waves and Photons **Wave-particle Duality** Chapeter 1 Friday ...
Day19-22 2021/10/13-16 JAVA贪吃蛇全注释版
Day19-22 2021/10/13-16 贪吃蛇帧:如果时间足够小就是动画键盘监听定时器 Timer package snale; import javax.swing.*; /*** @ ...
2021.10.25-10.31 AI行业周刊（第69期）：AI进化之路
本周<Opencv基础及AI项目实战>以及<Pytorch模型推理及多任务通用范式>两门课程已经完结. 两门课程中,针对所有完成作业的同学,都颁发了毕业证书. 并且对于完成比较 ...

2021-10-4Bootstrap