Bootstrap快速入门

一、Bootstrap的环境搭建
登录
http://www.bootcss.com/
bootstrap中文官方网站下载bootstrap

还有源码，Sass等 这里先不管 先下载安装生产环境

二、下载完毕后 打开一个新的网页

引入bootstrap的CSS和JS文件

注意：jquery文件bootstrap是不带有的 需要从官网自行下载
http://jquery.com/

点击

选择：

点击后会出现以下界面

复制其中的代码 在你自己电脑上新建一个JS文件 放入即可

三、第一个bootstrap网页

当我们引入之后
来测试一下我们的第一个网页
代码如下

效果如下：

注意：在这里提示以下 如果jquery的文件版本低于1.9.0的话 控制台会报一个错误 所以下载比1.9.0高版本的jquery文件即可

四、bootstrap的排版-标题
标题（h1_h6/.h1.h6）
副标题（small）

ps:
h1:36px
h2:30px
h3:24px
h4:18px
h5:14px
h6:12px

我们引入了bootstrap样式文件之后就可以开始了

效果如下：

如果我们想要用不同的标签来实现效果 我们如何实现呢？
下面用span标签演示

同理想要修改标题字样 只需要修改class名就可以了

效果如下：

这就是bootstrap为我们带来的便利
当然还有很多 例如 我们用small标签包含小标题

效果如下：

五、bootstrap中的排版-文本
段落
对齐方式
文本标记（下划线 中划线）

eg:
P标签：
默认：14px;
行高：20px;
底部外边距：10px;

对齐：
.text-left
.text-center
.text-right

大小写：
.text-lowercase
.text-uppercase
.text-capitalize

下面来具体看看效果

效果如下：

我们发现段落与段落之间有了一定的距离

打开控制台发现bootstrap对标签进行了重新的定义

我们还可以对文本进行一些特殊的标记
ps：


发现添加了一个黄色的底边

再比如 想要删除某段文字可以使用del标签


就会发现文字上有了一条横线

我们想让用户知道某一段是插入文本 可以使用ins


就会出现一条下划线

再比如可以对某一段文字使用small标签 让其变小


就会发现比周围的文字小很多

如果我们想要加粗可以使用strong标签


如果我们想要让文本左对齐：


我们的文本就左对齐了 还有居中 右对齐：

只需要更改选择器中的名称即可

如果想要改变英文单词的大小写

大写变小写：


就全部变成小写了

想要全部变大写 就使用.text-uppercase
想要首字母变大写 就是用.text-capitalize

六、bootstrap中的排版-表格

带边框表格 .table-bordered
条纹状表格 .table-striped
悬停变色 .table-hover
紧凑风格 .table-condensed

我们来测试一下
先建立一个表格


有了一个整体的结构 我们来进行修饰
在添加一个class之后 我们的表格发生了变化

如果觉得还是太单调 想要一个斑马线的效果
我们可以在后面继续添加一个table-striped
这个是指水平线的意思


如果我们想要填充我们的表格边框 可以添加
table-bordered

如果我们想要在鼠标悬停到某一个表格时 让其高亮或者特殊标记 我们可以使用
table-hover

发现我们此刻的表格在悬停时就会变暗



如果我们想要添加一些颜色 和 状态位可以控制
我们可以在某一行添加
class=“danger”


除了红色我们还有
waring //变暗
info //蓝色
success //绿色
active //悬停变暗

七、bootstrap中的表单


我们先引入一个输入框

我们可以使用placeholder来提示用户 这是一个输入框
该样式是html5 有些浏览器不会显示 所以我们就要添加一个label


想要更美观
我们还可以添加一个
class=“form-control”


会发现一个圆角的 进入焦点会发光的一个输入框

我们将其放入一个div中 组成一个组件 让我们控制样式更加方便

我们还可以添加下拉 文本域等



每个组件直接都会有15px的边距

如果想要实现水平排版

如果我们想改变我们的文字和输入框:

例如 让输入框更大 可以添加input-lg


如果想变小输入框就是输入input-sm

如果想让某段文字消失 我们可以使用
sr-only


如果我们想要改变颜色
control-label
在所有组添加一个 has-success


就会发现都变成了绿色了
想要改成其他颜色 参考上面一节

我们先添加一个普通的按钮


我们添加一个class=“btn”


就会变成一个圆角的按钮

我们再添加一个btn-default



就会出现一个悬浮变暗的效果

如果我们想要改变按钮的颜色 基本与上几节同理


如果我们想要改变按钮 让其变成一个链接的形式


改变大小：


操作基本同理

如果我们想要实现一个按下的效果

我们还可以实现按钮全屏的效果


如果我们想禁用某个按钮


就会看到按钮颜色发生稍稍改变 变得不可用

我们还可以使用a标签来做成一个按钮

八、bootstrap中图片与辅助类
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形 .img-thumbnail

辅助类：
文本颜色
背景颜色
状态设置
三角符号

具体请看bootstrap进阶