中软国际-保险与证券业务线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，所以一定将Jquery.js放置在Bootstrap.js前面。开发文件和基本模板
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此<meta> 标签加入到你的页面中：<meta http-equiv="X-UA-Compatible" content="IE=edge">
基本CSS简介
HTML5文档类型
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
移动设备优先
为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。栅格系统
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- class的话）。
bootstrap项目通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
自适应布局案例
列偏移

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。