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`)

相關標籤/搜索

bootstrap+bootstrap+scss

Bootstarp

MySQL教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。