一、创建导航系统
1.简单导航
.nav-pills 小按钮
.nav-tabs 选项卡
.nav-stacked 搭配上面其中一个,创建垂直导航
<nav>
<ul class="nav nav-tabs">
<li role="presentation" class="active"></li>
<li role=""></li>
</ul>
</nav>
2.下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">chose
<span class="carset"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>
下拉菜单的类
.dropdown-menu-left(菜单左对齐于容器) .dropdown-header(标题菜单项)
.divider(菜单内创建一个分隔符) .disabled禁用菜单项
3.上拉式变种
将.dropup应用到按钮组容器上
4.导航栏
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--navbar-header标题-->
<div class="navbar-header">
<!--navbar-toggle collapsed表示这是一个仅在导航栏处于折叠状态显示的开关按钮(默认右浮动)-->
<!--data-toggle="collapse"告诉js元素是折叠的-->
<!--data-target="#id"id元素将会折叠和展开-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#id">
<span class="sr-only">toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--navbar-brand图标或品牌-->
<a class="navbar-brand">
<img>
</a>
<!--文本navbar-text,链接navbar-link,按钮navbar-btn,表单navbar-form-->
<p class="navbar-text">dany</p>
</div>
<div class="collapse navbar-collapse" id="id">
定义各种展开后显示的组件
</div>
</div>
.navbar-inverse反转导航颜色
.navbar-static-top(删除底部内外边距,放在窗口顶部) .navbar-fixed-top(删除底部内外边距,固定在窗口顶部) .navbar-fixed-bottom(删除底部内外边距,固定在窗口底部)
.navbar-right .navbar-left 定位导航栏内元素
5.滚动监听
使导航突出显示客户所读取的准确区域
为<body>添加data-spy="scroll"属性和指向导航栏的容器(不能是ul)的data-target="#myNav"属性;
在样式表中添加body{position:relative;}
应用:$('body').scrollspy({target:"myNav});
6.面包屑导航
<ul class="breadcrumb">
</ul>
7.分页
<ul class="pagination">
</ul>
上一页按钮
<li class="previous"><a href="">
<span class="glyphicon glyphicon-arrow-left"></span>Previous
</a></li>
8.列表组
显示包含自定义内容的简单和复杂列表
<div class="list-group">
<li class="list-group-item"></>
</ul>
上下文类
.list-group-item-info .list-group-item-success .list-group-item-danger .list-group-item-warning
其他
.list-group-item-heading(创建标题) .list-group-item-text(创建文本)
二、实用工具
1.助手类
2.图标
.carset(^符号,上拉菜单自动反转) .close(x符号)
3.布局类 pull
4.显示和隐藏元素
sr-only(只对屏幕阅读器可见) sr-only-focusable(得到焦点时再次显示)
hidden-xs visible-xs-block
5.响应式嵌入
根据容器宽度嵌入视频和幻灯片
<div class="embed-responsive-item embed-responsive-16by9(视频尺寸)">
<video></>
</>
三、使用bootstrap js插件
1.导入bootstap.js,jquery.js以及想要使用的插件
2.设置插件选项
- 参数形式
$('').tooltip({
html:true,
delay:200,
trigger:"click"
})
- 数据属性形式(首选)
<button data-toggle="tooltip" data-html="true" data-delay="200" data-trigger="click" title="you did it">
click
</button>
在js中可以通过data("xx")得到设置的数据属性
缺点:
每个元素只能使用一个插件
一次只能为一个元素设置选项
不能使用复杂的json选项
- jsAPI
$("").tooltip();
参数可以是:
无
选项对象,如{html:true}
针对特定方法的字符串,如"toggle",立即调用toggle();
四、模态窗口
在特定时间内强制用户交互(类似消息窗口)
1.创建
<div class="modal fade(可选,淡入)" id="id">
<div class="modal-dialog modal-lg(可选,大小)">
<div class="modal-content">
<!--以下是可选的-->
<!--页眉或顶部,应包含一个关闭按钮和标题-->
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"></button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
2.触发器
- $("id").modal();
参数:
backdrop:是否应该有一个背景,默认是true;
keyboard:是否可以用Esc键关闭模态窗口(true/false)
show:是否在初始化时显示(true/false)
- 数据属性
<button data-toggle="modal" data-target="id"></button>
<a data-toggle="modal" href="#id"></a>
- bootstrap modal 模态框弹出瞬间消失的问题
原问题链接 http://www.oschina.net/question/872916_165747
提供一个小例子说明。
<button class="btn btn-primary btn-lg" type="button" data-toggle="modal"data-target="#myModal">
注意红字部分type="button",在需要触发的按钮处,加入这一段就好了。
五、工具提示和弹出框
- 工具提示
1.工具提示是在触发元素旁边出现的小文本快
2.定义:data-toggle="tooltip" title=""
3.初始化:$('').tooltip();
- 弹出框
1.定义:data-toggle="popover" title="标题" data-content="内容"
2.初始化:$("").popover();
3.在下一次单击时消失或出现:
- 使用<a>标记
- role="button"
- tabindex="0"
六、按钮、警告框、进度条
- 按钮
1.按钮状态
$().button("toggle")切换按钮状态,显示为激活或失效
$().button("reset")重置按钮状态,改回原始文本
$().button(string)按钮文本切换成字符串定义的data-属性,如:
$().button('loading')指向data-loading-text="";
2.切换按钮
<button data-toggle="button"> 在切换按钮时将其设置为“已点击”和未点击;
<div class="btn-group" data-toggle="buttons">
被<label class="btn btn-primary">包围的单选框或复选框
</div>
- 警告框
1.创建
<div class="alert alert-success(必须上下文) alert-dismissible(可撤销)"> role="alert"></div>
2.关闭按钮
<button class="close" data-dismiss="alert" aria-label="Close">
3.警告框内的链接
.alert-link
- 进度条
1.创建
<div class="progress">
<div class="progress-bar role="progress" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%;min-width:2em"(为标签保留空间)></div>
</div>
2.上下文类
.progress-bar-success/info/warning/danger
七、折叠插件
1.创建一个可折叠部分
<a class="btn btn-default" data-toggle="collapse" href="#id"></a>
<article id="id" class="collapse"></article>
如果希望可折叠元素一开始是打开的,可使用class="collapse in"
2.水平折叠元素
如果使用了collapse插件,可添加.width
3.parent取得父元素的选择符
4.折叠面板
多个可折叠部分,某个打开,其他部分自动关闭
<div class="panel-group" role="tablist" id="parentId">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="more">
<a data-toggle="collapse" data-parent="#parentId" href="content1"></a>
</div>
<div id="content1" class="panel-collapse collapse" role="tabpanel>
<div class="panel-body">
</div>
</div>
</div>
下一个面板
</div>
八、轮播
1.创建轮播
- 定义轮播
<div id="id" class="carousel slide(过渡动画)" data-ride="carousel"(在页面加载时立即播放)>
- 轮播指标(下面的小点)
<ol class="carousel-indicators">
<li data-target="#id" data-slide-to="0">
<li data-target="#id" data-slide-to="1">
</ol>
- 幻灯片
<div class="carousel-inner" role="listbox">
<div class="item active(当前显示的项)">
幻灯片内容(图片、文字、组件等)
</div>
<div class="item> </div></div>
- 控件(上一个、下一个)
<a class="left carousel-control" href="id" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"</span>
</a>
<a></a>
九、提高可访问性
WAI-ARIA(无障碍的网页应用技术)
定义了提高残疾人可访问性的一种手段
aria-controls | 该元素是控制元素 |
aria-describedby | 描述文本的位置 |
aria-expanded | 该元素是一个可拓展元素 |
aria-hidden | 该元素隐藏 |
aria-invalid | 无效的表单控件 |
aria-label | 指向由其标记的元素ID |
aria-press | 处于.active状态的按钮被按下或者激活 |
role | 该元素的目的 |
title | html属性 |
相关属性可访问点击打开链接