BootStrap入门教程 (一)

BootStrap入门教程 (一)

 

   
 2011年,twitter的“一略带拈”工程师为了提高他们其中的解析以及治本力量,用业余时间为他们的成品构建了一样模拟好用、优雅、灵活、可扩大的前端工具集–BootStrap。Bootstrap由MARK
OTTO和Jacob
Thornton所设计以及建立,在github达开源之后,迅速成为该站上顶多人口watch&fork的门类。大量工程师踊跃为该项目贡献代码,社区震惊地活跃,代码版本进化非常快,官方文档质量最高(可以说凡是雅),同时涌现了成千上万基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。如下图所示:

                                                                       
   https://kippt.com/

图片 1

                                                                       
   
  http://www.fleetio.com/

图片 2

     GitHub上这样介绍
bootstrap:简单利落可用以架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap,具有大量底诱人特性:友好之就学曲线,卓越之兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less齐。本系列教程遵循合法文档结构来介绍bootstrap,包括手脚架(Scaffolding),基础CSS,组件,javascript插件,使用LESS与由定义.本文主要介绍Bootstrap的底蕴布局–Scaffolding.

     
Bootstrap建立了一个响应式的12列格网布局体系,它引入了fixed和fluid-with两种布局方式。我们从大局样式(Global
Style),格网系统(Grid System),流式格网(Fluid grid
System),自定义(Customing),布局(Layouts),响应式设计(Responsive
 Design)
五个点深入教Boostrap的scaffolding.

  1.  大局样式(Global
    Style)
    .Bootstrap要求html5的文件类型,所以必须以每个使用bootstrap页面的启幕都引用:

    <!DOCTYPE html>
    <html lang="en">
      ...
    </html>
    

    再者,它通过Bootstrap.less文件来装全局的排版和连接显示风格.其中去丢了Body的margin,使用@baseFontFamily,@baseFontSize,@linkColor等变量来支配中心排版。

  2.  格网系统(Grid
    System)
    .默认的Bootstrap格网系统提供一个宽达940如从的,12列的格网。这代表你页面默认宽度是940px,最小之单元要素宽度是940/12px.Bootstrap会使得你的网页可以更好地适应多极限设备(平板计算机,智能手机等)。默认格网系统直观概念而图1-1所著: 
                                                                       
                                                                       
                      图1-1 默认格网系统(Default Grid System)          
                                                                       
                                                                       
                 
    以下简的代码则是实现图1-1着,第三列的增长率为4以及幅度为8的片只div.

    <div class="row">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>
    

    2.2  偏移列.
    有时候,页面要素前面需要有些空,bootstrap提供了偏移列来贯彻,如图1-2所著:

                                                                       
          图1-2 偏移列(Offset columns)

    以下代码实现了凡实现图1-2遭受,第一排列的升幅为4同偏移度为4升幅为4之少数个div.

    <div class="row">
      <div class="span4">...</div>
      <div class="span4 offset4">...</div>
    </div>
    

    2.3 嵌套列.
    嵌套列是唯恐用户实现重复复杂的页面要素布局。在bootstrap中实现嵌套列非常简单,只需要在旧的div中加入.row 和对应的长的span* div即可。    
      如图1-3所示:

      
                                                                       
                                                                       
         图1-3     嵌套列(Nesting columns) 

    以下代码实现了是贯彻图1-3蒙,第一层的增长率为12以及第二重合两独增幅为6之少个div.

    图片 3

    <div class="row">
      <div class="span12">
        Level 1 of column
        <div class="row">
          <div class="span6">Level 2</div>
          <div class="span6">Level 2</div>
        </div>
      </div>
    </div>
    

    图片 4

    嵌套的div长度的与非可知凌驾它的父div,否则会漫起叠加。各位好尝试用率先重叠的div长度改变呢其它价值,看看效果。

  3. 流式格网系统(Fluid grid
    system).
    她使用%,而不是稳的px,来规定页面要素的宽度.只待简单的将.row 改成.row-fluid ,就好以fixed行改呢fluid.如图1-4所展示:
                                                     
      
                                                                       
                                                   图1-4
    流式格网系统(Fluid grid system)                                    
                                                                       
                                                                       
       
     以下代码实现了凡兑现图1-4被,两个不等尺寸的流式页面要素.

    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>
    

    嵌套的流式格网和嵌套的定位格网,稍微聊不同。嵌套流式格网(Fluid
    nesting)的子要素不用相当配父要素的大幅度,子要素用100%来代表占满父要素的页面宽度。

  4. 自从定义格网(Grid
    customization)
    .Bootstrap允许通过改variables.less的参数值来自定义格网系统。主要包括要表1-1所出示之变量:

    变量 默认值 说明
    @gridColumns 12 列数
    @gridColumnWidth 60px 每列的宽度
    @gridGutterWidth 20px 列间距

                                                                       
                                表1-1 格网变量                          
                                                                       
                                                                       
                                                                       
           
    我们通过修改上述值,并再编译Bootstrap来贯彻由定义格网系统。如果上加新的排,需要同时修改grid.less.同样的,需要修改responsive.less来取得多配备兼容.

  5. 布局(Layout).本文最后我们谈谈创建页面基础模板的布局。如前方所出口,Bootstrap提供零星种布局方式,包括固定(Fixed)和流式(Fliud)布局。如图1-5所显示,左边为Fixed布局,右边为Fluid布局:
                           
        
                                                                       
                                                图1-5 布局(Layout)      
                                                                       
                                                                       
                                                固定布局代码如下:

    <body>
      <div class="container">
        ...
      </div>
    </body>
    

    流式布局代码如下:

    图片 5

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span2">
          <!--Sidebar content-->
        </div>
        <div class="span10">
          <!--Body content-->
        </div>
      </div>
    </div>
    

    图片 6

    若对Bootstrap提供的布局不够满意,可以参见Less
    Frame Work 提供的模版。

    最后,重复强调,官方文档极其出色,强烈推荐各位直接参考和上之。http://twitter.github.com/bootstrap/index.html

    参考文献与延长阅读:

    1.Bootstrap之因和提高。http://www.alistapart.com/articles/building-twitter-bootstrap/

    2.Less与Sass的介绍及针对比.http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

    3.Html5模板 http://html5boilerplate.com/

    4.Html5跟Bootstrap混合项目(H5BP)https://gist.github.com/1422879

    5.20单有效之Bootstrap资源 http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/

    6.Bootstrap论钮生成器 http://charliepark.org/bootstrap_buttons/

    7.前后端结合讨论
     http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap

    1. Bootstrap英文教程
       http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

     

比如著作由VentLam创作,采用文化共享署名-非商业性使用-相同方式并享
2.5
中国次大陆许可协议开展许可。

相关文章