Bootstrap教程

2024年1月31日发(作者：)

中软国际-保险与证券业务线

Bootstrap入门教程

Bootstrap入门教程

赵俊明

2013/12/31

目录

Bootstrap起步 .................................................... 2

配置 ............................................................ 2

开发文件和基本模板 .............................................. 2

IE兼容模式 ..................................................... 3

基本CSS简介 ..................................................... 3

HTML5文档类型 .................................................. 3

移动设备优先 .................................................... 3

栅格系统 ........................................................ 3

自适应布局案例 .................................................. 4

列偏移 .......................................................... 4

响应式工具 ...................................................... 5

打印Class ...................................................... 5

组件简解 .......................................................... 5

Glyphicons 图标 ................................................. 5

输入框组 ........................................................ 6

标签页 .......................................................... 6

胶囊式的标签页 .................................................. 7

面包屑导航 ...................................................... 7

可变标签 ........................................................ 7

徽章 ............................................................ 7

大屏幕介绍 ...................................................... 8

警告框 .......................................................... 8

进度条 .......................................................... 9

运动进度条 ...................................................... 9

堆叠效果 ........................................................ 9

Well ............................................................ 9

Javascript插件 ................................................. 10

模态框 ......................................................... 10

通过data属性调用模态框 ........................................ 10

通过javascript调用模态框 ...................................... 11

弹出框 ......................................................... 11

警告框 ......................................................... 12

按钮 ........................................................... 13

Affix（导航定位） .............................................. 13

Bootstrap起步

配置

注意：由于Bootstrap依赖于Jquery，所以一定将放置在前面。

开发文件和基本模板

IE兼容模式

Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 标签加入到你的页面中：

基本CSS简介

HTML5文档类型

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

移动设备优先

为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。

在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。

栅格系统

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

栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- class的话）。

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

自适应布局案例

列偏移

响应式工具

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

栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备。

打印Class

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

组件简解

Glyphicons 图标

图标 class 不能和其它元素联合使用，因为这些图标被设计为独立的元素、独立使用。

输入框组

标签页

胶囊式的标签页

面包屑导航

可变标签

徽章

大屏幕介绍

警告框

进度条

运动进度条

堆叠效果

Well

Javascript插件

你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选方式。

关闭DataAPI

关闭制定的DataAPI

模态框

通过data属性调用模态框

通过javascript调用模态框

如：

弹出框

通过JavaScript启用弹出框：

警告框

JS打开

JS关闭

data关闭

按钮

通过添加data-loading-text="正在加载..."可以使按钮呈现加载状态。

通过添加data-toggle="button"可以让按钮能够切换状态。

Affix（导航定位）

只需为需要监听的页面元素添加data-spy="affix"即可方便的添加affix行为。

通过JS启动Affix

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-offset-top="200"。

最后：请不要按照PC前端开发的思想做流式布局，因为那样会局限你的审美，要脱离现实，大胆想象，最后再结合现实。