第1章 Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架,它是为实现快速开发Web应用程序而设计的一套前端工具包,支持响应式布局,并且在V3版本之后坚持移动设备优先。
1.1 Bootstrap下载
1.2 Bootstrap环境搭建
1.2.1 目录结构
bootstrap-3.3.7-dist ├── css // CSS文件 │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ └── bootstrap-theme.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
1.2.2 处理依赖
由于Bootstrap的某些组件依赖于jQuery,所以需下载对应版本的jQuery文件来保证Bootstrap相关组件运行正常。
第2章 Bootstrap全局样式
排版、按钮、表格、表单、图片等我们常用的HTML元素,Bootstrap中都提供了全局样式,我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式,从而使我们的页面更美观和谐。
2.1 格栅系统
2.1.1 什么是格栅系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
2.1.2 格栅系统特点
- “行(row)”必须包含在.container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 每一行(row)均分成12列(col-xx-**),每列必须放在row中。
- 只有列能作为行的直接子元素(列和行搭配着用)
- 每一个标签可以自定义占的列数(col-xx-**)。
- 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
2.1.3 格栅参数
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列 | ||
.container 最大宽度 | None(自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 |
【示例】:
<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
【效果】:
2.1.4 列偏移
.col-md-offset-* // 将列向右侧偏移*列,如.col-md-offset-4类将.col-md-4元素向右偏移4列的宽度
【示例】:
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div>
【效果】:
2.1.5 列排序
.col-md-push-* // 将列放到右侧 .col-md-pull-* // 将列放到左侧
【示例】:
<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>
【效果】:
更多:https://v3.bootcss.com/css/#grid
2.2 排版
2.2.1 标题相关
2.2.1.1 标题
<!--使用h标签--> <h1>一级标题36px</h1> <h2>二级标题30px</h2> <h3>三级标题24px</h3> <h4>四级标题18px</h4> <h5>五级标题14px</h5> <h6>六级标题12px</h6> 除了使用h标签,Bootstrap内置了相应的全局样式: <!--内联标签应用标题样式--> <span class="h1">一级标题36px</span> <span class="h2">二级标题30px</span> <span class="h3">三级标题24px</span> <span class="h4">四级标题18px</span> <span class="h5">五级标题14px</span> <span class="h6">六级标题12px</span>
2.2.1.2 副标题
在标题内可以包含 <small> 标签或赋予 .small 类的元素用来标记副标题(小号文本):
<h1>一级标题<small>小标题</small></h1> <h1>一级标题<span class="small">小标题</span></h1>
2.2.2 页面主体
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
2.2.2.1 中心内容
.lead类 // 让段落突出显示
2.2.2.2 内联文本元素
<mark> // 高亮文本 <del> / <s> // 删除文本,<span style="text-decoration: line-through;">文本中间有一条横线</span> <ins> / <u> // 插入文本,<u>文本下面有一条横线</u> <strong> // 着重,<strong>加粗文本</strong> <em> // 强调,<em>斜体</em>
Tips:可以使用 <b> 和 <i> 标签,<b> 用于高亮单词或短语,不带有任何着重的意味;而 <i> 标签主要用于发言、技术词汇等。
2.2.2.3 文本对齐
text-left // 左对齐 text-right // 右对齐 text-center // 居中对齐
【示例】:
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>
【效果】:
2.2.2.4 文本大小写
text-lowercase // 全部变小写 text-uppercase // 全部变大写 text-capitalize // 首字母大写
【示例】:
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
【效果】:
2.2.3 缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容。
2.2.3.1 基本缩略语
【示例】:
<abbr title="attribute">attr</abbr>
【效果】:
2.2.3.2 首字母缩略语
【示例】:缩略语后面的字会稍微小一点
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
【效果】:
2.2.4 地址
在每行结尾添加 <br> 可以保留需要的样式。
【示例】:
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">[email protected]</a> </address>
【效果】:
2.2.5 引用
2.2.5.1 默认样式的引用
【示例】:
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
【效果】:
2.2.5.2 带命名来源的引用
添加 <footer> 用于标明引用来源,来源的名称可以包裹进 <cite>标签中,通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
【示例】:
<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>
【效果】:
【示例】:
<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>
【效果】:
2.2.6 列表
2.2.6.1 内联列表
【示例】:
<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li> </ul>
【效果】:
参考:https://v3.bootcss.com/css/#type-lists
2.2.7 描述
【示例】:普通描述
<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>
【效果】:
【示例】:水平描述
<dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>
【效果】:
2.3 代码
<code> //内联代码 <kbd> // 用户输入 <pre> // 代码块 <var> // 变量 <samp> // 程序输出
2.3.1 内联代码
【示例】:
For example, <code><section></code> should be wrapped as inline.
【效果】:
2.3.2 用户输入
【示例】:
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
【效果】:
2.3.3 代码块
【示例】:
<pre><p>Sample text here...</p></pre>
【效果】:
2.3.4 变量
【示例】:
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
【效果】:
参考:https://v3.bootcss.com/css/#code
2.4 表格
Class | 描述 |
.table-striped | 条纹状表格 |
.table-bordered | 带边框的表格 |
.table-hover | 鼠标悬停变色的表格 |
.table-condensed | 紧缩型表格 |
.table-responsive | 响应式表格 |
2.4.1 条纹表格
【示例】:
<table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
【效果】:
2.4.2 带边框表格
【示例】:
<table class="table table-bordered"> ... </table>
【效果】:
2.4.3 鼠标悬停变色表格
【示例】:
<table class="table table-hover"> ... </table>
【效果】:
2.4.4 紧缩表格
【示例】:
<table class="table table-condensed"> ... </table>
【效果】:
2.4.5 响应式表格
【示例】:
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">2</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">3</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div>
【效果】:宽度变小后出现控制条
2.4.6 状态类
Class | 描述 |
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
【示例】:
<table class="table"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="active"> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="info"> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="warning"> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <th scope="row">6</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table>
【效果】:
参考:https://v3.bootcss.com/css/#tables
2.5 表单
单独的表单控件会被自动赋予一些全局样式,所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%,将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
2.5.1 内联表单
【示例】:
<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="[email protected]"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
【效果】:
Tips:注意事项:
1. 只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
2. 不要将表单组直接和输入框组混合使用,建议将输入框组嵌套到表单组中使用。
3. 一定要添加 label 标签。
2.5.2 水平表单
【示例】:
<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>
【效果】:
2.5.3 带图标的表单
【示例】:
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status"> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> <span id="inputWarning2Status" class="sr-only">(warning)</span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status"> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span> </div> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputGroupSuccess1">Input group with success</label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputGroupSuccess1Status" class="sr-only">(success)</span> </div>
【效果】:
参考:https://v3.bootcss.com/css/#forms
2.6 按钮
2.6.1 标签元素按钮
【示例】:
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
【效果】:
2.6.2 预定义样式
【示例】:
<!-- 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>
【效果】:
2.6.3 按钮尺寸
【示例】:
<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>
【效果】:
2.6.4 状态类
Class | 描述 |
active | 激活状态 |
disabled | 禁用状态 |
参考:https://v3.bootcss.com/css/#buttons
2.7 图片
2.7.1 响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
2.7.2 图片形状
img-rounded // 圆角矩形 img-circle // 圆形 img-thumbnail // 矩形
【示例】:
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
【效果】:
2.8 辅助类
2.8.1 文本颜色
【示例】:
<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>
【效果】:
2.8.2 背景颜色
【示例】:
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p>
【效果】:
2.8.3 关闭按钮
【示例】:
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
【效果】:
2.8.4 下拉三角
【示例】:
<span class="caret"></span>
【效果】:
2.8.5 快速浮动
通过添加一个类,可以将任意元素向左或向右浮动,!important 被用来明确 CSS 样式的优先级。
【示例】:
// Classes .pull-left { float: left !important; } .pull-right { float: right !important; } // Usage as mixins .element { .pull-left(); } .another-element { .pull-right(); }
2.8.6 内容块居中
【示例】:
// Class .center-block { display: block; margin-left: auto; margin-right: auto; } // Usage as a mixin .element { .center-block(); }
2.8.7 清除浮动
【示例】:
// Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage as a mixin .element { .clearfix(); }
2.8.8 显示与隐藏
【示例】:
// Classes .show { display: block !important; } .hidden { display: none !important; } .invisible { visibility: hidden; } // Usage as mixins .element { .show(); } .another-element { .hidden(); }
参考:https://v3.bootcss.com/css/#helper-classes
第3章 常用Bootstrap组件
3.1 字体图标
【示例】:
<button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>
【效果】:
参考:https://v3.bootcss.com/components/#glyphicons-glyphs
3.2 下拉菜单
【示例】:
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
【效果】:
Tips:使用上拉菜单必须要jQurey配合,否则不生效。
参考:https://v3.bootcss.com/components/#dropdowns
3.3 按钮组
【示例】:
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> <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-group" role="group" aria-label="Default button group"> <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-group btn-group-sm" role="group" aria-label="Small button group"> <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-group btn-group-xs" role="group" aria-label="Extra-small button group"> <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>
【效果】:
参考:https://v3.bootcss.com/components/#btn-groups
3.4 按钮式下拉菜单
【示例】:
<!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
【效果】:
参考:https://v3.bootcss.com/components/#btn-dropdowns
3.5 输入框组
【示例】:
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div>
【效果】:
参考:https://v3.bootcss.com/components/#input-groups
3.6 导航
【示例】:
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Help</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul>
【效果】:
参考:https://v3.bootcss.com/components/#nav
3.7 导航条
【示例】:
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
【效果】:
参考:https://v3.bootcss.com/components/#navbar
3.8 分页
【示例】:
<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>
【效果】:
【示例】:
<nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav>
【效果】:
参考:https://v3.bootcss.com/components/#pagination
3.9 标签
【示例】:
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
【效果】:
参考:https://v3.bootcss.com/components/#labels
3.10 徽章
【示例】:
<ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> </ul>
【效果】:
参考:https://v3.bootcss.com/components/#badges
3.11 巨幕
【示例】:
<div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>
【效果】:
参考:https://v3.bootcss.com/components/#jumbotron
3.12 页头
页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。
【示例】:
<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>
【效果】:
3.13 缩略图
【示例】:
<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>
【效果】:
参考:https://v3.bootcss.com/components/#thumbnails
3.14 警告框
【示例】:
<div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
【效果】:
参考:https://v3.bootcss.com/components/#alerts
3.15 进度条
【示例】:
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div>
【效果】:
参考:https://v3.bootcss.com/components/#progress
【示例】:模拟滚动的进度条
3.16 其他
参考:https://v3.bootcss.com/components/#media
第4章 响应式开发
4.1 响应式开发原因
随着移动设备的流行,网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发。
4.2 响应式作用
利用媒体查询,让同一个网站兼容不同的终端(PC端、移动端)呈现不同的页面布局。
4.3 涉及的技术
4.3.1 CSS3@media查询
用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
4.3.1.1 常见属性
- device-width, device-height:屏幕宽、高
- width,height:渲染窗口宽、高
- orientation:设备方向
- resolution:设备分辨率
4.3.1.2 语法
@media mediatype and|not|only (media feature) { CSS-Code; }
不同的媒体使用不同的stylesheet:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
4.3.2 viewport
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
4.3.2.1 设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
- width:控制 viewport 的大小,可以指定的一个值,如600或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
4.3.3 Bootstrap的栅格系统
- container
- row
- column
Tips:使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
第5章 JavaScript插件
5.1 模态框
5.1.1 模态框的HTML代码放置的位置
务必将模态框的HTML代码放在文档的最高层级内(也就是说尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。
5.1.2 HTML代码
<!-- 触发模态框的按钮 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- 模态框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <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" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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> </div> </div>
5.1.2.1 注意事项
- 通过为模态框设置.bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
- 通过.fade类来控制模态框弹出时的动画效果(淡入淡出效果)。
- 通过在.modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。
5.1.3 调用方式
5.1.3.1 通过data属性
通过在一个触发弹出模态框的元素(例如:按钮)上添加 data-toggle="modal"属性,然后设置 data-target="#foo"属性或 href="#foo"属性用来指向被控制的模态框。
<button type="button" data-toggle="modal" data-target="#myModal">显示模态框</button>
5.1.3.2 通过JS代码调用
$('#myModal').modal("show"); // 显示 $('#myModal').modal("hide") // 隐藏
5.1.4 常用参数
名称 | 可选值 | 默认值 | 描述 |
backdrop | true/false/'static' | true | false表示有没有遮罩层,'static'表示点击遮罩层不关闭模态框 |
keyboard | true/false | true | 键盘上的 esc 键被按下时关闭模态框。 |
show | true/false | true | 模态框初始化之后就立即显示出来。 |
5.1.4.1 方法
$('#myModal').modal({ keyboard: false })
5.2 轮播图
5.2.1 HTML代码
<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="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </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> 可以在为图片添加介绍信息: <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
5.2.1.1 方法
设置切换间隔为2秒,默认是5秒:
$('.carousel').carousel({ interval: 2000 })
5.3 FontAwesome字体
详细用法参见Font Awesome
5.4 SweetAlert系列
详细用法参见:
5.4.1 基本使用
swal("标题","内容","success);
使用SweetAlert在Ajax提交成功(done)或失败(error)时分别提示不用的内容。
【示例】:更新之前
function deleteRecord(recordID) { swal({ title: "确定要删除这个产品吗?", text: "删除后可就无法恢复了。", type: "warning", showCancelButton: true, closeOnConfirm: false, confirmButtonText: "是的,我要删除!", confirmButtonColor: "#ec6c62", cancelButtonText: "容我三思" }, function (isConfirm) { if (!isConfirm) return; $.ajax({ type: "post", url: "/delete/", data: {"id": recordID}, success: function (data) { var dataObj = $.parseJSON(data); if (dataObj.status === 0) { //后端删除成功 swal("删除成功", dataObj.info, "success"); $("#p-" + recordID).remove() //删除页面中那一行数据 } else { swal("出错啦。。。", dataObj.msg, "error"); //后端删除失败 } }, error: function () { // ajax请求失败 swal("啊哦。。。", "服务器走丢了。。。", "error"); } }) }); }
【示例】:更新之后
swal({ title: "这里写标题", text: "这里放内容", icon: "warning", // 这里放图标的类型(success,warning,info,error) buttons: { cancel: { text: "容我三思", visible: true, value: false }, confirm: { text: "我就是要删除" } } }).then(function (isConfirm) { if (isConfirm){ swal("你死定了", {button: "确认"}); }
5.5 Toastr通知
详细用法参见:Toastr
【示例】
toastr["success"]("你已经成功被绿!")
5.6 jQueryLazyload懒加载
【示例】
<!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"> <title>懒加载示例</title> </head> <body> <div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> ... <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="jquery.lazyload.min.js"></script> <script> $("img.lazy").lazyload({ effect: "fadeIn", event: "click" }) </script> </body> </html>
5.7 模板
管理后台模板Metronic
第6章 参考资料
