Bootstrap 之栅格系统与常用样式

Bootstrap

  • 一、Bootstrap简介
  • 二、Bootstrap 栅格系统
    • 1、栅格系统简介
    • 2、栅格系统参数
    • 3、栅格系统使用
    • 4、栅格系统列嵌套
    • 5、栅格系统列偏移
    • 6、栅格系统列排序
    • 7、响应式工具
  • 三、Bootstrap 常用样式
    • 1、排版
      • 1)标题
      • 2)段落
      • 3)强调和对齐效果
    • 2、列表
    • 3、表格
    • 4、表单
      • 4.1 文本框
      • 4.2 下拉框
      • 4.3 文本域
      • 4.4、多选和单选框
    • 5、按钮
    • 6、表单布局

一、Bootstrap简介

Bootstrap来自Twitter(推特),是目前最受欢迎的前端框架,Bootstrap是基于HTML,CSS和JavaScrpit 的,它简洁灵活,使得web开发更加快捷。

  • 中文官网:http://www.bootcss.com/
  • 官网:http://getbootstrap.com/

优点

  • 标准化的html+css编码规范
  • 提供了一套简洁、直观、强悍的组件
  • 有自己的生态圈,不断的更新迭代
  • 让开发更简单,提高了开发的效率

二、Bootstrap 栅格系统

1、栅格系统简介

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,它是指将网页布局划分为等宽的列,然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

2、栅格系统参数

栅格系统通过一系列的行(row)和列(column)的组合来创建页面布局,这时候你的内容就可以放在这些创建好的布局中。
Bootstrap 之栅格系统与常用样式_第1张图片

  • 行(row)必须放在continer 布局容器里面
  • 我们实现列的平均划分,需要给列添加类前缀
  • xs-extra small:超小;sm-small :小, md-medium:中等, lg-large:大;
  • 列(column)大于12,多余的列所在的元素将被作为一个整体另起一行排列
  • 每一列默认有左右15像素的padding
  • 可以同时为一列指定多个设备的类名,以便划分不同份数,例如class=“col-md-4,col-sm-6”

看一个实例代码:

<div class="container">
        <div class="row">
           <div class="col-md-3">1</div>
           <div class="col-md-3">2</div>
           <div class="col-md-3">3</div>
           <div class="col-md-3">4</div>
         </div>
       <br>
       <div class="row">
           <div class="col-md-6">1</div>
           <div class="col-md-2">2</div>
           <div class="col-md-2">3</div>
           <div class="col-md-1">4</div>
       </div>
   
       <br><br>
  
       <div class="row">
           <div class="col-md-6">1</div>
           <div class="col-md-2">2</div>
           <div class="col-md-2">3</div>
           <div class="col-md-3">4</div>
       </div>
</div>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

结果可以看到如果列数相加等于12,则列数能占满整个的 container 的宽度,如果列数相加小于12,列数将占不满整个的 container 的宽度,如果列数相加大于12,则列数会 另起一行显示

3、栅格系统使用

<div class="container">
        <div class="row">
             <div class="col-lg-3 col-md-4 col-sm-6">你第一好看</div>
             <div class="col-lg-3 col-md-4 col-sm-6">你第二好看</div>
             <div class="col-lg-3 col-md-4 col-sm-6">你第三好看</div>
             <div class="col-lg-3 col-md-4 col-sm-6">你第四好看</div>
             
        </div>  
    </div>

随着屏幕的变化,列数也随着宽度发生改变
Bootstrap 之栅格系统与常用样式_第2张图片

4、栅格系统列嵌套

栅格系统内置的栅格系统内容再次嵌套,简单理解就是一个列内分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*内,看代码

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 列嵌套一个行,row可以取消父元素的padding值,而且高度自动和父级一样高 -->
                <div class="row">
                     <div class="col-md-6">a</div>
                     <div class="col-md-6">b</div>
               </div>
            </div>    
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>  
        </div>  
    </div>

在这里插入图片描述

注意:如果在列中嵌套一个行,row可以取消父元素的padding值,而且高度自动和父级一样高

5、栅格系统列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距。

 <div class="container">
        <div class="row">
            <!-- 偏移的份数就是12-两个盒子的份数=6 -->
            <div class="col-md-3">左侧</div>
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 如果只有一个盒子那么就偏移=12-8/2 -->
            <div class="col-lg-8 col-md-offset-2">中间</div>
        </div>
    </div>

在这里插入图片描述

6、栅格系统列排序

列排序其实就是改变列的方向,改变左右浮动,并且设置浮动的距离,bootstrap中通过添加类名.col-md-push-*.col-md-push-* (其中* 代表移动的列组合数,往前pull,往后push)改变列的顺序。

  <div class="container">
        <div class="row">      
            <div class="col-md-4 col-lg-push-8">左侧</div>
            <div class="col-md-8 col-lg-pull-4">右侧</div>
        </div>
       
    </div>

在这里插入图片描述
这样就可以实现位置的调换啦

列偏移和列排序的区别:如果列偏移列数总和大于12,此时多余的列也会跟着偏移,列排序中如果列数总和大于12,在移动过程中会存在覆盖现象。往后偏移后面执行的会覆盖前面执行的,往前偏移前面执行的会覆盖后面执行的。

7、响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
Bootstrap 之栅格系统与常用样式_第3张图片

我们来模拟一下效果

<div class="container">
        <div class="row">
           <div class="col-xs-3">
               <span class="visible-lg">我会显示奥</span>
           </div>
           <div class="col-xs-3 hidden-xs">看我去哪了那</div>
           <div class="col-xs-3 hidden-md">我会变魔术奥</div>
           <div class="col-xs-3">4</div>
        </div>
    </div>

Bootstrap 之栅格系统与常用样式_第4张图片

动画中我们可以看到当屏幕变为中等屏幕的时候,我会变魔术奥会隐藏起来,当屏幕变为小屏幕的时候,看我去哪了那会隐藏起来,超大的屏幕才会显示字样我会显示奥

三、Bootstrap 常用样式

1、排版

1)标题

HTML 中的所有标题标签,

均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>

Bootstrap 之栅格系统与常用样式_第5张图片
通过引入bootstrap样式可以对比标题的区别,第二个是引入之后的标题样式。明显看到字体变淡了不少。

2)段落

通过.lead来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理),通过.samll来减小字号

  <p>你好你好你好你好</p>
  <p class="lead">你好你好你好你好</p>
  <p >你好<small>你好</small>你好你好</p>

Bootstrap 之栅格系统与常用样式_第6张图片

3)强调和对齐效果

强调效果通过使用text-primary,text-success,text-danger,text-info,text-warning,text-secondary来进行设置。

<div class="container">
        <div  class="text-primary ">主要深灰色</div>
        <div  class="text-success">成功绿色</div>
        <div  class="text-danger">危险红色</div>
        <div  class="text-info">通知浅蓝色</div>
        <div  class="text-warning">警告蓝色 </div>
        <div  class="text-secondary">次要褐色</div> 
    </div>

对齐效果常常使用 text-align来实现文本的对齐风格的设置
其中主要有四种风格:
左对齐,取值left;
右对齐,取值right;
居中对齐,取值center;
两端对齐,取值justify;

       <p class="text-left">居左</p>
       <p class="text-right">居右</p>
       <p class="center">居中</p>
       <p class="justify">两侧对齐</p>

在这里插入图片描述这里两侧对齐由于文字少,所以效果不明显。

2、列表

在html文档中,列表主要有无序列表,有序列表,定义列表。在Bootstrap 中,可以利用.list-unstyled形成点列表和.list-inline形成内联列表,这两个是比较常用的在我们布局过程中。看一下啊效果图作比较。

		<!-- 去点列表 -->
        <ul class="list-unstyled">
            <li>无序列表一</li>
            <li>无序列表二</li>
        </ul>

        <!-- 内联列表 -->
        <ol class="list-inline">
            <li>有序列表一</li>
            <li>有序列表二</li>
        </ol>

Bootstrap 之栅格系统与常用样式_第7张图片

3、表格

3.1表格样式
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应的表格,在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格。
基础样式:
1)table:基础表格
附加样式:
1).table-striped:斑马线表格
2).table-striped:带边框的表格
3).table-hover:鼠标悬停的表格
4).table-condensed:紧凑型表格

3.2 tr 、th 、td样式
通过这些状态类可以为行或单元格设置颜色。

.active:鼠标悬停在行或单元格上时所设置的颜色
.success :标识成功或积极的动作
.info :标识普通的提示信息或动作
.warning:标识警告或需要用户注意
.danger :标识危险或潜在的带来负面影响的动作

 <table class="table table-striped table-bordered table-hover table-condensed ">
            <tr class="info">
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr class="success">
                <td>小明</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="warning">
                <td>小红</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="active">
                <td>小王</td>
                <td>14</td>
                <td></td>
            </tr>
            <tr class="danger">
                <td>小白</td>
                <td>13</td>
                <td></td>
            </tr>
          </table>

Bootstrap 之栅格系统与常用样式_第8张图片

从表格中可以清晰看到悬停效果和斑马线效果

4、表单

表单主要功能是用来与用户交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通,表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

      <input type="text"/><br>
          <select>
              <option >请选择城市</option>
              <option >上海</option>
              <option >北京</option>
          </select><br>
         <textarea name="" id="" cols="30" rows="10"></textarea>
          <br><br>

传统表单控件的样式没有美感,如图:
Bootstrap 之栅格系统与常用样式_第9张图片
看一下加入Bootstrap 样式之后表单控件的样式,分条演示:

4.1 文本框

当我们加入Bootstrap样式之后,文本框样式的区别

  <!-- 文本框 -->
<input type="text" class="form-control"><br>
<input type="text" class="form-control input-lg"><br>
 <input type="text" class="form-control input-sm"><br>

Bootstrap 之栅格系统与常用样式_第10张图片

4.2 下拉框

Bootstrap样式下,对于标记了 multiple 属性的 控件来说,默认显示多选项。

<div class="row">
           <div class="col-md-3">
           <select class="form-control"  multiple="multiple">
               <option>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
             </select>
         </div>
         </div>

未标记 multiple 属性
Bootstrap 之栅格系统与常用样式_第11张图片
标记了 multiple 属性
Bootstrap 之栅格系统与常用样式_第12张图片

4.3 文本域

Bootstrap 样式中支持多行文本的表单控件。可根据需要改变 rows 属性。

   <div class="row">
            <div class="col-md-3">
                <textarea class="form-control" rows="3"></textarea>
           </div>
   </div>

4.4、多选和单选框

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。

<div class="checkbox">
          <label>
            <input type="checkbox" value="">
              跑步
          </label>       
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">
             唱歌
           </label>
    
        
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>1 </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked>2 </label>
        </div>
        <div class="radio disabled">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked>3  </label>
        </div>

Bootstrap 之栅格系统与常用样式_第13张图片
内联单选和多选框

<label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
          </label>
          <br>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
          </label>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
          </label>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
          </label>

在这里插入图片描述

5、按钮

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<div class="container">
     <button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
  </div>

在这里插入图片描述

除了给按钮提供样式之外,还可以给普通元素也提供颜色。

    <a href="#" class="btn btn-success">a标签</a>
    <span class="btn btn-danger">span标签</span>
    <div class="btn btn-info">div标签</div>

在这里插入图片描述
设置按钮大小:使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

      <p>
        <button type="button" class="btn btn-primary btn-lg">(大按钮)</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary">(默认尺寸)</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-sm">(小按钮)</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-xs">(超小尺寸)</button>
      </p>

Bootstrap 之栅格系统与常用样式_第14张图片

6、表单布局

水平表单:通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
          <div class="col-sm-3">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-3">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox"> 记住我
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-3">
            <button type="submit" class="btn btn-default">登录</button>
          </div>
        </div>
      </form>
    </div>

Bootstrap 之栅格系统与常用样式_第15张图片
内联表单:为

元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。

<form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="name">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="email">
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>

在这里插入图片描述

你可能感兴趣的:(bootstrap,css,html)