[布局] bootstrap基本标签总结-白红宇

[布局] bootstrap基本标签总结

阅读量：5901 次

发布时间：2019-06-19

本文共 3352 字，大约阅读时间需要 11 分钟。

文件头：


     基础表格

bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。

1.h

<h>标签和普通使用方法一样。

定义了.h1~.h6六个类名，样式和标题样式一样。

副标题用<small>标签指出，必须包含在h标签内。

Bootstrap标题一
      
       Bootstrap标题一

Bootstrap标题一我是副标题

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

代码

 设置最大代码区域

4.表格

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格


       
                                          表格标题                  表格标题                  表格标题               
           
                                          表格单元格                  表格单元格                  表格单元格               
                               表格单元格                  表格单元格                  表格单元格

表格标题	表格标题	表格标题
表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格

的不同行颜色

          .active      表示当前活动的信息              .success      表示成功或者正确的行为              .info      表示中立的信息或行为              .warning      表示警告，需要特别注意              .danger      表示危险或者可能是错误的行为

5.表单

默认垂直显示

用
     
      包围控件及其标签

对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


         
                  记住密码

radio，checkbox：水平排列

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

禁用控件：在控件上添加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标签来制作按钮

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-*


       
          
       
              我的里面嵌套了一个网格      
                
         
          col-md-6
         
        
         
          col-md-6
         
      
        
    
       
    
       
        col-md-4
       
  
      
  
          
       
        .col-md-4
       
    
                
                
         
          col-md-4
         
        
         
          col-md-4
         
        
         
          col-md-4