Bootstrap基础练习（一）

在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

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

.text-muted 效果
.text-primary效果
.text-success效果
.text-info效果
.text-warning效果
.text-danger效果

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

  ☑  左对齐，取值left

  ☑  居中对齐，取值center

  ☑  右对齐，取值right

  ☑  两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

  ☑   .text-left：左对齐

  ☑   .text-center：居中对齐

  ☑   .text-right：右对齐

  ☑   .text-justify：两端对齐

我居左
我居中
我居右
There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. 

给我加个类，我就向右对齐。

在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表

    
…

有序列表

    
…

定义列表

    
…
    
…

Bootstrap根据平时的使用情形提供了六种形式的列表：

   ☑  普通列表

   ☑  有序列表

   ☑  去点列表

   ☑  内联列表

   ☑  描述列表

   ☑  水平描述列表

    
无序列表信息1
    
无序列表信息2
    
无序列表信息3


    
有序列表信息1
    
有序列表信息2
    
有序列表信息3


    
定义列表标题
    
定义列表信息1
    
定义列表信息2

小伙伴们可以看到，在Bootstrap中默认情况下 无序列表 和 有序列表 是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“ .list-unstyled ”,这样就可以去除默认的列表样式的风格。

    

    项目列表
        

        
带有项目符号
        
带有项目符号
        
    
    

    项目列表
        

        
不带项目符号
        
不带项目符号
        
    
    
项目列表



    

    项目列表
        

        
带有项目编号
        
带有项目编号
        
    
    

    项目列表
        

        
不带项目编号
        
不带项目编号
        
    
    
项目列表

Bootstrap像去点列表一样，通过添加类名“ .list-inline ”来实现内联列表，简单点说就是 把垂直列表换成水平列表 ， 而且去掉项目符号（编号） ， 保持水平显示 。也可以说内联列表就是为制作水平导航而生。

    
W3cplus
    
Blog
    
CSS3
    
jQuery
    
PHP

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

    
W3cplus
    
一个致力于推广国内前端行业的技术博客
    
csdn
    
一个真心在做教育的网站
 
    
 
     
    
 
    
 
   

水平定义列表就像内联列表一样，Bootstrap可以给

添加类名“ .dl-horizontal ”给定义列表实现水平显示效果。

    
W3cplus
    
一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文
    
csdn
    
一个专业的，真心实意在做培训的网站
    
我来测试一个标题，我来测试一个标题
    
我在写一个水平定义列表的效果，我在写一个水平定义列表的效果

正如前面所示，

元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
 
  

高度超出340px，就会在Y轴出现滚动条


    
....
    
....
    
....
    
....
    
....
    
....
    
....
    
....
    
....
    
....
    
....
    
....
    
....
    
....

表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。

同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本：
  ☑  LESS版本，对应的文件是 tables.less
  ☑  Sass版本，对应的文件是 _tables.scss

如果你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中可以查阅到所有有关于table的样式代码。由于代码太长，此处不一一列举。

刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

  ☑  .table：基础表格

  ☑  .table-striped：斑马线表格

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

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

  ☑  .table-condensed：紧凑型表格

  ☑  .table-responsive：响应式表格

基础表格

   

     

       
表格标题
       
表格标题
       
表格标题
     
   
   

     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
   
 
斑马线表格

   

     

       
表格标题
       
表格标题
       
表格标题
     
   
   

     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
   
 
带边框的表格
 

   

     

       
表格标题
       
表格标题
       
表格标题
     
   
   

     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
   
 
鼠标悬浮高亮的表格

   

     

       
表格标题
       
表格标题
       
表格标题
     
   
   

     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
   
 
 
紧凑型表格
  

   

     

       
表格标题
       
表格标题
       
表格标题
     
   
   

     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
   
 
 
响应式表格
 

   

   

     

       
表格标题
       
表格标题
       
表格标题
     
   
   

     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
     

       
表格单元格
       
表格单元格
       
表格单元格
     
   
 

表格--表格行的类

Bootstrap还为表格的行元素提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

其使用非常的简单，只需要在元素中添加上表对应的类名，就能达到你自己需要的效果

  

    

      
类名
      
描述
    
  
  

    

      
.active
      
表示当前活动的信息
    
    

      
.success
      
表示成功或者正确的行为
    
    

      
.info
      
表示中立的信息或行为
    
    

      
.warning
      
表示警告，需要特别注意
    
    

      
.danger
      
表示危险或者可能是错误的行为
    
  
 

基础表单

表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。

同样，表单也是Bootstrap框架中的核心内容，下面向大家介绍Bootstrap框架中表单的制作。

表单源码查询

Bootstrap框架的表单，其源码占据了大量的代码，同样的，根据不同的Bootstrap版本，你可以轻松获取相应的源码：

   ☑   LESS版本：对应源文件 forms.less

   ☑ ​  Sass版本：对应源文件 _forms.scss

  

    邮箱：
    
  
  

    密码
    
  
  

    
       记住密码
    
  
  进入邮箱
	

Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在

元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

在元素上使用类名“form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。

  

    邮箱
    

      
    
  
  

    密码
    

      
    
  
  

    

      

        
           记住密码
        
      
    
  
  

    

      进入邮箱
    
  

有时候我们需要将表单的控件都在一行内显示，类似这样的：

在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在

元素中添加类名“form-inline”即可。
内联表单实现原理非常简单，欲将表单控件在一行显示，就需要将表单控件设置成内联块元素（display:inline-block）。

  

    邮箱
    
  
  

    密码
    
  
  

    
       记住密码
    
  
  进入邮箱
  

每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。

单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。

为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

表单控件(下拉选择框select)

Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格

  

     
      1 
      2 
      3 
      4 
      5 
      
  
  

       
        1 
        2 
        3 
        4 
        5 
      
  

   

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

表单控件(复选框checkbox和单选择按钮radio)

Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可

  
案例1
  

    
      
      记住密码
    
  
  

    
      
      喜欢
    
  
    

    
      
      不喜欢
    
  
  

有时候，为了布局的需要，将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑：
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

    
      游戏
    
    
      摄影
    
    
    旅游
    
  
  

    
      男性
    
    
      女性
    
    
      中性
    
  

表单控件(按钮)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：

  ☑  input[type=“submit”]

  ☑  input[type=“button”]

  ☑  input[type=“reset”]

  ☑  

在Bootstrap框架中的按钮都是采用

来实现。

有关于Bootstrap中按钮如何制作，在这里不做过多阐述，因为按钮也是Bootstrap框架中核心部分之一，后面我们专门有一节内容来介绍Bootstrap的按钮。

这里先让大家看看Bootstrap的按钮长成什么样：

  
    
  
      
  
        
Button
  
        
class=""
  
        
Description
  
      
  
    
  
    
  
      
  
        
Default
  
        
btn
  
        
Standard gray button with gradient
  
      
  
      
  
        
Primary
  
        
btn btn-primary
  
        
Provides extra visual weight and identifies the primary action in a set of buttons
  
      
  
      
  
        
Info
  
        
btn btn-info
  
        
Used as an alternative to the default styles
  
      
  
      
  
        
Success
  
        
btn btn-success
  
        
Indicates a successful or positive action
  
      
  
      
  
        
Warning
  
        
btn btn-warning
  
        
Indicates caution should be taken with this action
  
      
  
      
  
        
Danger
  
        
btn btn-danger
  
        
Indicates a dangerous or potentially negative action
  
      
  
      
  
        
Inverse
  
        
btn btn-inverse
  
        
Alternate dark gray button, not tied to a semantic action or use
  
      
  
    
  
  
 

表单控件大小

前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input，textarea和select控件

案例1

  

    控件变大
    
  
  

    正常大小
    
  
  
  

    控件变小
    
  
 
 
  

  

  

 
案例2

  

    

      
    
    

      
    
    

      
    
  
  

    

    

    
  
  
  

    

      
    
    

      
    
  
 

表单控件状态(焦点状态)

表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单一定离不开表单的控件状态。

表单状态的作用：

每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。

焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果

喜欢我的文章的，可以关注 微信 公众号“测试项目开发”，需要什么内容可以在里面提，我看到后会给大家解答。