锐客网

  1. 首页 > it技术 > >

Bootstrap学习&资料整理

Bootstrap更倾向于Web端的界面显示，就算用在手机上，那也是手机Web
而ionic则是用hybrid开发的手机原生App
二者使用场景不同，应该不适合同时使用
要求时间：2天
第一天
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。2011年开源
简介
  • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
  • CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  • 组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
  • JavaScript插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap 插件 部分详细讲解。
  • 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery插件来得到您自己的版本。
搭建Bootstrap环境

link bootstrap的css
script上JQuery库文件
script上Bootstrap库文件
一定要先JQuery，再Bootstrap，因为Bootstrap里会调用JQuery。
Bootstrap可视化布局 ## –不知道怎么用
Less 教程 –不知道干什么用的 让CSS可编程？
Bootstrap是用Less开发的，它可以自定义CSS，还是要学会的。
Bootstrap CSS 概览 Bootstrap使用了一些html5和css，需要使用html5文档类型（Doctype）
所以在需要在html标签前声明文档类型

移动设备优先是 Bootstrap 3 的最显著的变化。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签
or

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
响应式图像
Bootstrap学习&资料整理
文章图片
.img-responsive { display: inline-block; // 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。 height: auto; // 相关元素的高度取决于浏览器 max-width: 100%; // 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。 }

全局显示、排版和链接
排版 没太懂
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
链接样式 没太懂
@link-color
避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
容器 Container
// Bootstrap 3 的 container class 用于包裹页面上的内容 "container"> ....container { padding-right: 15px; padding-left: 15px; margin-right: auto; // 浏览器决定 margin-left: auto; // 浏览器决定 }

// 这部分没懂 请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。.container:before, .container:after { display: table; content: " "; }这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。.container:after { clear: both; }它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。@media (min-width: 768px) { .container { width: 750px; }

Bootstrap 浏览器/设备支持
Chrome Firefox IE Opera Safari
Android YES YES 不适用 NO 不适用
iOS YES 不适用 不适用 NO YES
Mac OS X YES YES 不适用 YES YES
Windows YES YES YES* YES NO
移动端系统、桌面端系统
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。
Bootstrap 网格系统 Grid System
流式网格系统
视口（viewport）
...
....

Q：到底哪个是手机，col-xs? col-sm?
之所以可以动态响应屏幕尺寸，是因为媒体查询
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { … }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { … }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { … }
// 这其实是一个完整的区间 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

响应式的列重置没懂

偏移列
col-md-offset-3
嵌套列
col里加row，row里面还有col
列排序
.col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
// shadow的参数还不太懂
我在右边

Bootstrap 排版
排版什么意思呢，就是美化html文档。
副标题
我是标题1 h1. 我是副标题1 h1

强调
HTML 的默认强调标签 （设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。
// Bootstrap的强调 向左对齐文本
居中对齐文本
向右对齐文本
本行内容是减弱的
本行内容带有一个 primary class
本行内容带有一个 success class
本行内容带有一个 info class
本行内容带有一个 warning class
本行内容带有一个 danger class

缩写
// 鼠标停留 显示title内容 WWW
RSS

地址 标准的联系方式部分格式
Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890
Full Name
mailto@somedomain.com

引用 Blockquote
// 向右对齐的引用 这是一个带有源标题的引用。 Someone famous in Source Title // cite表示斜体

列表
未定义样式列表
  • Item 1
  • Item 2
  • Item 3
  • Item 4
内联列表
  • Item 1
  • Item 2
  • Item 3
  • Item 4
定义列表
Description 1
Item 1
Description 2
Item 2
水平的定义列表
Description 1
Item 1
Description 2
Item 2

更多排版类
这是个文字突出的段落。
这是个文字更小。
左对齐文本
右对齐文本
居中对齐文本
对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行
该段落不会根据屏幕的大小对超出屏幕的文字进行换行。
Lowercased text（小写文本）.
Uppercased text（大写文本）.
Capitalized text（首字母大写文本）.
设定引用右对齐
    .list-inline将所有列表项放置同一行.list-unstyledul去样式内容可滚动
    // 下面dt dd 横着排列
    Coffee
    - black hot drink
    Milk
    - white cold drink

Bootstrap 代码
ctrl + p // 组合键提示 ....
// 命令行字符风格 div // 关键字表示

这部分就是说在Bootstrap里面，代码文本怎么修饰，不是编程什么的。
Bootstrap 表格
悬停效果表格

乏善可陈
Bootstrap 表单
表单布局有三种
- 垂直表单（默认）：组件纵向排列
- 内联表单：组件横向排列
- 水平表单：内容横向，组件纵向，这个比较好看。
水平表单
// 居然没看到row 估计form-group里面有
class="form-group"> class="col-sm-10">

支持的表单控件
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
1.输入框（Input）
最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
文本框（Textarea）
复选框（Checkbox）和单选框（Radio）
选择框（Select）
// 表单框高度设置class="row"> class="col-lg-2"> // 表单框宽度设置

表单帮助文本
Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 后使用 .help-block。
帮助文本实例 一个较长的帮助文本块，超过一行， 需要扩展到下一行。本实例中的帮助文本总共有两行。

【Bootstrap学习&资料整理】就是表单输入项帮助文本，说明此输入项怎么填写。
Bootstrap 按钮



其他元素也可以当button用。
Bootstrap 图片
Bootstrap学习&资料整理
文章图片

Bootstrap学习&资料整理
文章图片
// .img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

Bootstrap 辅助类
Bootstrap有自己的色系，在很多场合会用到，下面就是设置字体样式。
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
背景也有这套色系
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
class=”center-block” 内容居中
class=”sr-only” 只是代码可见
Bootstrap 响应式实用工具
屏幕适配相关
大型 ? 在大型设备上可见

Bootstrap 布局组件 1.Bootstrap 字体图标(Glyphicons)
这就是一套Bootstrap的icon

如何设置一个button的字体颜色

相当狠的在线工具：
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
选择好随即出html代码
2.Bootstrap 下拉菜单 （Dropdowns）

3.Bootstrap 按钮组
class="btn-group">

按钮组可以和下拉菜单组合使用
4.输入框组
就是一对组合输入控件
// 加输入头
// 这两个class起作用 // 加输入Btn
// 带下拉菜单的输入框组

5.Bootstrap 导航元素 重点
典型范例 就是一个带有特殊class的无序列表

6.导航加内容绑定
要想实现绑定切换，先搭好架子，再将下面tab页设置tab-pane 属性
fade是淡出效果，让切换不会太生硬。第一个标签页必须添加 .in 类，以便淡入显示初始内容，觉得在标签里，类的顺序就是加载顺序，每个pane加上fade，第一个加上in首显。
动态标签 提示: 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。
// 上面的href对应下面的id
首页
菜鸟教程 —— 学的不仅是技术，更是梦想！！！

7.Bootstrap 导航栏 Bootstrap的一个突出特点
导航条的概念

.navbar-text 导航栏中的文本
.navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本这些组件。
导航条的位置

8.Bootstrap 面包屑导航 Breadcrumbs
表现导航路径
  1. Home
  2. 2013
  3. 十一月

9.Bootstrap 分页
    // 分页的大小

10.翻页

11.Bootstrap 标签
默认标签 主要标签 成功标签 信息标签 警告标签 危险标签

12.Bootstrap 徽章 Badges
只需要把 添加到链接、Bootstrap 导航等这些元素上即可
Mailbox 50

13.Bootstrap 超大屏幕 （Jumbotron）
就是加了个背板
欢迎登陆页面！

14.Bootstrap页面标题 Page Header
页面标题实例 子标题

* 15.Bootstrap 缩略图 *
在照片周围，套上a标签并设thumbnail类。
Bootstrap学习&资料整理
文章图片

自定义缩略图组件，可作双排缩略界面参考。
Bootstrap学习&资料整理
文章图片
缩略图标签
一些示例文本。一些示例文本。
按钮

16.Bootstrap 警告（Alerts）
成功！很好地完成了提交。
信息！请注意这个信息。
警告！请不要提交。
错误！请进行一些更改。

可取消的警告（Dismissal Alerts）
// 请确保使用带有 data-dismiss="alert" data 属性的 成功！很好地完成了提交。

警告（Alerts）中的链接
成功！很好地完成了提交。

17.Bootstrap 进度条
// progress-striped条纹效果 active动画效果
60% 完成
// 也可以堆叠 // 就是说，一个progress可以套用多个progress-bar。
40% 完成
30% 完成（信息）
20% 完成（警告）

18.Bootstrap 多媒体对象（Media Object）
.media 就是一个图片文字混排组件
Bootstrap学习&资料整理
文章图片
媒体标题 这是一些示例文本。这是一些示例文本。

.media-list 图文混排列表
  • // media内容同上

19.Bootstrap 列表组
不知道干什么用
ul li 组合
  • 免费域名注册
  • 免费 Window 空间托管
  • 图像的数量
  • 新24*7 支持
    • // 加badge
  • 每年更新成本
也可以这么写 24*7 支持自定义 div a 组合
入门网站包// 添加任意的 HTML 内容您将通过网页进行免费域名注册。

20.Bootstrap面板（Panels）
面板标题
这是一个基本的面板
面板脚注

21.Bootstrap Well
内容凹陷显示或插图效果的容器 div
只要叫上well， 就well了。
您好，我在 Well 中！
您好，我在大的 Well 中！
您好，我在小的 Well 中！

Bootstrap 插件 1.Bootstrap 插件概览
Bootstrap 自带 12 种 jQuery 插件
站点引用Bootstrap插件的方式有两种：
- 单独引用：就是单叫某一个.js文件。
- 编译（同时）引用：bootstrap.js/bootstrap.min.js 就是全都加上
所有的插件依赖于JQuery，所以必须在插件文件之前引用JQuery。
☆data属性： –>引插件之法！ 和H5里的data-*没关系。
$(document).off('.data-api') $(document).off('.alert.data-api')

编程方式的API
所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。
$(".btn.danger").button("toggle").addClass("fat") $('[rel=popover]').data('popover').// 这句不懂

Constructor属性，感觉相当于classOf
避免命名空间冲突
调用插件的 .noConflict 方法恢复其原始值
// 返回$.fn.button 之前所赋的值 var bootstrapButton = $.fn.button.noConflict() $.fn.bootstrapBtn = bootstrapButton

事件
动词不定式：事件开始时被触发
$('#myModal').on('show.bs.modal', function (e) { // 阻止模态框的显示 if (!data) return e.preventDefault() // ?哪来的data？ })

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。
2.Bootstrap过渡效果
就提一概念
Transition.js插件
3.Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体
modal.js插件
data属性很重要，在Bootstrap里通过data属性调用JQuery插件。
想起来了，前面出现的：data-toggle，下拉菜单。

step1:触发模态，data-toggle=”modal”, data-target=”#modalId”
step2:模态组件，class=”modal fade” id=”modalId”；然后是modal->modal-dialog->modal-content->modal-header~modal-body~modal-footer的从属关系。
step3:data-dismiss=”modal”，关闭模态窗口。
也可以使用JavaScript调用模态框
$('#identifier').modal(options)

class=”close”，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。通常会将关闭按钮右对齐
data-dismiss=”modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
data-toggle=”modal”，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
4.Bootstrap下拉菜单（Dropdown）插件
data属性调用：
"dropdown"> "dLabel" data-toggle="dropdown" data-target="#" href="https://www.it610.com/page.html"> 下拉菜单（Dropdown） "caret">
    ...

JavaScript调用：$('.dropdown-toggle').dropdown()

5.Bootstrap滚动监听（Scrollspy）插件
scrollspy.js插件
data属性调用
// 其实下面与上面没什么关系，下面一设data-spy="scroll"，就是该div具备了，相应上面 // href的能力，后经证实下面的data-target="#navbar-example"可以删掉。
iOS bulabula
SVN bulabula

JavaScript调用
$('body').scrollspy({ target: '.navbar-example' })

事件:实时监听滚到哪了，即看到哪了，这个应该有用。
$('#myScrollspy').on('activate.bs.scrollspy', function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("目前您正在查看 - " + currentItem); })

6.Bootstrap 标签页（Tab）插件
tab.js插件
data属性调用
如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容
HTML元素
HTML元素

要点：
标签li a href=https://www.it610.com/article/”#testId” data-toggle=”tab”;
标签页div class=”tab-content”，子div class=”tab-pane” id=”testId”
JavaScript调用 - 这部分不太懂
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') })// 通过名称选取标签页 $('#myTab a[href="https://www.it610.com/article/#profile"]').tab('show') // 选取第一个标签页 $('#myTab a:first').tab('show') // 选取最后一个标签页 $('#myTab a:last').tab('show') // 选取第三个标签页（从 0 开始索引） $('#myTab li:eq(2) a').tab('show')

事件监听
// 显示的时候 $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })// 显示完的时候 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })// 实例// 方法 $().button('toggle') $().button('loading') $().button('reset') $().button(string)// 点完Btn，1秒后，按钮显示Loading finished $(function() { $("#myButton4").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });

11.Bootstrap折叠（Collapse）插件
抽屉效果吧，不太会用。
data属性调用
// 创建可折叠的分组或折叠面板（accordion） // 简单的可折叠组件
文本

通过 JavaScript 激活 collapse 方法
$('.collapse').collapse()

选项： data-parent data-toggle
方法
$('#identifier').collapse({ toggle: false }) $('#identifier').collapse('toggle') $('#identifier').collapse('show') $('#identifier').collapse('hide')

事件
$('#identifier').on('show.bs.collapse', function () { // 执行一些动作... }) $('#identifier').on('shown.bs.collapse', function () { // 执行一些动作... }) $('#identifier').on('hide.bs.collapse', function () { // 执行一些动作... }) $('#identifier').on('hidden.bs.collapse', function () { // 执行一些动作... })

12.Bootstrap轮播（Carousel）插件
.item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。
通过 data 属性：
属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=”2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。data-ride=”carousel” 属性用于标记轮播在页面加载时就开始动画播放。

通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
$('.carousel').carousel()

选项： data-interval、data-pause、data-wrap轮播是否连续循环
方法
$('#identifier').carousel({ interval: 2000 }) $('#identifier').carousel('cycle')从左到右循环轮播项目 $('#identifier').carousel('pause') $('#identifier').carousel(number) $('#identifier').carousel('prev') $('#identifier').carousel('next')

事件
$('#identifier').on('slide.bs.carousel', function () { // 执行一些动作... }) $('#identifier').on('slid.bs.carousel', function () { // 执行一些动作... })

13.Bootstrap附加导航（Affix）插件
这个不太懂，再议。
如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy=”affix” 即可
Bootstrap UI 编辑器 15 款最好的 Bootstrap 编辑器或者是在线编辑工具
1. Bootstrap Magic
2. BootSwatchr
3. Bootstrap Live Editor
4. Fancy Boot
5. Style Bootstrap
6. Lavish
7. Bootstrap ThemeRoller
8. LayoutIt！
9. Pingendo
10. Kickstrap
11. Bootply
12. X-Editable
13. Jetstrap
14. DivShot
15. PaintStrap
Bootstrap HTML编码规范 需要时查阅
属性顺序
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
Bootstrap CSS编码规范 需要时查阅
声明顺序
Positioning
Box model
Typographic
Visual
菜鸟教程-Bootstrap The End

    推荐阅读


    上一篇：python中的条件表达式

    下一篇：javaweb可能用到的库包