bootstrap 笔记用法

container 实现内容居中对齐
jumbotron 超大屏幕 可以增加标题的大小
responsive 响应式
center-block 图像居中
col-md-offset-X 向左移
lead 文本更大更粗、行高更高

表格

table 表格
table-striped 条纹 隔行变色
table-bordered 表格边框线
table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
table-condensed 让表格更加紧凑
success 表示成功的操作 用在tr上
info 表示信息变化的操作 用在tr上
warning 表示一个警告的操作 用在tr上
danger 表示一个危险的操作 用在tr上

文本
text-left 向左对齐文本
text-center 居中对齐文本
text-right 向右对齐文本
text-muted 本行内容是减弱的
text-primary 本行内容带有一个 primary class
text-success 本行内容带有一个 success class
text-info 本行内容带有一个 info class
text-warning 本行内容带有一个 warning class
text-danger 本行内容带有一个 danger class
text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
text-nowrap 段落中超出屏幕部分不换行
text-lowercase 设定文本小写
text-uppercase 设定文本大写
text-muted 文本样式

背景颜色
bg-primary
bg-success
bg-info
bg-warning
bg-danger

pull-left 元素浮动到左边
pull-right 元素浮动到右边
clearfix 清除浮动
center-block 设置元素为 display:block 并居中显示
show 强制元素显示
hidden 强制元素隐藏
sr-only 除了屏幕阅读器外，其他设备上隐藏元素
sr-only-focusable 与 sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
text-hide 将页面元素所包含的文本内容替换为背景图
close 显示关闭按钮
caret 显示下拉式功能

title 属性 title="XXXX"
dl->td+dd

list-unstyled 未定义样式列表
list-inline 内联列表
pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
pre 内嵌代码
code 内嵌代码

form 表单
form-group
form-control
placeholder="请输入名称"

form-inline 内联表单 向左对齐的，标签是并排的
sr-only 隐藏内联表单的标签
form-horizontal 水平表单
form-group
control-label
form-control
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
</form>

checkbox-inline 内联复选框
radio-inline 内联单选框
radio
checkbox
disabled 禁用 标签上加一个就可以

fieldset 禁用的字段集<fieldset disabled></fieldset>
has-success 表单成功验证状态
has-warning 表单警告验证状态
has-error 表单错误验证状态
help-block 一个较长的帮助文本块，超过一行，需要扩展到下一行

btn 按钮 作用于 a button input 上
btn-default 默认/标准按钮
btn-primary 原始按钮样式
btn-success 表示成功的动作
btn-info 该样式可用于要弹出信息的按钮
btn-warning 表示需要谨慎操作的按钮
btn-danger 表示一个危险动作的按钮操作
btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
btn-block 块级按钮(拉伸至父元素100%的宽度)
active 按钮被点击
disabled 禁用按钮

图片
img-circle 图片以椭圆型展示
img-rounded 图片圆角 相当于border-radius:6px
img-thumbnail 添加一些内边距（padding）和一个灰色的边框
img-responsive 图片响应式 (将很好地扩展到父元素)

字体图标
格式 glyphicon glyphicon-sort-by-attributes

下拉菜单
dropdown 只需要在 class dropdown 内加上下拉菜单 用在div上
格式例子
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
</ul>
</div>

dropdown-menu 创建下拉菜单 用在ul上
dropdown-menu-right 下拉菜单右对齐 用在ul上
dropdown-header 下拉菜单中添加标题 用在ul上
dropup 指定向上弹出的下拉菜单
disabled 下拉菜单中的禁用项
divider 下拉菜单中的分割线

btn-group 按钮组 用在div上
btn-toolbar 把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中获得更复杂的组件
.btn-group-lg, .btn-group-sm,.btn-group-xs 应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整 应用在div上
btn-group-vertical 让一组按钮垂直堆叠显示(默认是水平) 应用在div上
在一个按钮组里面嵌套另一个按钮组（下拉菜单可以）
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="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>
</ul>
</div>
</div>

<span class="caret"></span> 指示按钮作为下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>

分割的按钮下拉菜单 就是将下拉框组合拼装在一起
<div class="btn-group">
<button type="button" class="btn btn-primary">原始</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
</div>

btn-lg，btn-sm，btn-xs 按钮大小 大，中，小

输入框组
语法
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>

input-group 应用在div中
在input-group 里面包含 input-group-addon 应在在<span> 内放置额外的内容
input-group-lg，input-group-sm 输入框组的大小

<span class="input-group-addon">XXX</span> 中可以放控件,btn、下拉菜单，文字等等

导航元素
nav nav-tabs 标签式导航菜单 应用在ul上
语法
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
</ul>

active 表示选中点击

nav nav-pills 胶囊式的导航菜单 应用在ul上
nav-stacked 垂直堆叠 应用在ul上
nav-justified 两端对齐的导航 与父元素等宽
tab-content 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改
tab-pane 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
in active 选中点击状态

语法
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
<li><a data-toggle="tab" href="#SVN">SVN</a></li>
<li><a data-toggle="tab" href="#iOS">iOS</a></li>
<li><a data-toggle="tab" href="#Net">VB.Net</a></li>
<li><a data-toggle="tab" href="#Java">Java</a></li>
<li><a data-toggle="tab" href="#PHP">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="Home">Home</div>
<div class="tab-pane fade" id="SVN">SVN</div>
<div class="tab-pane fade" id="iOS">iOS</div>
<div class="tab-pane fade" id="Net">Net</div>
<div class="tab-pane fade" id="Java">Java</div>
<div class="tab-pane fade" id="PHP">PHP</div>
</div>

 

分页
pagination 是一种无序列表 应用在ul上
语法
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
&laquo; 表示 <<
&raquo; 表示 >>
&larr; 表示 <——
&rarr; 表示 ——>
&times; 表水 X

pagination-lg, .pagination-sm 获取不同大小的项
active 选中点击该页码 用在li上
disabled 禁用该页码 用在li上

翻页
pager 添加该 class 来获得翻页链接 分页链接，链接居中对齐
previous 使用 .previous 把链接向左对齐
next 使用 .next 把链接向右对
disabled 禁用链接
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

标签 标签可用于计数、提示或页面上其他的标记显示
label 来显示标签
语法
<span class="label label-default">Label</span>
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

徽章 徽章与标签相似，主要的区别在于徽章的边角更加圆滑
主要用于突出显示新的或未读的项
语法
<span class="badge">

页面标题 page-header
它会在网页标题四周添加适当的间距

<small>子标题</small> 小标签元素

警告 alert
警告（Alerts）向用户提供了一种定义消息样式的方式
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>

可取消的警告
1:通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告
2:同时向上面的 <div> class 添加可选的 .alert-dismissable
3:再添加一个关闭按钮 .close 再加上一个属性 data-dismiss="alert"
语法：
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
&times;
</button>
信息！请注意这个信息。
</div>

alert-link 警告链接

close.bs.alert 当调用 close 实例方法时立即触发该事件。

closed.bs.alert 当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。
$('#myalert').bind('closed.bs.alert', function () {
// 执行一些动作...
})

进度条
progress
1：添加一个带有 class .progress 的 <div>。
2：接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
3：添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
语法
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" title="40% 完成" style="width: 40%;">
</div>
</div>
progress-striped 条纹的进度条
active 动画的进度条 在条纹基础上

列表组 列表组件用于以列表形式呈现复杂的和自定义的内容
1：向元素 <ul> 添加 class .list-group。
2：向 <li> 添加 class .list-group-item。

语法
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
</ul>

面板 面板组件用于把 DOM 组件插入到一个盒子中

语法

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
带有 title 的面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
<div class="panel-footer">面板脚注</div>
</div>

带语境色彩的面板
使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板
跟 panel 放同一级

 

模态框
1、html代码
语法：
<!--定义一个模态框 class="modal fade" aria-hidden="false" role="dialog"-->
<div class="modal fade" id="modelwin" role="dialog" aria-hidden="false">
<div class="modal-dialog">
<!-- 模态框中所有内容-->
<div class="modal-content">
<!--头部-->
<div class="modal-header">
<!--取消X-->
<button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
<!--头部标题-->
<h2 class="modal-title pull-left">这是模态框标题</h2>
</div>
<!--身体内容部分-->
<div class="modal-body">
<!--填写内容-->
<div class="progress ">
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 40%" title="完成 40%"></div>
</div>
</div>
<!--脚页-->
<div class="modal-footer">
<!--关闭-->
<button type="button" data-dismiss="modal" class="btn btn-default">
关闭
</button>
<button class="btn btn-primary">
确定
</button>
</div>
</div>
</div>
</div>
</div>

2、js
//为了让弹出框居中
$('#modelwin').on('shown.bs.modal', function () {　　// 事件开始时被触发
$("#modelwin .modal-dialog").css({
"margin": "0px",
　　　"width":"55%",　　//设置弹出框的width
"top": function () { //设置高度
return (document.documentElement.clientHeight - $("#modelwin .modal-dialog").height()) / 2 + "px";
},
"left": function () { // 左边位置
return (document.documentElement.clientWidth - $("#modelwin .modal-dialog").width()) / 2 + "px";
}
});
});
$("#modelwin").modal({backdrop: 'static', keyboard: false});
$("#modelwin").modal("show");

1：属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
2：<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
3：class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
4：data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
5：class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
6：class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
7：data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
取值：boolean 或者 'static' （默认 true）

keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
取值： boolean （默认 true）

show 当初始化时显示模态框。
取值： boolean （默认 true）

模态框中的方法
modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
$('#identifier').modal({backdrop:'static',keyboard: false})

modal('toggle') 手动切换模态框 $('#identifier').modal('toggle')
modal('show') 手动打开模态框。 $('#identifier').modal('show')
modal('hide') 手动隐藏模态框 $('#identifier').modal('hide')

模态框中的事件
show.bs.modal 在调用 show 方法后触发。
shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）
hide.bs.modal 当调用 hide 实例方法时触发。
hidden.bs.modal 当模态框完全对用户隐藏时触发。
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
})

标签页（Tab）插件中要用到的事件
show.bs.tab 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})

shown.bs.tab 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})

语法：
<hr>
<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
菜鸟教程</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">
Java <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 获取已激活的标签页的名称
var activeTab = $(e.target).text();
// 获取前一个激活的标签页的名称
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});

提示工具（Tooltip）插件
用法：
只需向一个锚标签添加 data-toggle="tooltip"
<a href="#" data-toggle="tooltip" data-placement="left" title="Example tooltip">请悬停在我的上面</a>

data-placement 属性 设置tooltip方向 left/right/bottom/top (默认top)

Tooltip 选项
选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用
animation boolean 默认值：true data-animation 提示工具使用 CSS 渐变滤镜效果
html boolean 默认值：false data-html 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。

placement string|function 默认值：top data-placement
规定如何定位提示工具（即 top|bottom|left|right|auto）。当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

selector string 默认值：false data-selector 如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title string | function 默认值：'' data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger string 默认值：'hover focus' data-trigger 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
content string | function 默认值：'' data-content 如果未指定 data-content 属性，则使用默认的 content 值。
delay number | object 默认值：0 data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay: { show: 500, hide: 100 }
container string | false 默认值：false data-container 向指定元素追加提示工具。实例： container: 'body'

Tooltip 方法
Options: .tooltip(options) 向元素集合附加提示工具句柄。 $().tooltip(options)
Toggle: .tooltip('toggle') 切换显示/隐藏元素的提示工具。 $('#element').tooltip('toggle')
Show: .tooltip('show') 显示元素的提示工具。 $('#element').tooltip('show')
Hide: .tooltip('hide') 隐藏元素的提示工具。 $('#element').tooltip('hide')
Destroy: .tooltip('destroy') 隐藏并销毁元素的提示工具。 $('#element').tooltip('destroy')

Tooltip 事件
下表列出了提示工具（Tooltip）插件中要用到的事件。这些事件可在函数中当钩子使用
show.bs.tooltip 当调用 show 实例方法时立即触发该事件。
shown.bs.tooltip 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。
hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
})

弹出框（Popover）插件

警告框（Alert）插件
警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息

按钮（Button）插件

加载状态 只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
type="button"> 加载状态
</button>

转载于:https://www.cnblogs.com/wcnwcn/p/7850691.html