bootstrap – 白墨代码网

bootstrap的介绍

关于bootsrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

bootstrap解决什么问题

全局的css样式
基于媒体查询的响应式布局
栅格布局
html组件
js插件

总结： bootstrap提供了从页面组件实现，到css样式，页面元素布局，到响应式和页面交互的前端开发全套解决方案，非常重要

bootstrap的使用思路

在以前的学习中，我们写一个页面，不管是css，还是html，我们的第一反应是自己去写
但是使用bootstrap，我们的第一反应是，找到bootstrap提拱的现成的css样式，组件，插件，直接使用，然后，如果不符合需求，再微调或修改。除非bootstrap没有提供类似的功能，我们才需要自己去写

bootstrap的使用

导入jquery
导入bootstrap的js
导入boostrap的css
添加viewport

bootstarp全局css样式

容器
- Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。
- 注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。
  - .container 类用于固定宽度并支持响应式布局的容器。
  - .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
文本样式
- 对齐
- 改变大小写
表格（参考文档）
- .active（灰）
- .success（绿）
- .info （蓝）
- .warning（黄）
- .danger （红）
表单（参考文档）
- 上下（每个字段label在上， input在下）
- 内联（可能需要自己设置每个input的宽度）
按钮（参考文档）
- 可设置按钮的颜色，大小，状态
图片相关类名
辅助类
- 情境文本颜色
- 情境背景色
浮动，清除浮动，居中, 显示或隐藏
- 左浮动: pull-left
- 右浮动: pull-right
- 清除浮动: 通过为父元素添加 .clearfix 类可以很容易地清除浮动
- 居中: center-block
- 显示: show
- 隐藏: hidden

bootstrap栅格和响应式布局

栅格

布局容器
- Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或 .container-fluid 容器
  - .container 类用于固定宽度并支持响应式布局的容器。
  - .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
  - 由于 padding 等属性的原因，这两种容器类不能互相嵌套。
行和列
- 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
- 也就是 .container>.row>(.column1+.column2+.column3....) 的结构
- 通过给每个元素设置 padding 属性，从而创建列与列之间的间隔
- 通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding
- 栅格系统中把大盒子自动分成12份，给子元素添加一个类，指定其占到父盒子的空间多少份，例如，三个等宽的列可以使用三个 .col-xs-4 来创建
- 如果一行的元素超过了12份，则会自动换行显示
屏幕尺寸
- .col-xs- ：超小屏幕手机 (<750px)
- .col-sm- ：小屏幕平板 (≥750px)
- .col-md- ：中等屏幕桌面显示器 (≥992px)
- .col-lg- ：大屏幕大桌面显示器 (≥1200px)
- 所有的列， padding都是15px
切分规则
列偏移
- 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
栅格和弹性布局的对比
- 弹性布局不能根据屏幕尺寸来设置显示多少个
- 栅格在不同的屏幕尺寸上，可以设置显示不同个，只需要设定不同的宽度即可