Twitter Bootstrap Grid System

时间 2019-11-09

标签 bootstrap grid system 栏目 Bootstarp 繁體版

原文原文链接

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

bootstrap通用给你容易的建立相应式展现的能力。css

Twitter Bootstrap的优点：html

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

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

2，建立你的第一个网页：jquery

 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 栅格系统web

Bootstrap 提供最快而且容易的方法来建立网页。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`)