BootStrap介绍

BootStrap是什么

BootStrap是当下流行的前端框架，特点就是灵活简洁，代码优雅，美观大方，其目的是为了让Web开发更敏捷。

BootStrap的引入

先引入BootStrap的css文件，再引入jQuery的js文件，最后引入BootStrap的js文件。

视口

PC端：浏览器的可视窗口。

移动端：大多数手机浏览器的可视口宽度为980，默认缩放比例为1。

• width：视口的宽度
• initial-scale：初始化缩放
• user-scalable：是否允许用户自行缩放（值：yes/no;1/0）
• maximum-scale：最大缩放
• minimum-scale：最小缩放（设置无效）    

Bootstrap的使用

Bootstrap CSS 概览

Bootstrap3移动设备优先

• Container：版心（默认为1200px）

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

• row：行
• col：列
• col-md-offset-number：偏移列

媒体查询

• xs：超小屏幕 手机< 768px
• sm：小屏幕 平板>= 768px
• md：中等屏幕 桌面显示器>=992px
• lg：大屏幕 大桌面显示器>=1200

Bootstrap 表格

• table-bordered：为所有表格的单元格添加边框
• table-hover：在 <tbody> 内的任一行启用鼠标悬停状态
• table-condensed：让表格更加紧凑
• active：将悬停的颜色应用在行或者单元格上
• success：表示成功的操作（绿色）
• info：表示信息变化的操作（蓝色）
• warning：表示一个警告的操作（黄色）
• danger：表示一个危险的操作（红色）

Bootstrap 表单

• 垂直表单（默认vertical）
• 内联表单（form-inline）：它的所有元素是内联的，向左对齐的，标签是并排的
• 水平表单（form-horizontal）：

Bootstrap 按钮

• btn-default：默认/标准按钮
• btn-primary：原始按钮样式（未被操作）
• btn-success：表示成功的动作
• btn-info：该样式可用于要弹出信息的按钮
• btn-warning：表示需要谨慎操作的按钮
• btn-danger：表示一个危险动作的按钮操作
• btn-link：让按钮看起来像个链接 (仍然保留按钮行为)
• btn-lg：制作一个大按钮
• btn-sm：制作一个小按钮
• btn-xs：制作一个超小按钮
• btn-block：块级按钮(拉伸至父元素100%的宽度)
• active：按钮被点击
• disabled：禁用按钮

Bootstrap 图片

• img-rounded：为图片添加圆角 (IE8 不支持)
• img-circle：将图片变为圆形 (IE8 不支持)
• img-thumbnail：缩略图功能
• img-responsive：图片响应式 (将很好地扩展到父元素)

Bootstrap 辅助类

• pull-left：元素浮动到左边
• pull-right：元素浮动到右边
• center-block：设置元素为 display:block 并居中显示
• clearfix：清除浮动
• show：强制元素显示
• hidden：强制元素隐藏
• sr-only：除了屏幕阅读器外，其他设备上隐藏元素

Bootstrap 响应式实用工具

• visible-xs：只在超小屏幕可见
• visible-sm：只在小屏幕可见
• visible-md：只在中等屏幕可见
• visible-lg：只在大屏幕可见
• hidden-xs：只在超小屏幕隐藏
• hidden-sm：只在小屏幕隐藏
• hidden-md：只在中等屏幕隐藏
• hidden-lg：只在大屏幕隐藏