Twitter Bootstrap Grid System

Bootstrap是什么？
Bootstrap是一个用来快速并且容易的开发web页面，强大的前端框架。它包含html和css基本设计模板，包含通用用户界面组件，如：排版，形式，按钮，表格，导航，下拉框，警告，模式对话框，tab页面，折叠块，Carousel(图片展示) 和其他一些可选的javascript 扩展。

bootstrap通用给你容易的创建相应式展示的能力。

Twitter Bootstrap的优势：

1，节省时间  2，响应式功能(针对不同设备)  3，一致性设计  4， 易用  5，浏览器兼容  6，开源。

 

开始：
1， 下载文件： download Bootstrap files from here.

2， 创建你的第一个网页：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Basic Bootstrap Template</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 8 </head>
 9 <body>
10     <h1>Hello, world!</h1>
11     <script src="http://code.jquery.com/jquery.min.js"></script>
12     <script src="js/bootstrap.min.js"></script>
13 </body>
14 </html>

 

Bootstrap Grid System 栅格系统

Bootstrap 提供最快并且容易的方法来创建网页。

Bootstrap3 包含预定义的栅格类为了快速制作栅格展示针对不同类型的设备，像是手机，平板，pc，等等。如：.col-xs-类来创建栅格列，针对特别小的设备，.col-sm-针对小屏设备。

Container=》row=》col-md-4  

Features 
Bootstrap 3 Grid System		Extra small devices 
Phones (<768px)		Small devices 
Tablets (≥768px)		Medium devices 
Desktops (≥992px)		Large devices 
Desktops (≥1200px)
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Max column width Auto ~62px ~81px ~97px
Gutter width 15px on each side of a column (i.e. 30px)

posted on 2014-07-17 20:29  Henry_Wang  阅读(310)  评论(0)  编辑  收藏  举报

导航