Bootstrap 响应式框架 第四集

1、简单组件

1、路径导航

<ul class="breadcrumb">

<li>

<a href="#"></a>

</li>

<li>

<a href="#"></a>

</li>

<li class="active">

<a></a>

</li>

</ul>

2、分页

1、默认分页

<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>

2、翻页效果

<ul class="page">

<li>

<a href="#">上一页</a>

</li>

<li>

<a href="#">下一页</a>

</li>

</ul>

3、标签

所有的标签都依赖于 .label

不同颜色的标签：

.label-default

.label-primary

.label-success

.label-dange

.label-info

.label-warning

4、徽章

.badge

5、巨幕

.jumbotron

6、页头

.page-heade

7、水井

.well

8、进度条

外层：.progress

内层：

.progress-ba

配合不同颜色的 类一起使用

.progress-bar-info

.progress-bar-success

.progress-bar-dange

.progress-bar-warning

附加带条纹的类

.progress-bar-striped

附加被激活的效果的类

.active

2、组件 - 按钮组

1、作用

将多个按钮放在一个组中(btn-group)

2、语法

1、基本按钮组

<div class="btn-group">

<button>

<button>

<button>

</div>

2、可以将多个按钮组合并进一个按钮工具栏

将多个 .btn-group 放在一个 .btn-toolbar的元素中

3、按钮组的尺寸

为.btn-group 增加 .btn-group-* 设置尺寸

.btn-group-lg : 超大号按钮组

.btn-group-sm : 小号按钮组

.btn-group-xs : 超小号按钮组

4、两端对齐的按钮组 ???

5、垂直显示的按钮组 ???

3、组件 - 警告框

所有的警告框都依赖于 .alert

不同颜色的警告框，增加以下类即可：

.alert-success

.alert-info

.alert-warning

.alert-dange

1、允许被关闭的警告框

1、警告框元素必须依赖 .alert-dismissible

2、触发器元素增加一个属性

data-dismiss="alert"

4、组件 - 缩略图(thumbnail)

1、注意

1、要配合着栅格布局系统一起使用

2、最好将图片设置为 img-responsive

2、语法

1、基本的缩略图

<a href="#" class="thumbnail">

<img src="">

</a>

2、复杂的缩略图(图片，文字，按钮)

<div class="thumbnail">

<img>

/*文字区域*/

<div class="caption">

<h3>缩略图标题</h3>

<p>文本段落1..</p>

<p>文本段落2..</p>

<p>

<button>

<a>

</p>

</div>

</div>

5、组件 - 媒体对象(media)

1、媒体对象列表

<ul class="media-list">

<!-- 媒体对象1 -->

<li class="media">

<div class="media-left"></div>

<div class="media-body"></div>

</li>

<!-- 媒体对象2 -->

<!-- 媒体对象n -->

</ul>

6、组件 - 列表组(list-group)

ul : class="list-group"

li : class="list-group-item"

7、组件 - 面板

允许呈现出头部、主体、尾部的结构的组件

8、组件 - 导航条

1、基本导航条的实现

1、最外层 由nav并且引用 navbar navbar-default 两个类选择器来组成的

2、nav中必须添加一个 容器(container/container-fluid)

3、允许在 容器中 增加网站的品牌或标识内容

将 .navbar-header 的元素放在 容器中即可

4、.navbar-header 中的 链接/文字/图片 要引用 .navbar-brand 的类选择器

2、导航条中的导航(链接列表)

导航条中的导航依赖于 .nav .navbar-nav 即可

3、导航条中的表单

导航条中的表不适用于bootstrap提供的表单类

需要为 navbar 中的 <form>增加 class :.navbar-form

注意：

navbar-form 默认是没有浮动的，需要自己手动指定浮动效果

通过 navbar-left / navbar-right 处理左或右浮动

4、导航条中的按钮

按钮需要增加 .navbar-btn 来处理按钮在导航条中的位置

5、导航条中的文本

文本需要增加 .navbar-text 来处理文本在导航条中的位置

6、导航条中的浮动方式

通过 navbar-left 实现元素左浮动

通过 navbar-right实现元素右浮动

7、实现导航条的固定

为导航条元素增加以下类，来实现固定效果

固定顶端：.navbar-fixed-top

固定底端：.navbar-fixed-bottom

注意：

9、JS 插件 - Plugins

插件 - 提供了一组操作的行为

每种行为基本上都有两种的调用方式：

1、data-*

ex:

data-toggle="dropdown"

data-toggle="tab"

data-dismiss="alert"

2、JS编程方式

通过代码来调用行为

<script>

$("选择器"):用于获取指定选择器所对应的元素

$("#nav") : 获取页面中ID为nav的元素

$(".container") : 获取页面中class为container的元素

</script>

10、JS插件 - 工具提示(tooltip)

为元素添加以下内容：

data-toggle="tooltip"/*定义鼠标移入的行为*/

title="提示的文本"

data-placement="top/left/right/bottom"

必须配合 JS 代码一起完成

$("选择器").tooltip();

11、JS插件 - 弹出框(popover)

为元素添加以下内容：

1、data-toggle="popover"

2、data-placement="top/right/bottom/left"

3、title="弹出框标题(可选)"

4、data-content="弹出框中的内容"

必须配合的JS代码

$("选择器").popover();