bootstrap实战教程

2023-01-01 18:11:28

bootstrap实战教程

bootstrap介绍

简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。全球数以百万计的网站都是基于 Bootstrap 构建的。

Bootstrap是完全开源的由Twitter @mdo 和 @fat 构建, 采用 LESS CSS, 通过Node编译, 代码托管、开发、维护都在 GitHub 平台上

Bootstrap 为所有开发者、所有应用场景而设计，所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

简洁、直观、强大的开发框架，有众多插件，让Web开发更快、更容易

特点

预处理器

Bootstrap 提供了可以直接使用的 CSS 文件，源码是用CSS 预处理器。如需快速上手可以直接使用编译好的 CSS 文件，或者你也可以自己编译源码。

功能完备

Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

一个框架、多种设备

你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

bootstrap特点

相关网址

Getting started · Bootstrap
http://getbootstrap.com/getting-started/

Bootstrap中文网
http://www.bootcss.com/

twbs/bootstrap · GitHub
https://github.com/twbs/bootstrap

Bootstrap优站精选
http://expo.bootcss.com/

http://www.howzhi.com/
好知网-重拾学习乐趣

https://zh.airbnb.com/
airbnb中国站

bootstrap编码规范
http://codeguide.bootcss.com/

下载安装

http://getbootstrap.com/getting-started/
Getting started · Bootstrap

2016.01.28 最新版是v3.3.6

http://v3.bootcss.com/
Bootstrap 中文文档

http://codeguide.bootcss.com/
bootstrap编码规范

http://expo.bootcss.com/
优选网站

目录结构

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/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/

http://jquery.com/download/
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. All the notes in the jQuery 1.9 Upgrade Guide apply here as well. Since IE 8 is still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site. Please read the 2.0 release notes carefully.

jquery2.x不支持IE8以下的，bootsrtap插件无法正常使用，建议用jquery1.12.0的在IE8下基本功能可以使用，css3语法仍不兼容。

fonts-google字体，国内环境加载慢需要下载到本地

引入核心文件

引入核心js css

用Meta标签代码让360双核浏览器默认极速模式不是兼容模式
<meta name="renderer" content="webkit" />
让IE以*模式渲染文档，强制IE使用Chrome Frame渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

全局 CSS 样式

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

栅格系统
排版
代码
表格
表单
按钮
图片
辅助类
响应式工具
使用 Less
使用 Sass

http://v3.bootcss.com/css/

可复用组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

Glyphicons 字体图标
下拉菜单
按钮组
按钮式下拉菜单
输入框组
导航
导航条
路径导航
分页
标签
徽章
巨幕
页头
缩略图
警告框
进度条
媒体对象
列表组
面板
具有响应式特性的嵌入内容
Well

http://v3.bootcss.com/components/

JavaScript 插件

http://v3.bootcss.com/javascript/

过渡效果
模态框
下拉菜单
滚动监听
标签页
工具提示
弹出框
警告框
按钮
Collapse
Carousel
Affix

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

栅格参数

超小屏幕手机 (<768px) .col-xs-
小屏幕平板 (≥768px) .col-sm-
中等屏幕桌面显示器 (≥992px) .col-md-
大屏幕大桌面显示器 (≥1200px) .col-lg-
.container 最大宽度 None （自动） 750px 970px 1170px

http://v3.bootcss.com/css/#grid

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

.container 类用于固定宽度并支持响应式布局的容器。默认1200px，槽边15px

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。
通过调整源码中的@grid-float-breakpoint 值，就可以控制导航条何时堆叠排列，何时水平排列。默认值是 768px

http://v3.bootcss.com/components/#navbar

pc宽屏下的效果

小屏自动缩进成菜单栏，注意：data-target 的ID要和下面div的ID保持一致，否则出不来

<nav class="navbar navbar-default">
<div class="container margintop30">

<div class="navbar-header marginright40">
<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 href="{:U('System/Index/index')}"><img src="__PUBLIC__/Common/images/logo.png" class="l" /></a> </div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="current"><a href="{:U('System/Index/index')}">首页</a></li>
<li><a href="{:U('Design/Design/index')}">设计中心</a></li>
<li><a href="{:U('System/Product/index')}">产品中心</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<if condition="$userId gt 0 ">
<li class="dropdown"> <a href="{:U('System/Wode/index')}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的蜗牛窝 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{:U('System/Wode/index')}">个人资料</a></li>
<li><a href="{:U('System/Anquan/xiugai')}">修改密码</a></li>
<li><a href="{:U('System/Anquan/index')}">绑定手机/邮箱</a></li>
<li><a href="{:U('System/Shoucang/index')}">我的收藏</a></li>
<li><a href="{:U('System/login/logout')}">退出登录</a></li>
</ul>
</li>
<else />
<li><a href="{:U('System/login/index')}">登录</a></li>
<li><a href="{:U('System/regsiter/index')}">注册{$menuid}</a></li>
</if>
</ul>
</div>

</div>

</nav>

导航

bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

如果你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。

标签页，.nav-tabs 类依赖 .nav 基类。

胶囊式标签页，HTML 标记相同，但使用 .nav-pills 类：

两端对齐的标签页
在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
两端对齐的导航条导航链接已经被弃用了。

禁用的链接
对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。
链接功能不受到影响
这个类只改变 <a> 的外观，不改变功能。可以自己写 JavaScript 禁用这里的链接。

添加下拉菜单，用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。

输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。

在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
不支持在输入框的单独一侧添加多个额外元素。
不支持在单个输入框组中添加多个表单控件。

为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。

作为额外元素的多选框和单选框
可以将多选框或单选框作为额外元素添加到输入框组中。

作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。

作为额外元素的按钮式下拉菜单

作为额外元素的分裂式按钮下拉菜单

按钮式下拉和向上弹出菜单

单按钮下拉菜单

分裂式按钮下拉菜单

向上弹出式菜单

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

轮播Carousel插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

http://v3.bootcss.com/javascript/#carousel

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

bootstrap-3.3.6\js\tests\visual\carousel.html

<!DOCTYPE html>
<html>
<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>Carousel</title>
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">

</head>
<body>

<div class="page-header">
<h1>Carousel <small>Bootstrap Visual Test</small></h1>
</div>

</div>

<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../carousel.js"></script>

</body>
</html>

由于轮播carousel第一个div需要设置active样式才能正常显示，上面的圆点也同样需要数字，使用volist标签在循环的同时可以取得下标（foreach，for标签实现不了）

<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<volist name="bopic" id="xt">
<li data-target="#carousel-example-generic" data-slide-to="{$i-1}" class="<if condition="$i eq 1 ">active</if>"></li>
</volist>
</ol>
<div class="carousel-inner">
<volist name="bopic" id="xt">
<div class='item <if condition="$i eq 1 ">active</if>'>
<img src="{$xt.page_bopic_image}" alt="{$xt.page_bopic_seo}"/>
</div>
</volist>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

</div>

轮播carousel效果

轮播Unslider插件

unslider插件是一个超小的Jquery轮播（slider）插件，大小不到3k，源码托管在GitHub上，是一个开源项目。支持键盘导航，就是键盘上的左右键

unslider分组后轮播在屏幕缩小后无法在一行完整显示，换行对高度有要求，各种屏宽下效果都可能不一样，不好控制，建议响应式布局少用这种轮播效果

http://www.bootcss.com/p/unslider/

轮播unslider效果

airbnb大中小屏及图片布局

https://zh.airbnb.com/
美短租网站目前Airbnb估值达到了250亿美元或更多

airbnb图片当背景图处理，加上 background-position: center; 实现居中收缩
col-md-12 这个在中屏下为12列全屏，col-lg-4 默认为4列，用rm-padding-sm实现小屏幕上去掉槽边功能，实现了上面的效果。

大屏下并排三列，中屏为两行，一行全屏，下面两个并列，小屏为三行。

大中小屏的布局代码

栅格参数

九宫格合作伙伴友情链接

要在不同屏幕下实现九宫格居中的效果，不能采用ul li 然后float的方式实现（无法在不同宽度情况下居中）,col的方式采用百分比控制宽度

.partner-row{
margin-right: -30px;
margin-left: -30px;
}
.partner-row [class*="col"]{
margin-bottom: 30px;
}
.partner-row img{
width:100px;
height:72px;
}
@media screen and (max-width: 767px) {
.partner-row img{
width:80px;
height:60px;
}
}

针对屏幕大小定义样式

通过@media screen and (min-width: 767px)可以定义不同屏幕下的显示效果，这个属于css3的语法，在IE8以下不支持css3的浏览器不期作用。

定义不同屏幕样式,pc大屏效果

@media screen and (min-width: 767px) {
.mr0{
margin-right: 0px !important;
padding-right: 0px !important;
}
}
/** start mobile style */
@media screen and (max-width: 767px) {
#carousel-example-generic{
height: 300px !important;
}
#carousel-example-generic .item{
height: 300px !important;
}
}
/** end mobile style */

移动端效果

.design-info-sm{
display:none;
}
@media screen and (max-width: 767px) {
.design-info-sm{
display:block;
font-size:24px;
color:#FFF;
text-align:center;
vertical-align:middle;
display:block;
padding-top:130px;
height:300px;
margin-top:-300px;
z-index:10000;
}
}

.design-info-sm{
display:none;
}
@media screen and (max-width: 767px) {
.design-info-sm{
display:block;
}
}

响应式工具visible-*-*

http://v3.bootcss.com/css/#responsive-utilities

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类，通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表

打印类，和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

测试用例，调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类。

模态框 modal.js

http://v3.bootcss.com/javascript/#modals

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
不支持同时打开多个模态框
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
模态框的 HTML 代码放置的位置
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

静态模态框包含了模态框的头、体和一组放置于底部的按钮。

<div class="modal fade">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>

动态模态框，点击按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

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

增强模态框的可访问性
务必为 .modal 添加 role="dialog" 和 aria-labelledby="..." 属性，用于指向模态框的标题栏；为 .modal-dialog 添加 aria-hidden="true" 属性。
另外，你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。
data-target=".bs-example-modal-lg" data-target=".bs-example-modal-sm"

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

禁止动画效果，如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">...</div>

手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。
$('#myModal').modal('toggle')

通过 data 属性，不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过 JavaScript 调用，只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：$('#myModal').modal(options)

参数，可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})

实例：页面有多个模态框，用class=fade来控制在模态框显示出来后执行指定脚本的方法。
$(".fade").each(function () {
var dom = $(this);
dom.on('shown.bs.modal', function () {
//dosomething...
});
});

辅助类

http://v3.bootcss.com/css/#helper-classes

情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。<span class="caret"></span>

快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。
<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}

// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}

不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。参见导航条文档以获取更多信息。

让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。
<div class="center-block">...</div>

// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}

清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

// Usage as a mixin
.element {
.clearfix();
}

显示或隐藏内容

show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。
.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。
另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是所，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。

// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}

// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}

屏幕阅读器和键盘导航

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循可访问性的最佳实践很有必要。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}

图片替换

使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
.text-hide();
}

列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。http://v3.bootcss.com/components/#list-group

基本实例，最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。

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

给列表组加入徽章(数字)组件，它会自动被放在右边。

<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>

链接，用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。没必要给列表组中的每个元素都加一个父元素。

<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

按钮，列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！

<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

被禁用的条目，为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果。<a href="#" class="list-group-item disabled">

<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

情境类，为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态。

<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

定制内容，列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。

<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>

面板组件

某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。http://v3.bootcss.com/components/#panels

基本实例，默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>

带标题的面板，通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。
为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>

带脚注的面板，把按钮或次要的文本放入 .panel-footer 容器内。注意面板的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>

情境效果，像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面板。

带表格的面板，为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。
如果没有 .panel-body ，面版标题会和表格连接起来，没有空隙。

<div class="panel panel-default">

<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>

<table class="table">
...
</table>
</div>

<div class="panel panel-default">

<div class="panel-heading">Panel heading</div>

<table class="table">
...
</table>
</div>

带列表组的面板，以简单地在任何面板中加入具有最大宽度的列表组。

<div class="panel panel-default">

<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</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>

具有响应式特性的嵌入内容

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。
这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。
超级提示：不需要为 <iframe> 元素设置 frameborder="0" 属性，因为我们已经替你这样做了！

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Well效果

默认效果，把 Well 用在元素上，能有嵌入（inset）的的简单效果。

可选类/样式，通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。

Affix固定浮动

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of the affix plugin.
固定元素在顶部或者底部，可以通过样式控制或者js控制

$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.

标签页tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.

$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

滚动监听scrollspy.js

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示，滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。http://v3.bootcss.com/javascript/#scrollspy

滚动监听插件依赖 Bootstrap 的导航组件用于高亮显示当前激活的链接。

需要相对定位（relative positioning）无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 <body> 元素。When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

在 CSS 中添加 position: relative; 之后，通过 JavaScript 代码启动滚动监听插件：
$('body').scrollspy({ target: '#navbar-example' })
当使用滚动监听插件的同时在 DOM 中添加或删除元素后，你需要像下面这样调用此刷新（ refresh）方法：
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})

activate.bs.scrollspy 每当一个新条目被激活后都将由滚动监听插件触发此事件。
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})

码农公寓

相关文章