Button:
.btn{padding:; border:;}
.btn-default{color:; background-color:; border-color:;}
-----------------------------------------------------------
.btn-danger :红
.btn-success:绿
.btn-warning:黄
.btn-info : 浅蓝
.btn-primary:深蓝
----------------------------------------------------
.btn-lg:大
.btn-md:中(默认,无需设置)
.btn-sm:小
.btn-xs:最小
-------------------------------------------------------
.btn-block:块级按钮
----------------------------------
.pull-left(float:left):左浮(拉)
.pull-right(float:right):右浮(拉)
Img:
.img-rounded 圆角(border-radius:6px)
.img-circle 圆形(border-radius:50%)
.img-thumbnail 缩放图片/拇指图片
.img-responsive 响应式图片
-----------------------------------------------
排版和代码(和文本)(了解)
.text-danger 红色 文本
.bg-info 浅蓝 背景
....(与按钮设置的颜色一致)
--------------------------------------------
.text-left
.text-right
.text-center
.text-justify 文本两端对齐
.text-uppercase 大写
.text-capitalize 首字母大写
.text-lowercase 小写
---------------------------------------------------
Table:
.table
.table-bordered --边框
.table-responsive - (PS:运用于外的DIV(父级)上,达到响应式) overflow-y:haddien overflow-x:auto
.table-striped - -隔行变色(tr:nth-of-type(odd))--奇数
.table-hover - 鼠标悬停
栅格系统:
Web开发页面布局的方式:
(1)使用TABLE做布局
优势:简单不易出错 不足:加载效率低
(2)使用DIV+CSS
优势:加载速度快,灵活 不足:不易控制
(3)使用BootStrap提供的栅格(Grid Layout)布局
优势:加载速度快、灵活、支持响应式功能、易控制(有行和列的概念,但使用DIV+CSS实现)
** 栅格布局系统特点:
(1)所有的行(row)必须放在容器中(container/container-fluid)
(2)分为多行(row),一行中平均分为12列(col)
(3)网页内容只能放在列中,不能放在行中
(4)可在column中嵌套row
(5)col分为四类:col-xs col-sm col-md col-xs
****面试:bootstrap中布局系统中容器(container)的特点
宽度做了媒体查询
添加了前置和后置内容生成,可以防止子元素的越界和浮动造成的影响
***表单---
<form>
<div class="form-group">
<label class=""></label>
<input class="form-control"/>
<span class="help-block"></span>
</div>
</form>
行内: <form class="form-inline">
</form>
**水平:
.form-horizontal(contariner)
.form-group(row)
<form class="form-horizontal">
.btn{padding:; border:;}
.btn-default{color:; background-color:; border-color:;}
-----------------------------------------------------------
.btn-danger :红
.btn-success:绿
.btn-warning:黄
.btn-info : 浅蓝
.btn-primary:深蓝
----------------------------------------------------
.btn-lg:大
.btn-md:中(默认,无需设置)
.btn-sm:小
.btn-xs:最小
-------------------------------------------------------
.btn-block:块级按钮
----------------------------------
.pull-left(float:left):左浮(拉)
.pull-right(float:right):右浮(拉)
Img:
.img-rounded 圆角(border-radius:6px)
.img-circle 圆形(border-radius:50%)
.img-thumbnail 缩放图片/拇指图片
.img-responsive 响应式图片
-----------------------------------------------
排版和代码(和文本)(了解)
.text-danger 红色 文本
.bg-info 浅蓝 背景
....(与按钮设置的颜色一致)
--------------------------------------------
.text-left
.text-right
.text-center
.text-justify 文本两端对齐
.text-uppercase 大写
.text-capitalize 首字母大写
.text-lowercase 小写
---------------------------------------------------
Table:
.table
.table-bordered --边框
.table-responsive - (PS:运用于外的DIV(父级)上,达到响应式) overflow-y:haddien overflow-x:auto
.table-striped - -隔行变色(tr:nth-of-type(odd))--奇数
.table-hover - 鼠标悬停
栅格系统:
Web开发页面布局的方式:
(1)使用TABLE做布局
优势:简单不易出错 不足:加载效率低
(2)使用DIV+CSS
优势:加载速度快,灵活 不足:不易控制
(3)使用BootStrap提供的栅格(Grid Layout)布局
优势:加载速度快、灵活、支持响应式功能、易控制(有行和列的概念,但使用DIV+CSS实现)
** 栅格布局系统特点:
(1)所有的行(row)必须放在容器中(container/container-fluid)
(2)分为多行(row),一行中平均分为12列(col)
(3)网页内容只能放在列中,不能放在行中
(4)可在column中嵌套row
(5)col分为四类:col-xs col-sm col-md col-xs
****面试:bootstrap中布局系统中容器(container)的特点
宽度做了媒体查询
添加了前置和后置内容生成,可以防止子元素的越界和浮动造成的影响
***表单---
<form>
<div class="form-group">
<label class=""></label>
<input class="form-control"/>
<span class="help-block"></span>
</div>
</form>
行内: <form class="form-inline">
</form>
**水平:
.form-horizontal(contariner)
.form-group(row)
<form class="form-horizontal">
使用栅格化系统控制label(class="col-md-2 control-label")(文字右对齐)
/input(.form-control)/ .help-black(提示文字)
/ .checkbox(多选按钮)...
</form>