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：只在大屏幕隐藏
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。