响应式设计:
添加:<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type=“text/css”>
给 <img> 添加 img-responsive class 属性使图片宽度适应屏幕宽度
给 文本 添加 text-center class属性使文本居中
给 <button> 添加 btn class属性使按钮为 bootstrap 的自带按钮样式
<button> class :
btn-block: 使按钮填满整个水平空间
btn-primary: 使按钮设为默认的深蓝色
btn-info: 使按钮设为提示的浅蓝色
btn-danger: 使按钮设为警告的红色
响应式网格布局:
设置 class 属性:(一般设置于 <div> 中)
需要先设置一个class=“row”的<div>,在其中定义一行中每个列元素
对每个列元素设置 class : col-md-* col-xs-*
md适用于屏幕宽度中等的设备(如笔记本电脑)
xs适用于屏幕宽度较小的设备(如手机)
*需要填数字,表示每个元素所占的列宽
通过div创建块级元素,通过span创建行内元素
引入 Font Awesome 图标库:
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<i> 图标元素
添加class属性:fa fa-****-**
container 与 container-fluid 容器的区别:
container 类用于固定宽度并支持响应式布局的容器
- 所谓固定宽度并不是开发者自定义的宽度,而是 bootstrap 内部通过媒体查询获得屏幕宽度,自动将宽度设为某个固定值
container-fluid 类用于100%宽度,占据全部视口的容器