一、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的排版-标题
标题(h1h6/.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进阶