码迷,mamicode.com
首页 > 其他好文 > 详细

[布局] bootstrap基本标签总结

时间:2014-12-22 22:44:43      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:

文件头:

DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>基础表格</title> <link rel="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> <div class="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

 

强调类(颜色)

  • .text-muted:提示,使用浅灰色(#999)
  • .text-primary:主要,使用蓝色(#428bca)
  • .text-success:成功,使用浅绿色(#3c763d)
  • .text-info:通知信息,使用浅蓝色(#31708f)
  • .text-warning:警告,使用黄色(#8a6d3b)
  • .text-danger:危险,使用褐色(##a94442)

 

文本对齐

(设置text-align:center、left、right、justify)

  ?   .text-left:左对齐

  ?   .text-center:居中对齐

  ?   .text-right:右对齐

  ?   .text-justify:两端对齐

 

3.列表(ul ol dl)

Bootstrap对于列表,只是在margin上做了一些调整

  margin-top: 0;
  margin-bottom: 10px;
 
去除项目符号
.list-unstyled
padding-left: 0;
list-style: none;
 
内联列表,制作水平导航
.list-inline
 
代码
<code> <pre> <kbd>
<pre class=“.pre-scrollable”> 设置最大代码区域
 
4.表格
千万注意,你的<table>元素中一定不能缺少类名table

  ?  .table:基础表格

  ?  .table-striped:斑马线表格

  ?  .table-bordered:带边框的表格

  ?  .table-hover:鼠标悬停高亮的表格

  ?  .table-condensed:紧凑型表格

  ?  .table-responsive:响应式表格

table class="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>
技术分享
 
<tr>的不同行颜色
tbody> <tr class="active"> <td>.active</td> <td>表示当前活动的信息</td> </tr> <tr class="success"> <td>.success</td> <td>表示成功或者正确的行为</td> </tr> <tr class="info"> <td >.info</td> <td>表示中立的信息或行为</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示警告,需要特别注意</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示危险或者可能是错误的行为</td> </tr> </tbody>
技术分享
 
5.表单
<form role=”form”>
默认垂直显示
用<div class=“form-group”>包围控件及其标签
对input select textarea设置.form-control

1、宽度变成了100%

2、设置了一个浅灰色(#ccc)的边框

3、具有4px的圆角

4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

 

水平风格表单:标签在左,控件在右

1、在<form>元素是使用类名“form-horizontal”。

2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)

 

内联表单 :控件一行显示

在<form>元素中添加类名“form-inline”

 

表单控件

select:<select multiple class="form-control"> 选择多个

textarea: <textarea class="form-control" rows="3"></textarea>

radio,checkbox:div包着label包着input

 

div class="checkbox"> <label> <input type="checkbox" value=""> 记住密码 </label> </div>
技术分享

radio,checkbox:水平排列

div(class=”form-group”)包着label(class=”checkbox-inline”or“radio-inline”)包着input

禁用控件:在控件上添加disabled属性

      <input class="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标签来制作按钮

<input type="button">

<input type="reset">

<input type="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-*
div class="container"> <div class="row"> <div class="col-md-8"> 我的里面嵌套了一个网格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>
技术分享

[布局] bootstrap基本标签总结

标签:

原文地址:http://www.cnblogs.com/widow/p/4178978.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!