Bootstrap资料整理

最新推荐文章于 2023-03-07 20:24:49 发布

JourneyX

最新推荐文章于 2023-03-07 20:24:49 发布

阅读量2.1k

点赞数 8

分类专栏： JS 文章标签： bootstrap JS编程脚本语言 HTMLWeb知识整理 CSS样式

本文链接：https://blog.csdn.net/journeyx/article/details/53232286

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPEhtml>

<head>

<metacharset="UTF-8">

<metaname="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">

<title>输入框和导航组件</title>

<linkrel="stylesheet" href="css/bootstrap.min.css">

<style>

</style>

</head>

<scriptsrc="js/jquery.min.js"></script>

<scriptsrc="js/bootstrap.min.js"></script>

</body>

</html>

1 Bootstrap 介绍

【学习要点：概述、特点、结构】

1.1 Bootstrap 概述

Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于

HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地

构建基于PC 及移动端设备的Web 页面需求。

--为了解决前端开发任务中的协作统一问题，由最初的CSS 驱动项目发展成为内置很多JavaScript 插件和图标的多功能Web 前端

的开源框架。

--Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC 端、PAD以及手机移动端的页面访问。

Bootstrap 下载及演示：

国内文档翻译官网：http://www.bootcss.com

瓢城Web 俱乐部官网：http://www.ycku.com

1.2 Bootstrap 特点

【跨设备、跨浏览器】【响应式布局】【提供的全面的组件】【内置jQuery 插件】【支持HTML5、CSS3】【支持LESS 动态样式】

1.3 Bootstrap 结构

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个css 后缀的文件，其中包含min字样的，是压缩版本，一般使用

这个；不包含的属于没有压缩的，可以学习了解css 代码的文件；而map 后缀的文件则是

css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的js 文件。

3.fonts 目录包含了不同后缀的字体文件。

2 排版样式

【学习要点：页面排版】：《学习一下Bootstrap 全局CSS 样式中的排版样式，包括了标题、页面主体、对齐、列表等常规内容。》

2.1 页面排版

2.1.1 页面主体

1. Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；

<p>段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。

2.1.2 标题

2. 从h1 到h6《36px、30px、24px、18px、14px、12px》

并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体

<spanclass="h1">Bootstrap</span>

<h2>Bootstrap 框架<small>Bootstrap小标题</small></h2>

2.1.3 内联文本元素

//添加标记，<mark>元素或.mark 类

<p>Bootstrap<mark>框架</mark></p>

//各种加线条的文本

<del>Bootstrap 框架</del>//删除的文本

<s>Bootstrap 框架</s>//无用的文本

<ins>Bootstrap 框架</ins>//插入的文本

<u>Bootstrap 框架</u>//效果同上，下划线文本

//各种强调的文本

<small>Bootstrap 框架</small>//标准字号的85%

<strong>Bootstrap 框架</strong>//加粗700

<em>Bootstrap 框架</em>//倾斜

2.1.4 对齐

<pclass="text-left">Bootstrap 框架</p> //居左

<pclass="text-center">Bootstrap 框架</p> //居中

<pclass="text-right">Bootstrap 框架</p> //居右

<pclass="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳

<p class="text-nowrap">Bootstrap框架</p> //不换行

2.1.5 大小写

//设置英文文本大小写

<pclass="text-lowercase">Bootstrap 框架</p> //小写

<pclass="text-uppercase">Bootstrap 框架</p> //大写

<pclass="text-capitalize">Bootstrap 框架</p>//首字母大写

2.1.6 缩略语

//缩略语

Bootstrap<abbrtitle="Bootstrap" class="initialism">框架</abbr>

2.1.7 地址文本

//设置地址，去掉了倾斜，设置了行高，底部20px

<strong>Twitter,Inc.</strong><br>

795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbrtitle="Phone">P:</abbr> (123) 456-7890

</address>

2.1.8 引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距

Bootstrap 框架

</blockquote>

//反向

<blockquoteclass="blockquote-reverse ">

Bootstrap 框架

</blockquote>

2.1.9 列表排版

//移出默认样式

</ul>

//设置成内联

</ul>

//水平排列描述列表

<dt>Bootstrap</dt>

<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>

</dl>

2.1.10 代码

//内联代码

//用户输入

press <kbd>ctrl + ,</kbd>

//代码块

<pre><p>Pleaseinput...</p></pre>

3 表格和按钮

【学习要点：表格、按钮】

3.1 表格：table

【基本格式：class="table"】

【条纹状表格：class="table table-striped"】

【带边框的表格：class="table table-bordered"】

【悬停鼠标：class="table table-hover"】

【状态类：active、success、info、warning、danger】

//可以单独设置每一行的背景样式

【隐藏某一行：class="sr-only"】：<trclass="sr-only">

【响应式表格：class="table-responsive"】

//表格父元素设置响应式，小于768px 出现边框

3.2 按钮

1.可作为按钮使用的标签或元素

//转化成普通按钮

<button class="btnbtn-default">Button</button>

注意事项有三点：

(1).针对组件的注意事项

虽然按钮类可以应用到<a> 和<button> 元素上，但是，导航和导航条组件只支持

<button> 元素。

(2).链接被作为按钮使用时的注意事项：

如果<a> 元素被作为按钮使用-- 并用于在当前页面触发某些功能-- 而不是用于

链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button" 属性。

(3).跨浏览器展现：

我们总结的最佳实践是：强烈建议尽可能使用<button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

另外，我们还发现了Firefox <30 版本的浏览器上出现的一个bug，其表现是：阻

止我们为基于<input> 元素所创建的按钮设置line-height 属性，这就导致在

Firefox 浏览器上不能完全和其他按钮保持一致的高度。

2.预定义样式：+btn+

【btn-default：默认样式】

【btn-success：成功样式】

【btn-info：一般信息样式】

【btn-warning：警告样式】

【btn-danger：危险样式】

【btn-primary：首选项样式】

【btn-link：链接样式】

3.3 尺寸大小

【从大到小的尺寸】+btn+

【class="btn btn-lg"、class="btn"、class="btnbtn-sm"、class="btn btn-xs"】

3.4 块级按钮

3. 【btn-block】

//块级换行

<button class="btnbtn-block">Button</button>

3.5 激活状态：【active】

//激活按钮

<button class="btnactive">Button</button>

6.禁用状态

//禁用按钮

<button class="btn activedisabled">Button</button>

4 表单和图片

【学习要点：表单、图片】

《主要学习一下Bootstrap 表单和图片功能，通过内置的CSS 定义，显示各种丰富的效果。》

4.1 表单

【1.基本格式：class="form-control"

//实现基本的表单样式

<form>

<input type="email"class="form-control"

placeholder="请输入您的电子邮件">

</div>

</form>

】

【2.内联表单:其中的内容一行显示，form-inline样式可多用【form-inline】

//让表单左对齐浮动，并表现为inline-block内联块结构

注：当小于768px，会恢复独占样式

】

【3.表单合组：【input-group-addon】

//前后增加片段

<divclass="input-group-addon">￥</div>

<divclass="input-group-addon">.00</div>

</div>

】

【4.水平排列【form-horizontal】

//让表单内的元素保持水平排列

<formclass="form-horizontal">

<input type="email"class="form-control" placeholder="请输

入您的电子邮件">

</div>

</form>

注：这里用到了col-sm 栅格系统，后面章节会重点讲解，而control-label 表示和

父元素样式同步。】

【5.复选框和单选框：

//设置复选框，在一行

<label>

<input type="checkbox">体育

</label>

</div>

//设置禁用的复选框【disabled】

<label>

<input type="checkbox"disabled>音乐

</label>

</div>

//设置内联一行显示的复选框【checkbox-inline】

<labelclass="checkbox-inline">

<input type="checkbox">体育

</label>

<input type="checkbox" disabled>音乐

</label>

//设置单选框：【radio】

<label>

<input type="radio"name="sex" disabled>男

</label>

</div>

】

【6.下拉列表

//设置下拉列表

<selectclass="form-control">

</select>

】

【

7.校验状态【has-error：错误状态、has-success：成功状态、has-warning：警告状态】

//设置为错误状态

】

【8.添加额外的图标【glyphicon-ok：成功状态、glyphicon-warning-sign：警告状态、glyphicon-remove：错误状态】

//文本框右侧内置文本图标

</div>

】

【9.控制尺寸

//从大到小

注：也可以设置父元素form-group-lg、form-group-sm，来调整。

】

4.2 图片

【Bootstrap 提供了一些丰富的图片样式供开发者使用】

1.图片形状

//三种形状

//响应式图片

5 栅格系统

【学习要点：移动设备优先、布局容器、栅格系统】

《主要学习一下Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流式栅格系统。》

5.1 移动设备优先

在HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏

幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

maximum-scale=1, user-scalable=no">

==布局容器：

//固定宽度

...

</div>

//100%宽度

<divclass="container-fluid">

...

</div>

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)

与列(column)的组合来创建页面布局。工作原理如下：

1.“行（row）”必须包含在.container（固定宽度）或.container-fluid （100%

宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

2.通过“行（row）”在水平方向创建一组“列（column）”。

3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为

行（row）”的直接子元素。

4.类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

Bootstrap 源码中定义的mixin 也可以用来创建语义化的布局。

5.通过为“列（column）”设置padding 属性，从而创建列与列之间的间隔（gutter）。

通过为.row 元素设置负值margin 从而抵消掉为.container 元素设置的padding，

也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

6.负值的margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成

一行。

7.栅格系统中的列是通过指定1 到12 的值来表示其跨越的范围。例如，三个等宽的列

可以使用三个.col-xs-4 来创建。

8.如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”

所在的元素将被作为一个整体另起一行排列。

9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆

盖栅格类。因此，在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分

界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*

不存在，也影响大屏幕设备。

//创建一个响应式行

...

</div>

//为了显示明显的CSS

.a {

height: 100px;

background-color: #eee;

border:1px solid #ccc;

}

//总列数都是12，每列分配多列

</div>

</div>

5.2 栅格参数表

如上图所示，栅格系统最外层区分了四种宽度的浏览器：

【超小屏(<768px)《自动》：col-xs-】《超小屏幕-手机（<768px）》：最大列宽-自动

【小屏(>=768px)《阀值：750px》：col-sm-】《小屏幕：平板(>=768px)》：最大列宽-~62px;

【中屏(>=992px)《970px》：col-md-】《中屏：桌面显示器(>=992px)》：最大列宽-~81px;

【大屏(>=1200px)《1170px》：col-lg-】《大屏:大桌面显示器(>=1200px)》：最大列宽-~97px;

《而内层.container 容器的自适应宽度为：自动、750px、970px 和1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。》

【公共属性：《列数(column:12)》、槽(gutter)宽:30px(左右15px)、可嵌套:是、偏(offsets)移:是、列排序:是】

//四种屏幕分类全部激活

</div>

//有时我们可以设置列偏移，让中间保持空隙【col-md-offset-1】

</div>

//也可以嵌套，嵌满也是12 列

</div>

11-12

</div>

//可以把两个列交换位置，push 向左移动，pull 向右移动【col-md-push-3】

</div>

6 辅组类和响应式工具

【学习要点：辅组类、响应式工具】

《主要学习一下Bootstrap 的辅组类和响应式工具，辅助类提供了一组类来辅组页面设计，而响应式工具则利用媒体查询显示或隐藏某些内容。》

==辅助类：《Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。》

6.1 情景文本颜色

【text-muted：柔和灰】

【text-primary：主要蓝】

【text-success：成功绿】

【text-info：信息蓝】

【text-warning：警告黄】

【text-danger：危险红】

6.2 情景背景色

【bg-primary：主要蓝】

【bg-success：成功绿】

【bg-info：信息蓝】

【bg-warning：警告黄】

【bg-danger：危险红】

6.3 关闭按钮

6.4 三角符号

<spanclass="caret"></span>

6.5 快速浮动

注：这个浮动其实就是float，只不过使用了!important 加强了优先级。

6.6 块级居中

注：就是margin:x auto；并且设置了display:block;。

6.7 清理浮动

<divclass="clearfix"></div>

注：这个div 可以放在需要清理浮动区块的前面即可。

6.8 显示和隐藏

<divclass="hidden">hidden</div>

==响应式工具：

《在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。》

//超小屏幕激活显示

<div class="visible-xs-blocka">Bootstrap</div>

//超小屏幕激活隐藏

<div class="hidden-xsa">Bootstrap</div>

注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。

【display 属性：block--此元素将显示为块级元素，此元素前后会带有换行符。】

【display 属性：inline-block--行内块元素】

【display 属性：inline--默认。此元素会被显示为内联元素，元素前后没有换行符。】

7 图标菜单按钮组件

【学习要点：小图标组件、下拉菜单组件、按钮组组件、按钮式下拉菜单】

7.1 小图标组件

《Bootstrap 提供了免费的263 个小图标（数了两次），具体可以参考中文官网的组件链接：

http://v3.bootcss.com/components/#glyphicons。部分图标如下：》

可以使用<i>或<span>标签来配合使用，具体如下：

//使用小图标

//也可以结合按钮

</button>

7.2 下拉菜单组件

《下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。》

下拉菜单

<spanclass="caret"></span>

</button>

</ul>

</div>

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置

data-toggle="dropdown"才能有效。对于菜单部分，设置class="dropdown-menu"才能

自动隐藏并添加固定样式。设置class="caret"表示箭头，可上可下。

//设置向上触发

//菜单项居右对齐，默认值是dropdown-menu-left

//设置菜单的标题，不要加超链接

<liclass="dropdown-header">网站导航</li>

//设置菜单的分割线

<liclass="divider"></li>

//设置菜单的禁用项

//让菜单默认显示

7.3 按钮组组件

《按钮组就是多个按钮集成在一个容器里形成独有的效果。》

//基本格式

</div>

//将多个按钮组整合起来便于管理

</div>

</div>

//设置按钮组大小

</div>

//嵌套一个分组，比如下拉菜单

<button class="btn btn-defaultdropdown-toggle"

data-toggle="dropdown">

下拉菜单

<spanclass="caret"></span>

</button>

</ul>

</div>

注意：这里<div>中并没有实现class="dropdown"，通过源码分析知道嵌套本身已经

有定位就不需要再设置。而右边的圆角只要多加一个class="dropdown-toggle"即可。

//设置按钮组垂直排列

<divclass="btn-group-vertical">

//设置两端对齐按钮组，使用<a>标签

<divclass="btn-group-justified">

</div>

7.4 按钮式下拉菜单

这个下拉菜单其实和第二个知识点一样，只不过，这个是在群组里，不需要<div>声明

class="dropdown"。

//群组按钮下拉菜单

<button type="button"class="btn btn-default dropdown-toggle"

data-toggle="dropdown">

下拉菜单

<spanclass="caret"></span>

</button>

</ul>

</div>

//分裂式按钮下拉菜单

<button type="button"class="btn btn-default dropdown-toggle"

data-toggle="dropdown">

<spanclass="caret"></span>

</button>

</ul>

</div>

//向上弹出式

8 输入框和导航组件

【学习要点：输入框组件、导航组件、导航条组件】：《主要学习一下Bootstrap 的两个个组件功能：输入框组件和导航导航条组件。》

8.1 输入框组件

《文本输入框就是可以在<input>元素前后加上文字或按钮，可以实现对表单控件的扩展。》

//在左侧添加文字

<spanclass="input-group-addon">@</span>

</div>

//在右侧添加文字

<spanclass="input-group-addon">@163.com</span>

</div>

//在两侧添加文字

<spanclass="input-group-addon">$</span>

<spanclass="input-group-addon">.00</span>

</div>

//设置尺寸，另外三种分别是默认、xs、sm

//左侧使用复选框和单选框

<spanclass="input-group-addon"><inputtype="checkbox"></span>

</div>

<spanclass="input-group-addon"><inputtype="radio"></span>

</div>

//左侧使用按钮

<spanclass="input-group-btn">

</span>

</div>

//左侧使用下拉菜单或分列式

<spanclass="input-group-btn">

<button class="btn btn-defaultdropdown-toggle"

data-toggle="dropdown">

8.2 下拉菜单

</button>

<liclass="dropdown-header">网站导航</li>

</ul>

</span>

</div>

8.3 导航组件

Bootstrap 提供了一组导航组件，用于实现Web 页面的栏目操作。

//基本导航标签页

</ul>

//胶囊式导航

//垂直胶囊式导航

//导航两端对齐

//禁用导航中的项目

//带下拉菜单的导航

下拉菜单

<spanclass="caret"></span>

</a>

</ul>

</li>

</ul>

8.4 导航条组件

导航条是网站中作为导航页头的响应式基础组件。

//基本格式

...

</nav>

//反色调导航

...

</nav>

//基本导航条，包含标题和列表

</div>

</ul>

</div>

</nav>

//导航条中使用表单

<spanclass="input-group-btn">

</span>

</div>

</form>

//导航中使用按钮

//导航中使用对齐方式，left 和right

//导航中使用一段文本

<p class="navbar-text">我是一段文本</p>

//非导航链接，一般需要置入文本区域内

<a href="#"class="navbar-link">非导航链接</a>

//将导航固定在顶部，下面的内容会自动上移

//将导航补丁在底部

//静态导航，和页面等宽的导航条，去掉了圆角

9 路径分页标签和徽章组件

【学习要点：路径组件、分页组件、标签组件、徽章组件】

9.1 路径组件

路径组件也叫做面包屑导航。

//面包屑导航

<li class="active">韩版2015 年羊绒毛衣</li>

</ol>

9.2 分页组件

分页组件可以提供带有展示页面的功能。

//默认分页

</ul>

//首选项和禁用

//设置尺寸，四种lg、默认、sm 和xs

//翻页效果

</ul>

//对齐翻页链接

</ul>

//翻页项禁用

9.3 标签

//在文本后面带上标签

//不同色调的标签

9.4 徽章

//未读信息数量徽章

//按钮中使用徽章

提交<span class="badge">3</span>

</button>

//激活状态自动适配色调

</li>

</ul>

10 巨幕页头缩略图和警告框组件

【学习要点：巨幕组件、页头组件、缩略图组件、警告框组件】

10.1 巨幕组件

【巨幕组件主要是展示网站的关键性区域。】

//在固定的范围内，有圆角

<p>这是一个学习性的网站！</p>

</div>

//100%全屏，没有圆角

<p>这是一个学习性的网站！</p>

</div>

10.2 缩略图组件

//缩略图配合响应式

</div>

</div>

</div>

</div>

//自定义内容

<p>这是一个图片结合文字的缩略图</p>

</div>

<p>这是一个图片结合文字的缩略图</p>

</div>

<p>这是一个图片结合文字的缩略图</p>

</div>

<p>这是一个图片结合文字的缩略图</p>

</div>

10.3 警告框组件

警告框组件是一组预定义消息。

//基本警告框

<div class="alertalert-success">Bootstrap</div>

<div class="alertalert-info">Bootstrap</div>

<div class="alert alert-warning">Bootstrap</div>

<div class="alertalert-danger">Bootstrap</div>

//带关闭的警告框

Bootstrap

</button>

</div>

//自动适配的超链接

Bootstrap，请到官网 <ahref="#" class="alert-link">下载</a>

</div>

11 进度条媒体对象和Well 组件

【学习要点：Well 组件、进度条组件、媒体对象组件】

11.1 Well 组件

这个组件可以实现简单的嵌入效果。

//嵌入效果

Bootstrap

</div>

//有lg 和sm 两种可选值

Bootstrap

</div>

11.2 进度条组件

进度条组件为当前工作流程或动作提供时时反馈。

//基本进度条

</div>

//最低值进度条

</div>

//结合情景的进度条

<div class="progress-barprogress-bar-success"

style="min-width:20px;width:60%">60%</div>

</div>

//条纹状，IE10+支持

<div class="progress-barprogress-bar-success

progress-bar-striped"style="min-width:20px;width:60%">60%</div>

</div>

//动画效果

<div class="progress-barprogress-bar-success progress-bar-striped

active"style="min-width:20px;width:60%">60%</div>

</div>

//堆叠效果

<div class="progress-barprogress-bar-success"

style="min-width:20px;width:35%">35%</div>

<div class="progress-barprogress-bar-warning"

style="min-width:20px;width:20%">20%</div>

<div class="progress-barprogress-bar-danger"

style="min-width:20px;width:10%">10%</div>

</div>

11.3 媒体对象组件

《媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。》

//基本实例

</div>

<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老

的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17

种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；

脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；

羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个

种的主要区别在于头部色型和个体大小。</p>

</div>

//媒体对象列表

//将每个media 存放在media-body内后即可

...代码较多，具体看视频

</li>

</ul>

12 列表组面板和嵌入组件

【学习要点：列表组组件、面板组件、响应式嵌入组件】

12.1 列表组组件

列表组组件用于显示一组列表的组件。

//基本实例

<liclass="list-group-item">1.这是起始</li>

<li class="list-group-item">2.这是第二条数据</li>

<liclass="list-group-item">3.这是第三排信息</li>

<liclass="list-group-item">4.这是末尾</li>

</ul>

//列表项带勋章

<liclass="list-group-item">1.这是起始

<spanclass="badge">10</span></li>

//链接和首选

<a href="#" class="list-group-itemactive">1.这是起始

<spanclass="badge">10</span></a>

<a href="#"class="list-group-item">2.这是第二条数据</a>

<a href="#"class="list-group-item">3.这是第三排信息</a>

</div>

//按钮式列表

<button class="list-group-itemactive">1.这是起始<span

class="badge">10</span></button>

<buttonclass="list-group-item">2.这是第二条数据</button>

<buttonclass="list-group-item">3.这是第三排信息</button>

<buttonclass="list-group-item">4.这是末尾</button>

</div>

//设置项目被禁用

class="list-group-item disabled"

//情景类

3.这是第三排信息</li>

//定制内容

<pclass="list-group-item-text">这里是相关内容详情！</p>

</a>

<pclass="list-group-item-text">这里是相关内容详情！</p>

</a>

<pclass="list-group-item-text">这里是相关内容详情！</p>

</a>

</div>

12.2 面板组件

面板组件就是一个存放内容的容器组件。

//基本实例

这里是详细内容区！

</div>

//带标题容器的面板

面板标题

</div>

这里是详细内容区！

</div>

//也可以设置标题元素

</div>

//带注脚的面板

这里是底部

</div>

//情景效果：default、success、info、warning、danger、primary

//表格类面板

表格标题

</div>

<p>这里是表格标题的详细内容！</p>

</div>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

//列表类面板

表格标题

</div>

<p>这里是表格标题的详细内容！</p>

</div>

<liclass="list-group-item">1.这里是首页</li>

<liclass="list-group-item">2.这里是第二个项目</li>

<liclass="list-group-item">3.这里是第三个项目</li>

<liclass="list-group-item">4.这里是第四个项目</li>

</ul>

</div>

12.3 响应式嵌入组件

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。

这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。

//16:9 响应式：

src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI

d=50797543_05_05_99/v.swf"type="application/x-shockwave-flash"

allowscriptaccess="always"allowfullscreen="true" wmode="opaque"></embed>

</div>

//4:3 响应式：

src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI

d=50797543_05_05_99/v.swf"type="application/x-shockwave-flash"

allowscriptaccess="always"allowfullscreen="true" wmode="opaque"></embed>

</div>

13 模态框插件

【学习要点：基本使用、用法说明】

《主要学习一下Bootstrap 中的模态框插件，这是一款交互式网站非常常见的弹窗功能插件。》

13.1 基本使用

使用模态框的弹窗组件需要三层div 容器元素，分别为modal(模态声明层)、dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别

为header(头部)、body(主体)、footer(注脚)。

//基本实例

<button type="button"class="close"

data-dismiss="modal">

</button>

</div>

<p>暂时无法登录会员</p>

</div>

</div>

《如果想让模态框自动隐藏，然后通过点击按钮弹窗，那么需要做如下操作。》

//模态框去掉show，增加一个id

//点击触发模态框显示

<button class="btn btn-primarybtn-lg"

data-toggle="modal"data-target="#myModal">

点击弹窗

</button>

//弹窗的大小有三种，默认情况下是正常，还有lg(大)和sm(小)

//可设置淡入淡出效果

//在主体部分使用栅格系统中的流体

<divclass="container-fluid">

<divclass="col-md-4">1</div>

</div>

13.2 用法说明

《基本使用介绍结束之后，我们就来看下插件的各种重要用法。所有的插件，都是基于JavaScript/jQuery 的。

那么，就有四个要素：用法、参数、方法和事件。》

1.用法：

第一种：可以通过data 属性

//data-toggle

data-toggle="modal"data-target="#myModal"

data-toggle 表示触发类型

data-target 表示触发的节点

如果不是使用<button>，而是<a>，其中data-target 也可以使用href="#myModal"取代。

当然，我们建议使用data-target。除了data-toggle 和data-target 两个声明属性外，还有一些可以用选项。

13.3 参数

《可以通过在HTML 元素上设置data-*的属性声明来控制效果。》

【属性名称】【类型】【默认值】【描述】

【data---backdrop----布尔值或'static'----true---

默认值true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；

如果为false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；

如果是字符串'static'，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。】

【data-keyboard---布尔值---true---

如果是true，按esc 键会关闭窗口；

如果是false，按esc 键会不会关闭。】

【data-show---布尔值---true

如果是true，初始化时，默认显示；

如果是false，初始化时，默认隐藏。】

【href---url路径---空值---

如果值不是以#号开头，则表示一个url 地址，加载url 内容到modal-content容器里，并只加载一次。

如果是#号，就是取代data-target的方法。】

//空白背景且点击不关闭

data-backdrop="false"

//按下esc 不关闭

data-keyboard="false"

//初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。

data-show="false"

//加载一次index.html 到容器内

href="index.html"

《当然，也可以在JavaScript 直接设置。》

【属性名称】【类型】【默认值】【描述】

【data---backdrop----布尔值或'static'----true---

默认值true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；

如果为false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；

如果是字符串'static'，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。】

【data-keyboard---布尔值---true---

如果是true，按esc 键会关闭窗口；

如果是false，按esc 键会不会关闭。】

【data-show---布尔值---true

如果是true，初始化时，默认显示；

如果是false，初始化时，默认隐藏。】

【remote---url路径---空值---

远程获取指定内容填充到modal-content容器内。

】

//通过jQuery 方式声明

$('#myModal').modal({

show : true,

backdrop : false,

keyboard : false,

remote : 'index.html',

});

13.4 方法

《如果说，默认不显示弹窗，那么怎么才能通过点击前后弹窗呢？》

【参数名称】【使用方法】【描述】

【toggle----.modal('toggle');----触发时，反转切换弹窗状态】

【show---.modal('show');-----触发时，显示弹窗】

【hide---.modal('hide');----触发时，关闭弹窗】

//点击显示弹窗

$('#btn').on('click', function () {

$('#myModal').modal('show');

});

13.5 事件

《模态框支持4 种时间，分别对应弹出前、弹出后、关闭前和关闭后。》

【事件类型】【描述】

【show.bs.modal-----在show 方法调用时立即触发。】

【shown.bs.modal----在模态框完全显示出来，并且等CSS 动画完成之后触发。】

【hide.bs.modal-----在hide 方法调用时，但还未关闭隐藏时触发。】

【hidden.bs.modal---在模态框完全隐藏之后，并且等CSS 动画完成之后触发。】

$('#myModal').on('show.bs.modal', function() {

alert('在show 方法调用时立即触发！');

});

$('#myModal').on('shown.bs.modal', function() {

alert('在模态框显示完毕后触发！');

});

$('#myModal').on('hide.bs.modal', function() {

alert('在hide 方法调用时立即触发！');

});

$('#myModal').on('hiden.bs.modal', function() {

alert('在模态框显示完毕后触发！');

});

$('#myModal').on('loaded.bs.modal',function () {

alert('远程数据加载完毕后触发！');

});

JourneyX

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap资料整理

输入框和导航组件 1 Bootstrap 介绍【学习要点：概述、特点、结构】 1.1 Bootstrap 概述Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优
复制链接

扫一扫