[布局] bootstrap基本标签总结
2014-12-18 21:37
399 查看
文件头:
bootstrap在reset.css文件中设置margin为0,因此其他的标签需要重新设计margin。
1.h
<h>标签和普通使用方法一样。
定义了.h1~.h6六个类名,样式和标题样式一样。
副标题用<small>标签指出,必须包含在h标签内。
2.p
定义<body>的字体库、字号、行高、颜色,<p>标签继承这些设置,单独设置margin-bottom为10px,使用方法同普通方法。
强调内容
增大:.lead;
加粗:<strong>;<b>(设置font-weight:bold)
斜体:<em>;<i>(设置font-style:italic)
不变:<cite>
变小:<small>,.small
强调类(颜色)
[align=left].text-muted:提示,使用浅灰色(#999)[/align]
[align=left].text-primary:主要,使用蓝色(#428bca)[/align]
[align=left].text-success:成功,使用浅绿色(#3c763d)[/align]
[align=left].text-info:通知信息,使用浅蓝色(#31708f)[/align]
[align=left].text-warning:警告,使用黄色(#8a6d3b)[/align]
[align=left].text-danger:危险,使用褐色(##a94442)[/align]
文本对齐
(设置text-align:center、left、right、justify)
☑.text-left:左对齐
☑.text-center:居中对齐
☑.text-right:右对齐
☑.text-justify:两端对齐
3.列表(uloldl)
Bootstrap对于列表,只是在margin上做了一些调整
[align=left][/align]
[align=left]
[align=left]
[align=left][/align]
[align=left]
[align=left]
[align=left][/align]
[align=left]
[align=left]
[align=left]
[align=left][/align]
[align=left]
☑.table:基础表格
☑.table-striped:斑马线表格
☑.table-bordered:带边框的表格
☑.table-hover:鼠标悬停高亮的表格
☑.table-condensed:紧凑型表格
☑.table-responsive:响应式表格
[align=left][/align]
[align=left][/align]
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
水平风格表单:标签在左,控件在右
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)
内联表单:控件一行显示
在<form>元素中添加类名“form-inline”
表单控件
select:<selectmultipleclass="form-control">选择多个
textarea:<textareaclass="form-control"rows="3"></textarea>
radio,checkbox:div包着label包着input
radio,checkbox:水平排列
div(class=”form-group”)包着label(class=”checkbox-inline”or“radio-inline”)包着input
禁用控件:在控件上添加disabled属性
<inputclass="input-lg"id="disabledInput"type="text"placeholder="表单已被禁用,不可输入"disabled>
验证状态:form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback,最后加一个span存放icon
表单提示信息:
在form-group容器后加一个span,添加类名.help-block
button:四种方式,bootstrap用button实现,建议用button和a标签来制作按钮
<inputtype="button">
<inputtype="reset">
<inputtype="submit">
<button></button>
button样式
.btn
.btn-default
大小:
.btn-lg
.btn-sm
.btn-xs
块状按钮:按钮充满整个容器,没有padding和margin.btn-block
禁用按钮:添加类.disabled或者添加属性disabled=“disabled”
网格系统
分为12列,可以嵌套
<!DOCTYPEHTML> <html> <head> <metacharset="utf-8"> <title>基础表格</title> <linkrel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head>
bootstrap在reset.css文件中设置margin为0,因此其他的标签需要重新设计margin。
1.h
<h>标签和普通使用方法一样。
定义了.h1~.h6六个类名,样式和标题样式一样。
副标题用<small>标签指出,必须包含在h标签内。
<h1>Bootstrap标题一</h1> <divclass="h1">Bootstrap标题一</div>
<h1>Bootstrap标题一<small>我是副标题</small></h1>
2.p
定义<body>的字体库、字号、行高、颜色,<p>标签继承这些设置,单独设置margin-bottom为10px,使用方法同普通方法。
强调内容
增大:.lead;
加粗:<strong>;<b>(设置font-weight:bold)
斜体:<em>;<i>(设置font-style:italic)
不变:<cite>
变小:<small>,.small
强调类(颜色)
[align=left].text-muted:提示,使用浅灰色(#999)[/align]
[align=left].text-primary:主要,使用蓝色(#428bca)[/align]
[align=left].text-success:成功,使用浅绿色(#3c763d)[/align]
[align=left].text-info:通知信息,使用浅蓝色(#31708f)[/align]
[align=left].text-warning:警告,使用黄色(#8a6d3b)[/align]
[align=left].text-danger:危险,使用褐色(##a94442)[/align]
文本对齐
(设置text-align:center、left、right、justify)
☑.text-left:左对齐
☑.text-center:居中对齐
☑.text-right:右对齐
☑.text-justify:两端对齐
3.列表(uloldl)
Bootstrap对于列表,只是在margin上做了一些调整
margin-top:0; margin-bottom:10px;
[align=left][/align]
[align=left]
去除项目符号[/align]
[align=left]
.list-unstyled[/align]
(padding-left:0;
list-style:none;)
[align=left][/align]
[align=left]
内联列表,制作水平导航[/align]
[align=left]
.list-inline[/align]
[align=left][/align]
[align=left]
代码[/align]
[align=left]
<code><pre><kbd>[/align]
[align=left]
<preclass=“.pre-scrollable”>设置最大代码区域[/align]
[align=left][/align]
[align=left]
4.表格
千万注意,你的<table>元素中一定不能缺少类名table[/align]
☑.table:基础表格
☑.table-striped:斑马线表格
☑.table-bordered:带边框的表格
☑.table-hover:鼠标悬停高亮的表格
☑.table-condensed:紧凑型表格
☑.table-responsive:响应式表格
<tableclass="table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
[align=left][/align]
<tr>的不同行颜色
<tbody>
<trclass="active">
<td>.active</td>
<td>表示当前活动的信息</td>
</tr>
<trclass="success">
<td>.success</td>
<td>表示成功或者正确的行为</td>
</tr>
<trclass="info">
<td>.info</td>
<td>表示中立的信息或行为</td>
</tr>
<trclass="warning">
<td>.warning</td>
<td>表示警告,需要特别注意</td>
</tr>
<trclass="danger">
<td>.danger</td>
<td>表示危险或者可能是错误的行为</td>
</tr>
</tbody>
[align=left][/align]
5.表单
<formrole=”form”>
默认垂直显示
用<divclass=“form-group”>包围控件及其标签
对inputselecttextarea设置.form-control
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
水平风格表单:标签在左,控件在右
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)
内联表单:控件一行显示
在<form>元素中添加类名“form-inline”
表单控件
select:<selectmultipleclass="form-control">选择多个
textarea:<textareaclass="form-control"rows="3"></textarea>
radio,checkbox:div包着label包着input
<divclass="checkbox">
<label>
<inputtype="checkbox"value="">
记住密码
</label>
</div>
radio,checkbox:水平排列
div(class=”form-group”)包着label(class=”checkbox-inline”or“radio-inline”)包着input
禁用控件:在控件上添加disabled属性
<inputclass="input-lg"id="disabledInput"type="text"placeholder="表单已被禁用,不可输入"disabled>
验证状态:form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback,最后加一个span存放icon
表单提示信息:
在form-group容器后加一个span,添加类名.help-block
button:四种方式,bootstrap用button实现,建议用button和a标签来制作按钮
<inputtype="button">
<inputtype="reset">
<inputtype="submit">
<button></button>
button样式
.btn
.btn-default
大小:
.btn-lg
.btn-sm
.btn-xs
块状按钮:按钮充满整个容器,没有padding和margin.btn-block
禁用按钮:添加类.disabled或者添加属性disabled=“disabled”
网格系统
分为12列,可以嵌套
.col-md-offset-4.col-md-4.col-md-push-*.col-md-pull-*
<divclass="container">
<divclass="row">
<divclass="col-md-8">
我的里面嵌套了一个网格
<divclass="row">
<divclass="col-md-6">col-md-6</div>
<divclass="col-md-6">col-md-6</div>
</div>
</div>
<divclass="col-md-4">col-md-4</div>
</div>
<divclass="row">
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-8">
<divclass="row">
<divclass="col-md-4">col-md-4</div>
<divclass="col-md-4">col-md-4</div>
<divclass="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>
相关文章推荐
- [布局]bootstrap基本标签总结2
- [布局] bootstrap基本标签总结
- 总结:bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位、打开新标签
- bootstrap基本标签总结2
- bootstrap基本标签总结[转]
- Bootstrap学习总结笔记(17)-- 基本插件之标签切换
- Bootstrap学习总结笔记(5)-- 基本样式之标签
- Android layout布局属性、标签属性总结大全
- 实现 Bootstrap 基本布局
- Android layout布局属性、标签属性总结大全
- Bootstrap的常用类(CSS和布局组件)的总结
- Android 总结:打造Android中的流式布局和热门标签(源码有详细注释)
- Bootstrap页面布局8 - BS常用标签与样式
- Android基本布局总结
- Android五大布局标签和属性总结
- android layout布局属性、标签属性总结大全
- HTML基本标签含义总结
- Android五大布局标签和属性总结
- Android layout布局属性、标签属性总结大全
- Android layout布局属性、标签属性总结大全