Bootstrap 笔记

您所在的位置：网站首页 › bootstrap鼠标高亮 › Bootstrap 笔记

Bootstrap 笔记

#Bootstrap 笔记| 来源: 网络整理| 查看: 265

基本的HTML模板 Bootstrap的HTML标准模板 Hello, world! 强调内容 .. .. 第一个是普通的内容：“我是一个普通的段落，我不需要强调显示”。第二个是强调的内容：“这部分内容需要特别的强调，我和别人长得不一样”。粗体

在Bootstrap中，可以使用和标签让文本直接加粗。

我在学习Bootstrap，我要掌握Bootstrap的所有知识。我是一个段落，这个段落中“强调”一词将会加粗显示。斜体
斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签或来实现
我在慕课网上跟大漠一起学习Bootstrap的使用。我一定要学会Bootstrap。我正在学习Bootstrap。我发现Bootstrap真的好强大。强调相关的类
在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
text-muted：提示，使用浅灰色（#999）text-primary：主要，使用蓝色（#428bca）text-success：成功，使用浅绿色(#3c763d)text-info：通知信息，使用浅蓝色（#31708f）text-warning：警告，使用黄色（#8a6d3b）text-danger：危险，使用褐色（#a94442） .text-muted 效果 .text-primary效果 .text-success效果 .text-info效果 .text-warning效果 .text-danger效果我是一段危险信息，请用Bootstrap框架中的危险风格显示文本对齐风格
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑ 左对齐，取值left

☑ 居中对齐，取值center

☑ 右对齐，取值right

☑ 两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

我居左

我居中

我居右

两端对齐There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file.

给我加个类，我就向右对齐。
列表无序列表信息1 无序列表信息2 无序列表信息3 有序列表信息1 有序列表信息2 有序列表信息3 定义列表标题定义列表信息1 定义列表信息2 普通列表列表项目列表项目列表项目列表项目列表项目有序列表项目列表一项目列表二项目列表三有序列表嵌套有序列表有序列表有序列表(2) 有序列表(2) 有序列表列表–去点列表
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
.list-unstyled { padding-left: 0; list-style: none; } 有序项目列表一有序项目列表二有序二级项目列表一有序二级项目列表二无序三级项目列表一无序三级项目列表二无序四级项目列表一无序四级项目列表二无序三级项目列表三有序二级项目列表三有序项目列表三列表– 内联列表
Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
城市: 北京上海南京厦门列表–定义列表北京北京市中国的首都，是政治文化集中地上海上海号称东方的巴黎列表–水平定义列表
水平定义列表就像内联列表一样，Bootstrap可以给添加类名“.dl-horizontal”给定义列表实现水平显示效果。只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。
标题一: 描述内容标题二: 描述内容代码一
在使用代码时，用户可以根据具体的需求来使用不同的类型： 1、：一般是针对于单个单词或单个句子的代码 2、：一般是针对于多行代码（也就是成块的代码） 3、:一般是表示用户要通过键盘输入的内容

不管使用哪种代码风格，在代码中碰到小于号（)使用“;”来替代。
code风格： Bootstrap的代码风格有三种：;code;、;pre;和;kbd; pre风格： ;ul; ;li;...;/li; ;li;...;/li; ;li;...;/li; ;/ul; kbd风格：请输入ctrl+c来复制代码，然后使用ctrl+v来粘贴代码代码二
元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
高度超出340px，就会在Y轴出现滚动条 .... .... .... .... .... .... .... .... .... .... .... .... .... .... 表格
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

主要包括：

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

响应式对不同的端，比如pc端，移动端，phone或者平板，会有不同的显示。普通的html在移动端上不能缩放，响应式能够随着屏幕大小改变。

可以添加多个class命名
斑马线表格基础表格表格标题表格标题表格标题表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格斑马线表格表格标题表格标题表格标题表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格带边框的表格表格标题表格标题表格标题表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格鼠标悬浮高亮的表格表格标题表格标题表格标题表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格紧凑型表格表格标题表格标题表格标题表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格响应式表格表格标题表格标题表格标题表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格–表格行的类
Bootstrap还为表格的行元素提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
表格充满浏览窗口显示高亮色表格充满浏览窗口显示底色，鼠标划过显示高亮色表格大小不充满浏览器显示底色，鼠标划过显示高亮色类名描述 .active 表示当前活动的信息 .success 表示成功或者正确的行为 .info 表示中立的信息或行为 .warning 表示警告，需要特别注意 .danger 表示危险或者可能是错误的行为表格– 基础表格
对表格的结构，跟我们平时使用表格是一样的：
表格标题 … 表格单元格 … … 表格标题表格标题表格标题表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格表格–响应式表格
随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。 Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将置于这个容器当中，这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
… 基础表单
对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。当然表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名form-control，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999
基础表单邮箱：密码记住密码进入邮箱水平表格
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

1、在元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）
水平表单邮箱密码记住密码进入邮箱表单控件(下拉选择框select)
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如：
1 2 3 4 5 1 2 3 4 5 表单控件(文本域textarea)
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
表单控件(按钮)
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：

☑ input[type=“submit”]

☑ input[type=“button”]

☑ input[type=“reset”]

☑

在Bootstrap框架中的按钮都是采用来实现。

表单控件状态——焦点状态 Button class="" Description Default btn Standard gray button with gradient Primary btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons Info btn btn-info Used as an alternative to the default styles Success btn btn-success Indicates a successful or positive action Warning btn btn-warning Indicates caution should be taken with this action Danger btn btn-danger Indicates a dangerous or potentially negative action Inverse btn btn-inverse Alternate dark gray button, not tied to a semantic action or use 表单控件大小
前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 1、input-sm:让控件比正常大小更小 2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input，textarea和select控件，具体使用如下：

表单控件大小案例1 控件变大正常大小控件变小案例2 表单控件状态（禁用状态）
http://www.imooc.com/code/2361
表单控件状态(验证状态)
http://www.imooc.com/code/2362

按钮基础按钮.btn 默认按钮.btn-default 主要按钮.btn-primary 成功按钮.btn-success 信息按钮.btn-info 警告按钮.btn-warning 危险按钮.btn-danger 链接按钮.btn-link
按钮大小大型按钮.btn-lg 正常按钮小型按钮.btn-sm 超小型按钮.btn-xs
但有时候在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。那么前面的方法我们都无法很好的实现，除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。
大型按钮.btn-lg 正常按钮小型按钮.btn-sm 超小型按钮.btn-xs 图像
图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片
图标
Bootstrap框架中也为大家提供了近200个不同的icon图片

列偏移
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。
.col-md-4 列向右移动四列的间距 .col-md-3 .col-md-4 列向右移动四列的间距列排列
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
.col-md-4 .col-md-8
.col-md-4 和 .col-md-8的位置将会互换
下拉菜单
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

2、使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle=”dropdown”

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
选择你喜欢的水果苹果香蕉梨桃导航
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式。

Home CSS3 Sass jQuery Responsive 导航（tab导航）
Home CSS3 Sass jQuery Responsive
Home CSS3 Sass jQuery Responsive 导航（胶囊形(pills)导航）
但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可：

商品介绍规格参数商品评价售后保障 Responsive 自适应导航（使用）
自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。
Home CSS3 Sass jQuery Responsive 导航加下拉菜单（二级导航）
在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul
首页教程 CSS3 Sass jQuery Responsive 关于我们面包屑式导航
首页名师简介大漠导航条
网站首页系列教程名师介绍成功案例关于我们　　百度　网站首页系列教程 CSS3 JavaScript PHP 名师介绍成功案例关于我们搜索基础导航条
在制作一个基础导航条时，主要分以下几步：

第一步：首先在制作导航的列表()基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

网站首页系列教程名师介绍成功案例关于我们固定导航条
导航条固定在浏览器顶部或底部
　　慕课网　网站首页系列教程名师介绍成功案例关于我们我是内容　　慕课网　网站首页系列教程名师介绍成功案例关于我们
从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容
body{ padding-top: 70px; padding-bottom: 70px; } 响应式导航条

（（宽屏时效果）（中屏时效果）（（窄屏时效果）
　 Toggle Navigation 慕课网网站首页系列教程名师介绍成功案例关于我们反色导航条
慕课网首页教程关于我们分页导航（带页码的分页导航）
分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航 ☑ 带翻页的分页导航

在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：

1、通过“pagination-lg”让分页导航变大；

2、通过“pagination-sm”让分页导航变小：
«第一页 11 12 13 14 15 最后一页» «第一页 11 12 13 14 15 最后一页» «第一页 11 12 13 14 15 最后一页» 分页导航（翻页分页导航）
«上一页下一页» «上一页下一页» «上一页下一页» 标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：
Example heading New 默认标签主要标签成功标签信息标签警告标签错误标签
徽章
从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示：

Inbox 42 　　慕课网　网站首页系列教程名师介绍成功案例23 关于我们 Home 42 Profile Messages 3 42 Home Profile 3 Messages Messages 4 缩略图（一）
缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。并通过“thumbnail”样式配合bootstrap的网格系统来实现。

上面的结构表示的是在宽屏幕（可视区域大于768px）的时候，一行显示四个缩略图(单击全屏查看效果)：在窄屏（可视区域小于768px）的时候，一行只显示两个缩略图：
缩略图（二）
上一小节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等：
Bootstrap框架系列教程 Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站... 开始学习正在学习 Bootstrap框架系列教程 Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站... 开始学习正在学习 … 警示框
在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示

默认警示框恭喜您操作成功！请输入正确的密码您已操作失败两次，还有最后一次机会对不起，您输入的密码有误可关闭的警示框 × 恭喜您操作成功！ × 请输入正确的密码 × 您已操作失败两次，还有最后一次机会 × 对不起，您输入的密码有误警示框的链接 Well done! You successfully read this important alert message . Heads up! This alert needs your attention , but it's not super important. Warning! Better check yourself, you're not looking too good . Oh snap! Change a few things up and try submitting again. 进度条

动态条纹进度条在进度条“progress progress-striped”两个类的基础上再加入“active”类名

进度条–带Label的进度条

20% 30% 90% 20% 20% 30% 15% 媒体对象–默认媒体对象
媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：

☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

div class="media"> 系列：十天精通CSS3 全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！媒体对象–媒体对象的嵌套
我是大漠我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例慕课网大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布 W3cplus W3cplus站上还有很多教程.... 媒体对象–媒体对象列表
媒体对象的嵌套仅是媒体对象中一个简单应用效果之一，在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多，同样用评论系统来说事：
Media Header … … … 列表组–基础列表组
基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：

☑ list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

☑ list-group-item：列表项，常用的是li元素，当然也可以是div元素

来看一个简单的示例：
揭开CSS3的面纱 CSS3选择器 CSS3边框 CSS3背景 CSS3文本列表组–带徽章的列表组
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”：
13揭开CSS3的面 456CSS3选择器 892CSS3边框 90CSS3背景 1290CSS3文本列表组–带链接的列表组带链接的列表组1 揭开CSS3的面 CSS3选择器 CSS3边框 CSS3背景 CSS3文本带链接的列表组2 图解CSS3 220Sass教程玩转Bootstrap 列表组–自定义列表组
Bootstrap框加在链接列表组的基础上新增了两个样式：

☑ list-group-item-heading：用来定义列表项头部样式

☑ list-group-item-text：用来定义列表项主要内容

这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容

Canvas绘图详解12 本课程为Canvas系列课程第二课。通过对《绚丽的倒计时效果的学习》，在大家对Canvas绘图有一定了解的基础上...... 玩转Bootstrap30 Bootstrap框架是一个非常受欢迎的前端开发框架，他能让后端程序员和不懂设计的前端人员制作出优美的Web页面或Web应用程序。基于bootstrap的网页开发5 Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。课程介绍了Bootstrap框架的基本知识，并基于Bootstrap框架... 列表组–列表项的状态设置
Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名：

☑ active：表示当前状态

☑ disabled：表示禁用状态

5902图解CSS3 15902W3cplus 59020慕课网 0Sass中国列表组–多彩列表组
列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。

☑ list-group-item-success：成功，背景色绿色

☑ list-group-item-info：信息，背景色蓝色

☑ list-group-item-warning：警告，背景色为黄色

☑ list-group-item-danger：错误，背景色为红色

如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名

5902图解CSS3 15902W3cplus 59020慕课网 0Sass中国 10Mobile教程面板–基础面板
基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容：

我是一个基础面板，带有默认主题样式风格面板–带有头和尾的面板
基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

☑ panel-heading：用来设置面板头部样式

☑ panel-footer：用来设置面板尾部样式
图解CSS3 详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性面板–彩色面板
在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

☑ panel-primary：重点蓝

☑ panel-success：成功绿

☑ panel-info:信息蓝

☑ panel-warning：警告黄

☑ panel-danger：危险红
图解CSS3 … 作者：大漠 … … … … … 面板–面板中嵌套表格
面板中嵌套表格（一）图解CSS3 详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性＃我的书发布时间 1 《图解CSS3》 2014-07-10 作者：大漠面板–面板中嵌套列表组
图解CSS3 详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性我是列表项我是列表项我是列表项作者：大漠导入JavaScript插件动画过渡（Transitions）
Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

☑ 调用统一编译的bootstrap.js；

☑ 调用单一的过渡动画的JavaScript插件文件transition.js 默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

☑ 模态弹出窗（Modal）的滑动和渐变效果；

☑ 选项卡（Tab）的渐变效果；

☑ 警告框（Alert）的渐变效果；

☑ 图片轮播（Carousel）的滑动效果。
点击我 ×Close 模态弹出窗标题模态弹出窗主体内容关闭保存 $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); }); 模态弹出框（Modals）
在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。如下图所示：
模态弹出框–实现原理解析（一）通过data-target触发 ×Close 模态弹出窗标题模态弹出窗主体内容关闭保存模态弹出框–触发模态弹出窗2种方法通过链接href属性触发 ×Close 模态弹出窗标题模态弹出窗主体内容关闭保存通过data-target触发 ×Close 模态弹出窗标题模态弹出窗主体内容关闭保存模态弹出框–为弹出框增加过度动画效果
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。
通过data-target触发 ×Close 模态弹出窗标题模态弹出窗主体内容关闭保存模态弹出框–模态弹出窗的使用（JavaScript触发）点击我 ×Close 模态弹出窗标题模态弹出窗主体内容关闭保存 $(function(){ $(".btn").click(function(){ $("#themodal").modal(); }); });
插件这一章，路漫漫其修远兮
选项卡(Tabs）
公告规则论坛安全公益公告内容面板规则内容面板论坛内容面板安全内容面板公益内容面板选项卡–为选择卡添加fade样式
为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示。
公告规则论坛安全公益公告内容面板规则内容面板论坛内容面板安全内容面板公益内容面板选项卡–胶囊式选项卡（nav-pills）
在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle=”tab”换成data-toggle=”pill”。
娱乐房产国内国外娱乐内容面板房产内容面板国内内容面板国外内容面板提示框(Tooltip)
提示框–JS触发提示框方法
Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

最简单的触发方式如下：
$(function(){ $('[data-toggle="tooltip"]').tooltip(); });
除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如：
$(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); }); 触发提示框方法 body { padding: 100px; } .btn { margin: 20px 10px 20px; } 按钮做的提示框提示框居左提示框在顶部提示框在底部提示框居右链接制作的提示框提示框居左提示框在顶部提示框在底部提示框居右我是提示框我是提示框2 $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); }); 提示框–其他的自定义属性
除此之外，提示框还有其他的自定义属性，每个自定义属性都具自身存在的意义，如下表所示：

JS Bin body { padding: 100px; } .btn { margin: 20px 10px 20px; } data-animation="true" data-animation="true" data-html="true" data-html="true" data-trigger="click" data-trigger="click" data-delay data-delay $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 提示框–JS设置参数方法
除了在 html 代码中使用 data- 设置提示框参数，还可以使用 JavaScript 来设置提示框参数，主要包括：
我是提示框我是提示框 $(function(){ $('#myTooltip1').tooltip({ title:"我是一个提示框，我在顶部出现", placement:"top" }); }); 弹出框（Popover）
弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多，如下所示：不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。
弹出框–弹出框的结构弹出框的结构 body{ padding: 5%; } 猛击我吧猛击我吧 $(function(){ $('[data-toggle="popover"]').popover(); }); 弹出框–自定义结构属性
自定义结构属性 body{ padding: 10px; } 猛击我吧 $(function(){ $('[data-toggle="popover"]').popover(); }); 弹出框–提示框和弹出框的异同
从之前的学习可知，弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。其实两插件也有略微的不同：
提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content) 警告框（Alert）
注意警示框和警告框的不同警告框插件是在警示框的基础上添加单击 X 号能关闭警告框的功能。
警告框（Alert）示例 × 恭喜您操作成功！警告框–使用声明式触发警告框
三种方式：第三种方式不能消失关闭按钮

警告框--使用声明式触发警告框使用×作为关闭按 × 恭喜您操作成功！使用a标签作为关闭按钮谨防被骗请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人... 关闭使用button按钮作为关闭按钮谨防被骗请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人... 关闭警告框–JavaScript触发警告框
除了通过自定义data-dismiss=”alert”属性来触发警告框关闭之外，还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。如下所示：

html代码:
谨防被骗
请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...
关闭
通过下面的JavaScript代码来触发：
$(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); }); 按钮插件–按钮加载状态
点击前：点击后：

通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下加载ata-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示：
$(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); }); 按钮插件–模拟单选择按钮
男女未知按钮插件–模拟复选按钮
电影音乐游戏摄影手风琴（Collapse）
Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题，可以让其对应的内容显示或隐藏
标题一标题一对应的内容标题二标题二对应的内容标题三标题三对应的内容图片轮播–轮播图片的设计
一个轮播图片主要包括三个部分：

☑ 轮播的图片

☑ 轮播图片的计数器

☑ 轮播图片的控制器

一.设计轮播图片的容器。

二.设计轮播图片计数器
1 2 3 4 5 ... body{padding:10px;margin:10px;} 1 2 3 4 5
三.设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：
1 … …
四.设计轮播图片控制器。通过两个 a 链接然后在内部定义要显示的小图标，一个是向前，一个是向后
… … 图片轮播–声明式触轮播图的播放（一）
触发轮播图的播放方法也有两种，一种是声明式，另外一种是JavaScript方式。首先来看声明式方法。

声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种：
data-ride 属性：取值 carousel，并且将其定义在 carousel 上。 data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。 data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。 data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。
在这里需要注意可以为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。
... body{padding:10px;margin:10px;} 图片标题1 描述内容1... 图片标题2 描述内容2... 图片标题3 描述内容3... 图片轮播–声明式触轮播图的播放（二）
除了data-ride=”carousel”、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性：如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。
...... body{padding:10px;margin:10px;} 1 2 3 图片标题1 描述内容1... 图片标题2 描述内容2... 图片标题3 描述内容3... 固定定位（Affix）
Affix 一词不好翻译，根据其效果，我将其译为固定定位。Affix 插件是从 Bootstrap V2.1 版本新增的一个插件，其主要功能就是通过插件给某个元素（需要固定的元素）添加或删除 affix 类名，实现元素在浏览器窗口中固定（元素带有 affix 类名固定）和不固定（元素不带有 affix 类名）的效果。

Affix 效果常见的有以下三种：

☑ 顶部固定

☑ 侧边栏固定

☑ 底部固定
Bootstrap 附加导航（Affix）插件 /* Custom Styles */ ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0; border-top: 1px solid #ddd; } ul.nav-tabs li:first-child{ border-top: none; } ul.nav-tabs li a{ margin: 0; padding: 8px 16px; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px solid #0088cc; } ul.nav-tabs li:first-child a{ border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; /* Set the top position of pinned element */ } Bootstrap Affix 第一部分第二部分第三部分第四部分第五部分第一部分 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula. Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. 第二部分 Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat. Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue. 第三部分 Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris. Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus. Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti. 第四部分 Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero. Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Phasellus fermentum, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis in orci. Quisque vestibulum sem nisl, vel congue leo dictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id. Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa. 第五部分 Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat. Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum. Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero. Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo. Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.

【本文地址】

Bootstrap 笔记

Bootstrap 笔记

今日新闻

推荐新闻