BootStrap4 中文版

時間 2019-11-11

標籤 bootstrap4 bootstrap 中文版欄目 Bootstarp 简体版

原文原文鏈接

中文版網站：www.boot4.com

介紹

Bootstrap 是世界上最流行的用於創建響應式、移動設備爲主的站點和應用的框架。在其中你能夠發現高質量的 HTML、CSS 和 JavaScript 來讓你的工程變得無比簡單。css

下面就是如何快速的上手 Bootstrap CDN 和創建一個模板頁面。html

快速開始

想要快速的將 Bootstrap 加入到你的工程中？那就使用 Bootstrap CDN，由 MaxCDN 免費提供。想使用一個程序包管理器或者須要下載源文件？前往下載頁面。

在其餘的樣式表載入到咱們的 CSS 中以前，粘貼複製樣式表 <link> 到你的 <head> 中。

Copy

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">

將 JavaScript 插件和 jQuery 添加到頁面的末尾位置，就在 </body> 前。記住首先要添加 jQuery 由於咱們的代碼要依賴它。

Copy

<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

這樣就好了–你正在創建一個徹底使用 Bootstrap 站點的路上。若是你還對通常頁面結構不是很熟悉的話，繼續閱讀一些頁面模板例子的代碼吧。

起始模板

要確認你的頁面是創建在最新的設計和開發標準之上的，這意味着：

使用 HTML5 文檔類型
要使 Internet Explorer 使用最新的渲染模式（閱讀更多）
接下來，使用視圖元標籤

將它們放在一塊兒，你的頁面就會看起來像這樣：

Copy

<!DOCTYPE html> <html lang="en">   <head>     <!-- Required meta tags always come first -->     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">   </head>   <body>     <h1>Hello, world!</h1>     <!-- jQuery first, then Bootstrap JS. -->     <script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>     <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>   </body> </html>

這就全部你須要完成的頁面配置。閱讀佈局文檔和官方示例來放置你的站點內容和組件。

重要目標

Bootstrap 使用了少數重要的全局樣式和設置，在使用過程當中你必需要注意到，這些幾乎只適用於跨瀏覽器樣式的正常化。讓咱們深刻了解一下：

HTML5 文檔類型

Bootstrap 要求使用 HTML5 文檔類型。沒有它，你就會看見一些並不完整的樣式，可是將它包含進去並不會形成顯著的問題。

Copy

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

響應式元標籤

Bootstrap 被開發出來以移動設備優先，這就要求咱們必需要先爲移動設備優化代碼而後使用 CSS 媒體查詢來擴大組件。爲了保證全部設備的渲染和觸摸效果。要給你的 <head> 添加響應式的視圖元標籤。

Copy

<meta name="viewport" content="width=device-width, initial-scale=1">

你能夠在起始模板中看到這樣的一個例子。

盒模型

對於 CSS 中更多的簡單的尺寸大小，咱們將全局 box-sizing 值從 content-box 改變到 border-box。這保證了padding 並不會影響一個元素的最後計算寬度，可是這也可能會致使一些第三方軟件好比谷歌地圖和谷歌誇讚搜索引擎出現問題。

在極少的狀況下你須要重寫它，好比：

Copy

.selector-for-some-widget {   -webkit-box-sizing: content-box;      -moz-box-sizing: content-box;           box-sizing: content-box; }

有了上面的片斷和嵌套元素–包括經過 :before 和 :after 產生的內容–都會爲了 .selector-for-some-widget 繼承特定的 box-sizing。

瞭解更多有關盒模型和調整 CSS 的技巧。

Normalize.css

爲了改進跨瀏覽器的效果，咱們使用 Normalize.css 來處理在不一樣設備和瀏覽器之間的不一致。以後咱們會用 Reboot創造出的咱們本身的、稍微有些執拗己見的風格來進一步改善這個方面。

社區

始終關注 Bootstrap 的最新開發進展，同時加入社區獲取有用的資源：

在推特上關注 @getbootstrap。
閱讀並向 The Official Bootstrap Blog 投稿。
加入 the official Slack room。
在 IRC 與 Bootstrap 人交談。在 irc.freenode.net 服務器上，或者 ##bootstrap 頻道里。
能夠在 Stack Overflow 中找到實施幫助（標記 twitter-bootstrap-3）。
當爲了獲取最大的功能使用經過 npm 或者相似的傳遞機制來分發時，開發者須要使用封裝上的關鍵字bootstrap，它可以改進或者增長 Bootstrap 的功能。