CSS使用——使用bootstrap3作出漂亮的网页 part1

本文假设读者有基本的HTML5+CSS3的知识（知道基本语法），但是不知道如何写出比较漂亮页面。
本文基于http://v3.bootcss.com/css/

再次基础上，如果想要快速美观的写好一个页面的前端，最好的选择是bootstrap3
下载使用
http://v3.bootcss.com/getting-started/#download

基础知识

见w3c吧....
上个图说明下div块的基本组成

img1.gif

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

• 行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

这就是说这样的代码是主格调

    

        

              

                <- 这是你的内容 ->
             
    

全局 CSS 样式 · Bootstrap 中文文档.png

如果你想写出这样排版的页面，根据上面的规则，那么这将是你的代码

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

列偏移

使用使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

  
.col-md-4
  
.col-md-4 .col-md-offset-4

嵌套列

列中可以再次使用

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

类排版

熟悉markdown的话，就能明白排版的重要性了
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

如果要使得莫个段落

突出显示可以这样

...

markdown的语法到最后都是转换成html来显示的，这里的内容作为html5的内容不这里垒述

表单

独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。</p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 348px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/aa207ebebcf744faac173e0d1546fb3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/aa207ebebcf744faac173e0d1546fb3f.jpg" width="650" height="269" alt="CSS使用——使用bootstrap3作出漂亮的网页 part1_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 全局 CSS 样式 · Bootstrap 中文文档.png </div> </div> <p>如上图是最基本的一个表单的例子，下面是代码</p> <pre><code><form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </code></pre> <blockquote> <p>需要手动设置宽度<br> 在 Bootstrap 中，inputs、select和 textarea 元素默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。</p> </blockquote> <p>如果你想让表单都在一行的话，那么只要将最上面的<form role="form">修改为<form class="form-inline" role="form"><br> 就行了</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 96px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/0b3aafe3632943f8a8e49dfdf4eefec6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/0b3aafe3632943f8a8e49dfdf4eefec6.jpg" width="650" height="79"></a> </div> </div> <div class="image-caption"> 全局 CSS 样式 · Bootstrap 中文文档.png </div> </div> <p><strong><em>水平排列的表单</em></strong> 感觉这个更常用啊</p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 247px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/4211f4f244e94e47bf2402c7a5cfb1e1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/4211f4f244e94e47bf2402c7a5cfb1e1.jpg" width="650" height="190" alt="CSS使用——使用bootstrap3作出漂亮的网页 part1_第4张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 全局 CSS 样式 · Bootstrap 中文文档.png </div> </div> <br> <p>代码如下</p> <pre><code><form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <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">Password</label> <div class="col-sm-10"> <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"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </code></pre> <h3>被支持的控件</h3> <p>基本输入</p> <pre><code><input type="text" class="form-control" placeholder="Text input"> </code></pre> <p>文本域<br> 支持多行文本的表单控件。可根据需要改变 rows 属性。</p> <pre><code><textarea class="form-control" rows="3">

多选和单选框
默认的方式

全局 CSS 样式 · Bootstrap 中文文档.png

  
    
    Option one is this and that—be sure to include why it's great
  


  
    
    Option two is disabled
  



  
    
    Option one is this and that—be sure to include why it's great
  


  
    
    Option two can be something else and selecting it will deselect option one
  


  
    
    Option three is disabled
  

横行的方式

全局 CSS 样式 · Bootstrap 中文文档.png

   1


   2


   3



   1


   2


   3

列表

全局 CSS 样式 · Bootstrap 中文文档.png

  1
  2
  3
  4
  5



  1
  2
  3
  4
  5

好了，表单中的重头戏来了，表单的验证状态

全局 CSS 样式 · Bootstrap 中文文档.png

  Input with success
  


  Input with warning
  


  Input with error
  

在右侧增加状态图

全局 CSS 样式 · Bootstrap 中文文档.png

  Input with success
  
  


  Input with warning
  
  


  Input with error
  
  

为输入项增加帮助文本

全局 CSS 样式 · Bootstrap 中文文档.png

A block of help text that breaks onto a new line and may extend beyond one line.