Bootstrap简书(总结)
作者:互联网
Bootstrap简书(总结)
文章目录
- Bootstrap简书(总结)
总结:
- Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。
- Bootstrap 自带了大量可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
- jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。
- 还有很多网站实例可以直接使用。
一、 bootstrap
简介
Bootstrap
,来自Twitter
(全国最大的微博),是目前最受欢迎的前端框架。bootstrap
下载及演示 http://v3.bootcss.com- 什么是
Bootstrap
?Bootstrap
是基于HTML
、CSS
、JAVASCRIPT
的开源框架,它简洁、直观、强悍、灵活,使得Web
开发更加快捷,- 用于开发响应式布局、移动设备优先的
WEB
项目。
- 为什么使用
Bootstrap
?- 跨设备
- 跨浏览器(
chrome
,IE9
以上,Firefox
,Safari
,Opera
…) - 响应式布局
- 具有实用性强的组件
- 内置
jquery
插件
Bootstrap
的结构?- 主要分为三大核心模块:
css
、js
、font
- 主要分为三大核心模块:
1.1 下载
Bootstrap (当前版本 v3.4.1)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容,看看哪种方式适合你的需求吧。
- BootstrapCDN
StackPath 的小伙伴为 Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootstrapCDN 提供的链接即可。
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
-
通过 Bower 进行安装
还可以通过 Bower 安装并管理 Bootstrap 的 Less、CSS、JavaScript 和字体文件。
bower install bootstrap
-
通过 npm 进行安装
你还可以利用 npm 工具来安装 Bootstrap:
npm install bootstrap@3
require('bootstrap')
代码的作用是加载 Bootstrap 的所有 jQuery 插件到 jQuery 对象上。其中,bootstrap
模块自身并不导出任何内容。你可以通过加载安装包顶级目录下的 /js/*.js
文件的方式手动加载单个的 Bootstrap 插件。
Bootstrap 的 package.json
文件包含了一些额外的元数据信息:
less
- 该目录下包含 Bootstrap 的Less 源码文件
style
- 该目录下包含 Bootstrap 的(按默认设置)预编译且未压缩的 CSS 文件
-
通过 Composer 进行安装
通过 Composer (中文官网:Composer 中文网)也可以安装并管理 Bootstrap 的 Less、CSS、JavaScript 和 fonts 文件:
composer require twbs/bootstrap
-
编译 Less/Sass 源码时需要使用 Autoprefixer 工具
Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。如果你是从 Less/Sass 源码编译 Bootstrap 的,并且没有使用 Bootstrap 自带的 Gruntfile 文件,那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap 文件或者使用的是我们提供的 Gruntfile 文件,那就无需操心了,因为我们提供的 Gruntfile 中已经集成了 Autoprefixer。
1.2 包含的内容
Bootstrap 提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。
Bootstrap 插件全部依赖 jQuery
请注意,**Bootstrap 的所有 JavaScript 插件都依赖 jQuery,**因此 jQuery 必须在 Bootstrap 之前引入,就像在基本模版中所展示的一样。在 bower.json
文件中 列出了 Bootstrap 所支持的 jQuery 版本。
预编译版
下载压缩包之后,将其解压缩到任意目录即可看到以下(压缩版的)目录结构:
Copy
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
上面展示的就是 Bootstrap 的基本文件结构:预编译文件可以直接使用到任何 web 项目中。我们提供了编译好的 CSS 和 JS (bootstrap.*
) 文件,还有经过压缩的 CSS 和 JS (bootstrap.min.*
) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map
) ,可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体,在附带的 Bootstrap 主题中使用到了这些图标。
Bootstrap 源码
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件,并且还有 LESS、JavaScript 和文档的源码。具体来说,主要文件组织结构如下:
Copy
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/
、js/
和 fonts/
目录分别包含了 CSS、JS 和字体图标的源码。dist/
目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/
包含了所有文档的源码文件,examples/
目录是 Bootstrap 官方提供的实例工程。除了这些,其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。
二、bootstrap
排版样式
标题
- 从
h1
到h6
<h1>Bootstrap 排版</h1> //36px
<h2>Bootstrap 排版</h2> //30px
<h3>Bootstrap 排版</h3> //24px
<h4>Bootstrap 排版</h4> //18px
<h5>Bootstrap 排版</h5> //14px
<h6>Bootstrap 排版</h6> //12px
<h2>bootstrap课程</h2>
<p class="lead">hello world</p>
内联文本元素(强调)
- 添加标记,
<mark>
元素或.mark
类
<p>Bootstrap<mark>排版</mark></p>
<!--各种加线条的文本-->
<del>Bootstrap 排版</del> //删除的文本
<s>Bootstrap 排版</s> //无用的文本
<ins>Bootstrap 排版</ins> //插入的文本
<u>Bootstrap 排版</u> //效果同上,下划线文本
<!--各种强调的文本-->
<small>Bootstrap 排版</small> //标准字号的 85%
<strong>Bootstrap 排版</strong> //加粗 700
<em>Bootstrap 排版</em> //倾斜
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>
<p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>
<p class="text-lowercase">BOOTSTROP</p>
<p class="text-uppercase">bootstrap</p>
<p class="text-capitalize">bootstrap</p> //单词首字母大写
缩略语
HTML
元素提供了用于缩写的标记,比如WWW
或HTTP
。Bootstrap
定义<abbr>
元素的样式为显示在文本底部的一条虚线边框- 当鼠标悬停在上面时会显示完整的文本(只要您为
<abbr>
title 属性添加了文本)。为了得到一个更小字体的文本, - 请添加
.initialism
到<abbr>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
地址
address
默认为display:block
;,需要使用标签<br>来为封闭的地址文本添加换行
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
引用
- 默认样式引用,增加了左边线,设定了字体大小和内外边距
<blockquote> Bootstrap 框架 </blockquote>
- 反向
<blockquote class="blockquote-reverse "> Bootstrap 框架 </blockquote>
- 多种引用样式
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="text-right">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
段落
- 通过.lead来突出强调内容(其作用就是增大文本子豪,加粗文本,而且对行高和margin也作相应处理)
- <small>小号字
- <b><strong>加粗
- <i><em>斜体
- 列表
- 有序列表、无序列表、自定义列表
.list-unstyled
去点列表.list-inline
内联列表.dl-horizontal
应用于<dl>
元素和<dt>
元素中,多余的会变成…显示
- 有序列表、无序列表、自定义列表
- 代码
.pre-scrollable
使<pre>
元素可滚动scrollable
- 内联代码
<code><section></code>
单行代码 - 用户输入
press <kbd>ctrl + ,</kbd>
会显示键盘的效果 - 标记变量
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
- 程序输出
<samp>This text is meant to be treated as sample output from a computer program.</samp>
- 代码块
<pre><article>Please input...</article></pre>
pre保存原本格式,包括空格和回车
三、表格、按钮、图片
表格
- 基本表格
<table class="table">
- 条纹表格
<table class="table table-striped">
- 边框表格
<table class="table table-bordered">
- 悬停表格
<table class="table table-hover">
- 精简表格
<table class="table table-condensed">
- 状态表格
active
、success
、info
、warning
、danger
- 隐藏某一行
<tr class="sr-only">
- 响应式表格
- 表格父元素设置响应式,小于
768px
出现边框
<div class="table-responsive">
- 表格父元素设置响应式,小于
按钮
- 按钮标签
- 转化成普通按钮
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">
- 注意:为了跨浏览器展现,尽量使用
button
- 按钮大小
.btn-lg
这会让按钮看起来比较大。.btn-sm
这会让按钮看起来比较小。.btn-xs
这会让按钮看起来特别小。
- 预定义样式
.btn-default
默认/标准按钮.btn-primary
首选项样式.btn-success
成功样式.btn-info
一般信息样式.btn-warning
警告样式.btn-danger
危险样式.btn-link
链接样式
- 块级按钮
.btn-block
块级按钮(拉伸至父元素100%的宽度)
- 激活状态
<button class="btn active">Button</button>
- 禁用状态
<button class="btn active disabled">Button</button>
图片
.img-rounded
圆角 (IE8
不支持).img-circle
圆形 (IE8
不支持).img-thumbnail
缩略图功能.img-responsive
图片响应式 (将很好地扩展到父元素)
四、栅格系统、表单
栅格系统
- 响应式网格系统随着屏幕或视口(
viewport
)尺寸的增加,系统会自动分为最多12
列。 - 工作原理
- 行必须放置在
.container
(固定宽度)或者.container-fluid(100%宽度)
class
内,获得适当的对齐(alignment)
和内边距(padding)
- 内容放置在列中,唯有列可以是行的直接子元素
- 预定义的网格类,比如
.row
和.col-lg-4
,可用于快速创建网格布局 - 列通过内边距
(padding)
来创建列内容之间的间隙
- 行必须放置在
- 媒体查询
- 超小设备(手机,小于
768px
) - 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得
Bootstrap
是移动设备优先的吗?) - 小型设备(平板电脑,大于等于
768px
)@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
- 中型设备(台式电脑,大于等于
992px
)@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
- 大型设备(大台式电脑,大于等于
1200px
)@media (min-width: @screen-lg-min) { ... }
- 超小设备(手机,小于
- 栅格参数
- 超小屏幕 手机 (
<768px
) - 小屏幕 平板 (
≥768px
) - 中等屏幕 桌面显示器 (
≥992px
) - 大屏幕 大桌面显示器 (
≥1200px
) - 栅格系统行为
- 总是水平排列
- 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container
最大宽度None
(自动)750px
970px
1170px
- 类前缀
.col-xs-
.col-sm-
.col-md-
.col-lg-
- 列(
column
)数12
- 最大列(
column
)宽 自动~62px
~81px
~97px
- 间隙宽度
30px
(每列左右均有15px
)
- 超小屏幕 手机 (
- 四种屏幕分类全部激活==(这种一次性将四种情况都列出来,保证遇到对应的屏幕会自动显示想要的效果,bootstrap会自动检测屏幕大小)==
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
....
</div>
</div>
- 可以设置列偏移,让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8">1-8</div>
<div class="col-md-3 col-md-offset-1">10-12</div>
</div>
</div>
- 可以嵌套,嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="col-md-8">1-8</div>
<div class="col-md-4">9-12</div>
</div>
<div class="col-md-3"> 10-12 </div>
</div>
</div>
- 可以把两个列交换位置,
push
向右移动(推),pull
向左移动(拉)
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">8</div>
<div class="col-md-4 col-md-pull-8">4</div>
</div>
</div>
表单
- 垂直或基本表单
- 内联表单
- 让表单左对齐浮动,并表现为
inline-block
内联块结构<form class="form-inline">
注:当小于768px
,会恢复独占样式
- 让表单左对齐浮动,并表现为
- 水平表单
- 让表单内的元素保持水平排列
- 表单组合
- 前后增加片段
<div class="input-group">
<div class="input-group-addon">¥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
- 输入框、文本域
- 原生的
HTML5
的input
类型的支持 - 包括:
text
password
datetime
datetime-local
date
month
time
week
number
email
url
search
tel
color
<input type="text" class="form-control" placeholder="文本输入">
<textarea class="form-control" rows="3"></textarea>
- 复选框(
Checkbox
)和单选框(Radio
)
- 原生的
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> 选项 1
</label>
</div>
- 内联的复选框和单选框
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="radio-inline">
<input type="radio" id="optionsRadiosinline" value="option1"> 选项 1
</label>
- 选择框
multiple
多行显示
<select class="form-control" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
- 静态控件
.form-control-static
- 表单控件状态
- 输入框焦点
- 当输入框
input
接收到:focus
时,输入框的轮廓会被移除,同时应用box-shadow
。 - 禁用的输入框
input
- 如果您想要禁用一个输入框
input
,只需要简单地添加disabled
属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。 - 禁用的字段集
fieldset
- 对
<fieldset>
添加disabled
属性来禁用<fieldset>
内的所有控件。 - 校验状态
.has-warning
、.has-error
或.has-success
类到这些控件的父元素即可。
- 任何包含在此元素之内的
.control-label
、.form-control
和.help-block
元素都将接受这些校验状态的样式。
- 表单帮助文本
<form role="form">
<input class="form-control" type="text" placeholder="">
<span class="help-block">一个较长的帮助文本块,超过一行,需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>
- 控件尺寸
.input-lg
和col-lg-*
来设置表单的高度和宽度
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder="input-lg">
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder="col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder="col-lg-4">
</div>
</div>
五、辅助类、响应式工具、菜单、图标
辅助类
- 文本
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
- 背景
<p class="bg-primary">bootstrap课程</p>
<p class="bg-success">bootstrap课程</p>
<p class="bg-info">bootstrap课程</p>
<p class="bg-warning">bootstrap课程</p>
<p class="bg-danger">bootstrap课程</p>
- 关闭按钮
close
<button class="close">×</button>
- 下拉式菜单
caret
<span class="caret"></span>
- 浮动
pull-left
pull-right
<div class="pull-left">向左快速浮动</div>
<div class="pull-right">向右快速浮动</div>
- 清除浮动
clearfix
<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">向左快速浮动</div>
<div class="pull-right" style="background: #DA81F5;">向右快速浮动</div>
</div>
- 块级内容居中
center-block
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">
这是 center-block
</div>
</div>
- 显示、隐藏
show
hide
<div class="row" style="padding: 91px 100px 19px 50px;">
<div class="show" style="width:300px;background-color:#ccc;">
这是 show class
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
这是 hide class
</div>
</div>
- 屏幕阅读器和键盘导航
.sr-only
来把元素对所有设备隐藏,除了屏幕阅读器.sr-only-focusable
<div class="row" style="padding: 91px 100px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email 地址</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="pass">密码</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
响应式工具
visible-xs
visible-sm
visible-md
visible-lg
hidden-xs
hidden-sm
hidden-md
hidden-lg
- 以超小屏幕(
xs
)为例,可用的.visible-*-*
类是:visible-xs-block
、visible-xs-inline
和visible-xs-inline-block
visible-print-block
visible-print-inline
visible-print-inline-block
浏览器隐藏 打印机可见
hidden-print
浏览器可见 打印机隐藏visible-print
<div class="container" style="padding: 40px;">
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-xs">特别小型</span>
<span class="visible-xs">✔ 在特别小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-md">中型</span>
<span class="visible-md">✔ 在中型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-lg">大型</span>
<span class="visible-lg">✔ 在大型设备上可见</span>
</div>
</div>
</div>
- 字体图标
- 用法:
<span class="glyphicon glyphicon-search"></span>
- 用法:
- 下拉菜单
- 基本的下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">Html</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">html5+css3</a></li>
</ul>
</div>
- 对齐
dropdown-menu-right
<ul class="dropdown-menu">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
- 分隔线
<ul class="dropdown-menu">
...
<li class="divider"></li>
...
</ul>
- 禁用的菜单项
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
- 让菜单默认显示
<div class="dropdown open">
六、按钮、输入框组件
按钮组件
- 基本的按钮组
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
- 按钮工具栏
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button class="btn btn-default">更多</button>
</div>
</div>
- 按钮的大小
<div class="btn-group btn-group-lg">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
- 嵌套
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <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>
- 垂直的按钮组
<div class="btn-group-vertical">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <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>
- 两端对齐排列的按钮组
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">left</button>
</div>
<div class="btn-group">
<button class="btn btn-default">middle</button>
</div>
<div class="btn-group">
<button class="btn btn-default">right</button>
</div>
</div>
<div class="btn-group btn-group-justified">
<!--<div class="btn-group">--> 为了浏览器兼容问题使用btn-group包裹
<a href="" class="btn btn-default">left</a>
<!--</div>-->
<!--<div class="btn-group">-->
<a href="" class="btn btn-default">middle</a>
<!--</div>-->
<!--<div class="btn-group">-->
<a href="" class="btn btn-default">right</a>
<!--</div>-->
</div>
- 按钮式下拉菜单
- 单按钮下拉菜单
btn-default
btn-success
btn-primary
btn-info
btn-danger
btn-warning
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- 分裂式按钮下拉菜单
<div class="btn-group">
<button class="btn btn-default">Default</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- 按钮下拉菜单的大小
btn-lg
btn-sm
btn-xs
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- 向上弹出式菜单
dropup
<div class="btn-group dropup">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- 输入框
- 基本的输入框组
<form action="">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
</div>
</form>
- 输入框组的大小
input-group-lg
input-group-xs
input-group-sm
<form action="">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
</form>
- 复选框和单选框插件
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"/>
</span>
<input type="text" class="form-control"/>
</div>
</div>
</div>
</form>
- 按钮插件
input-group-btn
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default">Go</button>
</span>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
- 按钮式下拉菜单
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">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>
</ul>
</div>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
- 分裂式按钮下拉菜单
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default">dropdown</button>
<button class="btn btn-default 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>
</ul>
</div>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
七、导航、导航条、面包屑导航组件
导航(标签) nav
- 标签页
nav-tabs
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- 胶囊式标签页
nav-pills
<ul class="nav nav-pills">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- 垂直的胶囊式标签页
nav-stacked
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- 两端对齐的标签页
nav-justified
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- 禁用链接
disabled
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li class="disabled"><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- 带有下拉菜单的标签
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
- 带下拉菜单的胶囊式标签
<ul class="nav nav-pills">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
导航条 navbar
<nav>
标签中添加 class
.navbar
、.navbar-default
- 默认的导航栏
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="">poetries blog</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
</nav>
- 响应式的导航栏
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">教育</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
</div>
</nav>
- 导航栏中的表单
<form action="" class="navbar-form navbar-right">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search"/>
</div>
<button class="btn btn-default">Search</button>
</form>
- 导航栏中的按钮
navbar-btn
<button class="btn btn-default navbar-btn">Submit</button>
- 导航栏中的文本
navbar-text
<p class="navbar-text">Signed in as Thomas</p>
- 固定到顶部、底部
navbar-fixed-top
navbar-fixed-bottom
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="">教育</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
</nav>
- 静态的顶部
navbar-static-top
- 倒置的导航栏 带有黑色背景白色文本的倒置的导航栏
navbar-inverse
- 面包屑导航
<ul class="breadcrumb">
<li><a href="">首页</a></li>
<li><a href="">列表</a></li>
<li class="active">详情</li>
</ul>
八、分页、标签、徽章、巨幕、页头、缩略图、警告框组件
分页
- 默认的分页
<ul class="pagination">
<li><a href="">«</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">»</a></li>
</ul>
- 禁用和激活状态
<ul class="pagination">
<li class="disabled"><a href="">«</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">»</a></li>
</ul>
- 分页的尺寸
pagination-lg
pagination-sm
- 翻页(
Pager
)
<ul class="pager">
<li><a href="">previous</a></li>
<li><a href="">next</a></li>
</ul>
- 对齐的链接
<ul class="pager">
<li class="previous"><a href="">← previous</a></li>
<li class="next"><a href="">next →</a></li>
</ul>
- 可选的禁用状态
<ul class="pager">
<li class="previous disabled"><a href="">← previous</a></li>
<li class="next"><a href="">next →</a></li>
</ul>
标签
<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>
- 徽章
badge
<a href="">Messages <span class="badge">20</span></a>
<button class="btn btn-default">Messages <span class="badge">20</span></button>
- 巨幕
jumbotron
<div class="jumbotron">
<div class="container">
<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" href="">Learn more</a></p>
</div>
</div>
- 页头
page-header
<div class="page-header">
<h1>Example page header
<small>Subtext for header</small>
</h1>
</div>
缩略图
- 默认样式
<div class="col-md-3 col-sm-6">
<a class="thumbnail" href="">
![](images/kittens.jpg)
</a>
</div>
- 自定义内容
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
![](images/kittens.jpg)
<div class="caption"> <!--text-center-->
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">按钮</a>
<a href="#" class="btn btn-default" role="button">按钮 </a>
</p>
</div>
</div>
</div>
警告框
- 基本默认样式
<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>
- 可关闭的警告框
<button type="button" class="close" data-dismiss="alert">×</button>
- 警告中的链接
<div class="alert alert-success">
<a href="#" class="alert-link">成功!很好地完成了提交。</a>
</div>
九、进度条、媒体对象、列表组、面板、响应式插入组件
进度条
- 默认的进度条
<div class="progress">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
- 情景变化的进度条
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%;">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:45%;">45%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
</div>
- 条纹的进度条
progress-striped
<div class="progress progress-striped">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
- 动画的进度条
active
<div class="progress progress-striped active">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
- 堆叠的进度条
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
<div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
</div>
媒体对象
<div class="media">
<a href="" class="pull-left">![](images/kittens.jpg)</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
列表组
- 向列表组添加国徽
<ul class="list-group">
<li class="list-group-item"><a href="">免费域名注册 <span class="badge pull-right">20</span></a></li>
<li class="list-group-item"><a href="">免费 Window 空间托管</a></li>
<li class="list-group-item"><a href="">每年更新成本</a></li>
</ul>
- 向列表组添加链接
<div class="list-group">
<a href="" class="list-group-item active">免费域名注册</a>
<a href="" class="list-group-item">免费 Window 空间托管</a>
<a href="" class="list-group-item">每年更新成本</a>
</div>
- 向列表组添加自定义内容
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
面板
- 面板标题
<div class="panel-heading">标题</div>
- 面板脚注
<div class="panel-footer text-right">by zichen</div>
- 面板主题
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
- 带表格的面板
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<table class="table">
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
</div>
- 带列表组的面板
<div class="panel panel-danger">
<div class="panel-heading">标题</div>
<div class="panel-body">面板内容显示区域</div>
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
<div class="panel-footer text-right">by zichen</div>
</div>
响应式嵌入组件
- 根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定 内容的尺寸,能够在各种设备上缩放
这些规则可以直接用于<iframe>
、<embed>
、<video>
和<object>
元素。 16:9
响应式
<div class="embed-responsive embed-responsive-16by9">
<embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
</div>
4:3
响应式
<div class="embed-responsive embed-responsive-4by3">
<embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
well
- 基本的
well
<div class="well">您好,我在大的 Well 中!</div>
- 尺寸大小
well-lg
well-sm
<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>
十、弹出框、警告框、标签页和工具提示插件插件
弹出框
- 弹出框点击一个元素,弹出一个包含标题和内容的容器
//基本用法
<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件">
点击弹出/隐藏弹出框
</button>
JavaScript
初始化$('button').popover();
Popover
插件中的属性:data-animation
默认true
,在popover
上应用一个CSS
fade
动画。 如果设置false
,则不应用。data-html
默认false
,不允许提示内容格式为html
。如果设置 为true
,则可以设置html
格式的提示内容data-placement
默认值top
,还有bottom
、left
、right
和auto
。 如果auto
会自行调整合适的位置,如果是auto
left
则会尽量在左边显示,但左边不行就靠右边。data-selector
默认false
,可以选择绑定指定的选择器。data-original-title
默认空字符串,弹出框的标题。优先级比title
低title
默认字空符串,弹出框的标题。data-trigger
默认值click
,表示怎么触发popover
,其他值为:hover
、focus
、manual
。多个值用空格隔开,manual 手动不能和其他同时设置。data-delay
默认值0
,延迟触发popover(毫秒)
,如果传数字则, 表示show
/hide
的毫秒数,如果传对象,结构为: {show:500,hide:100}data-container
默认值false
,将popover
附加到特定的元素上。比 如组合按钮组提示,容器不够,可以附加body
上。container : 'body'
data-template
更改提示框的HTML
提示语的模版,默认值为:
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
data-content
默认值为空,弹出框的内容。data-viewport
设置外围容器的边际,具体代码看示例。
$('button').popover({
trigger:"click",
placement:"right",
viewport : {
selector : '#view'
}
});
Popover
插件中的方法:- 显示
$('button').popover('show');
- 隐藏
$('button').popover('hide');
- 反转显示和隐藏
$('button').popover('toggle');
- 隐藏并销毁
$('button').popover('destroy');
- 显示
Popover
插件中的事件:show.bs.popover
在调用show
方法时触发shown.bs.popover
在显示整个弹窗时时触发hide.bs.popover
在调用hide
方法时触发hidden.bs.popover
在完全关闭整个弹出时触发
$('button').on('show.bs.tab', function () {
alert('调用 show 方法时触发!');
});
警告框
- 警告框即为点击小时的信息框
//基本实例
<div class="alert alert-warning">
<button class="close" type="button" data-dismiss="alert">
<span>×</span>
</button>
<p>警告:您的浏览器不支持!</p>
</div>
- 添加淡入淡出效果
<div class="alert alert-warning fade in">
- 如果用
JavaScript
,可以代替data-dismiss="alert"
Alert
插件中的方法:
$('.close').on('click', function () {
$('#alert').alert('close');
})
-
Alert
插件中的事件:
close.bs.alert
当close
方法被调用后立即触发closed.bs.alert
当警告框被完全关闭后立即触发
$('#alert').on('close.bs.alert', function () {
alert('当 close 方法被触发时调用!');
});
标签页
- 标签页也就是通常所说的选项卡功能
//基本用法
<ul class="nav nav-tabs">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane active" id="html5">...</div>
<div class="tab-pane" id="bootstrap">...</div>
<div class="tab-pane" id="jquery">...</div>
<div class="tab-pane" id="extjs">...</div>
</div>
- 可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示
<div class="tab-pane fade in active" id="html5">
- 也可以换成胶囊式
<ul class="nav nav-pills">
data-target
使用data-target
绑定或不绑定效果都是一样的Tab
插件中的方法:
$('#nav a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
-
Tab
插件中的事件:
show.bs.tab
在调用tab
方法时触发shown.bs.tab
在显示整个标签时触发
$('#nav a').on('show.bs.tab', function () {
alert('调用 tab 时触发!');
});
工具提示
- 工具提示就是通过鼠标移动选定在特定的元素上时,显示相关的提示语
//基本实例
<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
JavaScript
初始化$('#section').tooltip();
data-animation
默认true
,在tooltip
上应用一个CSS fade
动画。 如果设置false
,则不应用。data-html
默认false
,不允许提示内容格式为html
。如果设置 为true
,则可以设置html
格式的提示内容。data-placement
默认值top
,还有bottom
、left
、right
和auto
。 如果auto
会自行调整合适的位置,如果是auto
left
则会尽量在左边显示,但左边不行就靠右边。data-selector
默认false
,可以选择绑定指定的选择器。rel="tooltip"
data-original-title
默认空字符串,提示语的内容。优先级比 title 低title
默认字空符串,提示语的内容。data-trigger
默认值hover
foucs
,表示怎么触发tooltip
,其 他值为:click
、manual
。多个值用空格隔开,manual
手动不能和其他同时设置。data-delay
默认值0
,延迟触发tooltip(毫秒)
,如果传数字则, 表示show
/hide
的毫秒数,如果传对象,结构为:{ show:500,hide:100 }
data-containe
r 默认值false
,将tooltip
附加到特定的元素上。比 如组合按钮组提示,容器不够,可以附加body
上。container : 'body'
data-template
更改提示框的HTML
提示语的模版,默认值为:
<div class='tooltip'>
<div class='tooltip-arrow'></div>
<div class='tooltip-inner'></div>
</div>
<a href="#" rel="tooltip"
data-toggle="tooltip"
title="超文本标识符"
data-animation="false"
data-html="true"
data-placement="auto"
data-selector="a[rel=tooltip]"
data-trigger="click"
data-delay="500"
data-template="<b>123</b>" >HTML5
</a>
$('#selector a').tooltip({
delay : {
show : 500,
hide : 100,
},
});
Tooltip
插件中的方法:- 显示
$('#section a').tooltip('show');
- 隐藏
$('#section a').tooltip('hide');
- 反转显示和隐藏
$('#section a').tooltip('toggle');
- 隐藏并销毁
$('#section a').tooltip('destroy');
- 显示
Tooltip
插件中的事件:show.bs.tooltip
在show
方法调用时立即触发shown.bs.tooltip
在提示框完全显示给用户之后触发hide.bs.tooltip
在hide
方法调用时立即触发hidden.bs.tooltip
在提示框完全隐藏之后触发
$('#select a').on('show.bs.tooltip', function () {
alert('调用 show 时触发!');
});
//data-selector
$("#selector").tooltip({
selector:"a[rel='tooltip']"
});
data-container
<div class="btn-group">
<button class="btn btn-default" title="超文本标记符">left</button>
<button class="btn btn-default" title="超文本标记符">middle</button>
<button class="btn btn-default" title="超文本标记符">right</button>
</div>
$("button").tooltip({
delay:{
show:500,
hide:100
},
container:"body"
});
十一、下拉菜单、滚动监听、按钮和折叠插件
下拉菜单插件
<div class="dropdown">
<button class="btn btn-primary" 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><a href="#">关于</a></li>
</ul>
</div>
- 如果按钮在容器外部,可以通过
data-target
进行绑定
<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown">
Dropdown
插件的方法:,但仍然需要data-*
$('#btn').dropdown();
$('#btn').dropdown('toggle');
Dropdown
插件的事件:show.bs.dropdown
在show
方法调用时立即触发。shown.bs.dropdown
在下拉菜单完全显示出来,并且等CSS
动画完成之后 触发。hide.bs.dropdown
在hide
方法调用时,但还未关闭隐藏时触发。hidden.bs.dropdown
在下拉菜单完全隐藏之后,并且等CSS
动画完成之后 触发。
$('#dropdown').on('show.bs.dropdown', function () {
alert('在调用 show 方法时立即触发!');
});
滚动监听插件
data-offset
默认值为10
,固定弄内容距滚动容器10
像素以内, 就高亮显示所对应的菜单data-spy
设置scroll
,将设置滚动容器监听data-target
设置#nav
,绑定指定监听的菜单scroll
插件的方法:
$("#scroll").scrollspy({
//offset: 0,
target: "#nav"
});
activate.bs.scrollspy
每当一个新条目被激活后都将由滚动监听插件触 发此事件。- 事件绑定在导航上
$('#nav').on('activate.bs.scrollspy', function () {
alert('新条目被激活后触发此事件!');
});
-
滚动监听还有一个更新容器
DOM
的方法
refresh
更新容器DOM
的方法
function removeSec(e) {
$(e).parents('.sec').remove();
$('#content').scrollspy('refresh');
}
按钮插件
- 单个切换
<button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>
- 注:在
Firefox
多次页面加载时,按钮可能保持表单的禁用或选择状态。解决方案是: 添加autocomplete="off"。
- 单选按钮
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="radio" name="sex" autocomplete="off" checked> 男
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="sex" autocomplete="off"> 女
</label>
</div>
- 复选按钮
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="checkbox" name="fa" autocomplete="off" checked> 音乐
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> 体育
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> 美术
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> 电脑
</label>
</div>
- 加载状态
<button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> 加载状态 </button>
$('#myButton').on('click', function () {
var btn = $(this).button('loading');
setTimeout(function () {
btn.button('reset');
}, 1000);
});
Button
插件中的button
方法中有三个参数:toggle
、reset
、string
(比如loading
、complete
)。- 可代替
data-toggle="button"
$('button').on('click', function () {
$(this).button('toggle');
});
折叠插件
- 基本实例
<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> Bootstrap </button>
<div class="collapse" id="content">
<div class="well">
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目 前,Bootstrap 最新版本为 3.0 。
</div>
</div>
Collapse
插件的方法:hide
、show
、toggle
$('button').on('click', function () {
$('#collapseOne').collapse('toggle');
});
-
Collapse
插件的事件:
show.bs.collapse
在show
方法调用时立即触发shown.bs.collapse
折叠区完全显示出来是触发hide.bs.collapse
在hide
方法调用时触发hidden.bs.collapse
该事件在折叠区域完全隐藏之后触发
十二、模态框、轮播插件
模态框插件
- 模态框的弹窗组件需要三层
div
容器元素,分别为modal
(模态声明层)、dialog
(窗口声明层)、content
(内容层) - 在内容层里面,还有三层,分别为
header
(头部)、body
(主体)、footer
(注脚) - 模态框去掉
show
,增加一个id
<div class="modal" id="myModal">
<!-- 点击触发模态框显示 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 点击弹窗 </button>
<!-- 弹窗的大小有三种,默认情况下是正常,还有 lg(大)和 sm(小) -->
<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
<!-- 可设置淡入淡出效果 -->
<div class="modal fade" id="myModal">
- 所有的插件,都是基于
JavaScript
/jQuery
的。 - 四个要素:用法、参数、方法和事件。
- 用法
- 可以通过
data
属性data-toggle
data-toggle="modal"
data-target="#myModal"
data-toggle
表示触发类型data-target
表示触发的节点- 如果不是使用
<button>
,而是<a>
,其中data-target
也可以使用href="#myModal"
取代 - 建议使用
data-target
。除了data-toggle
和data-target
两个声明 属性外,还有一些可以用选项
- 可以通过
- 参数
data-backdrop
布尔值或'static'
默认值true
,表示背景存在黑灰透明 遮罩,且单击空白背景可关闭弹窗;- 如果为
false
,表示背景不存在黑灰 透明遮罩,且点击空白背景不可关闭 弹窗; - 如果是字符串
'static'
,表示背景存 在黑灰透明遮罩,且点击空白不可关 闭弹窗。 data-keyboard
布尔值true
如果是true
,按esc
键会关闭窗口; 如果是false
,按esc
键会不会关闭。data-show
布尔值true
如果是true
,初始化时,默认显示; 如果是false
,初始化时,默认隐藏。remote
url
路径 空值 如果值不是以#
号开头,则表示一个url
地址,加载url
内容到modal-content
容器里,并只加载一 次。- 如果是
#
号,就是取代data-target
的方法。 - 在
JavaScript
直接设置 - 通过
jQuery
方式声明
$('#myModal').modal({
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html'
});
- 方法
toggle .modal('toggle')
; 触发时,反转切换弹窗状态show .modal('show')
; 触发时,显示弹窗hide .modal('hide')
; 触发时,关闭弹窗- 点击显示弹窗
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
$('#myModal').modal({
show : false,
});
事件
show.bs.modal
在show
方法调用时立即触发。shown.bs.modal
在模态框完全显示出来,并且等CSS
动画完成之后触 发。hide.bs.modal
在hide
方法调用时,但还未关闭隐藏时触发。hidden.bs.modal
在模态框完全隐藏之后,并且等CSS
动画完成之后触 发
$('#myModal').on('show.bs.modal', function () {
alert('在 show 方法调用时立即触发!');
});
$('#myModal').on('loaded.bs.modal', function () {
alert('远程数据加载完毕后触发!');
});
轮播图插件
-
data
属性解释:
data-slide
接受关键字prev
或next
,用来改变幻灯片相对于当前位置的位置;data-slide-to
来向轮播底部创建一个原始滑动索引,data-slide-to="2"
将把滑 动块移动到一个特定的索引,索引从 0 开始计数。data-ride="carousel"
属性用户标记轮播在页面加载时开始动画播放。data-interval
默认值5000
,幻灯片的等待时间(毫秒)。如果为false
,轮播将不会自动开始循环。data-pause
默认鼠标停留在幻灯片区域(hover
)即暂停轮播,鼠 标离开即启动轮播。data-wrap
默认值true
,轮播是否持续循环。- 如果在
JavaScript
调用就直接使用键值对方法,并去掉data-
;
$('#myCarousel').carousel({ //设置自定义属性
interval : 2000,//设置自动播放`/2` 秒
pause : 'hover',//设置暂停按钮的事件
wrap : false, //只播一次
});
- 方法:
cycle
循环各帧(默认从左到右)pause
停止轮播number
轮播到指定的图片上(小标从0
开始,类似数组)prev
循环轮播到上一个项目next
循环轮播到下一个项目
$('button').on('click', function () {//点击按钮执行
$('#myCarousel').carousel('cycle'); //点击后,自动播放
}
- 事件
slide.bs.carousel
当调用slide
实例方式时立即触发该事件。slid.bs.carousel
当轮播完成一个幻灯片触发该事件
$('#myCarousel').on('slide.bs.carousel', function () {
alert('当调用 slide 实例方式时立即触发');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('当轮播完成一个幻灯片触发');
});
-
bootstrap笔记总结【复制到浏览器打开放大】
拓展阅读
- bootstrap中文教程
- [bootstrap很方便的速查表-推荐](
标签:总结,插件,bootstrap,简书,show,Bootstrap,bs,data 来源: https://blog.csdn.net/qq_43456781/article/details/120249689