Bootstrap的使用
下载Bootstrap
Bootstrap (当前版本 v3.3.5)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景。
点击这里下载
在href和src里添加http,就可以直接引用了。
使用以下给出的这份超级简单的 HTML 模版
Bootstrap使用
1、使用方法介绍
1、全局样式style.css
移除body的margin声明,设置body的背景色为白色,为排版设置了基本的字体、字号和行高,设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式.
2、标题
重置了h1~h6的默认样式,标题类名 .h1~h6,副标题 small
3、强调内容
.lead 一般配合段落标签使用<small>,<strong>,<b>,<em>,<i>,<cite>
强调相关的类text-muted:提示,使用浅灰色(#999),text-primary:主要,使用蓝色(#428bca),text-success:成功,使用浅绿色(#3c763d),text-info:通知信息,使用浅蓝色(#31708f),text-warning:警告,使用黄色(#8a6d3b),text-danger:危险,使用褐色(#a94442)。
4、文本对齐风格的类
.text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐
5、列表
ul ol,去序列的类.list-unstyled;
ul ol 水平列表的类.list-inline把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示;
dl 水平列表的类.dl-horizontal屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果
2、图片
1、使用方法非常简单,只需要在标签上添加对应的类名
2、img-responsive:响应式图片,主要针对于响应式设计
3、img-rounded:圆角图片
4、img-circle:圆形图片
5、img-thumbnail:缩略图片
3、图标
1、点击这里是图标大全查看图标名
2、使用任何行级元素都可以,通常使用span标签坐图标容器,在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现。
4、表格
1、基础表格类.table
给表格设置了margin-bottom:20px以及设置单元内距;在thead底部设置了一个2px的浅灰实线;每个单元格顶部设置了一个1px的浅灰实线
2、附加样式表类
.table-striped:斑马线表格.table-bordered:带边框的表格.table-hover:鼠标悬停高亮的表格.table-condensed:紧凑型表格
3、响应式表格
.table-responsive<div class=“table-responsive”><table class=“table table-bordered”>
Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class=“table”>置于这个容器当中,这样表格也就具有响应式效果
当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失.
5、表单
1、基础表单
input、select、textarea等元素设置form-control类:宽度变成了100%设置了一个浅灰色(#ccc)的边框;具有4px的圆角;设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化;设置了placeholder的颜色为#999;form-group就是一个产生:margin-bottom=15px;的效果
2、input
必须带有type,多使用form-control类;input-sm:让控件比正常大小更小;input-lg:让控件比正常大小更大;不设置就是正常大小;
3、select
默认选择一个选项,多使用form-control;多行选择的话,设置multiple属性<select multiple class=“form-control”>
4、textarea
设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性
5、单选框,多选框
日常开发最头痛的是控件与文字对齐问题,bootstrap无需关心这个问题。
如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”如果radio需要水平排列,只需要在label标签上添加类名“radio-inline
6、按钮
默认按钮:Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
.btn类还支持a标签,type-submit的input标签;.btn-primary主要按钮;btn-success成功按钮;btn-warning警告按钮;btn-danger危险按钮;btn-link链接按钮
按钮大小:.bth-lg大型按钮;btn-sm小型按钮;btn-xs超小型按钮