1.一、Bootstrap V4自學之路------起步---介紹

時間 2019-11-07

標籤 bootstrap v4 自學之路起步介紹欄目 Bootstarp 简体版

原文原文鏈接

若是快速創建bootstrap V4模板
css

DEMO敬上：html

<!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>

2016-03-27
node

由於學習過程當中，Bootstrap v4 alpha.2 出來了。因此學習過程當中有些總有一些出入。jquery

如今在複習階段，也會開始進行修正。版本將使用alpha.2git

總結：
1.一、下面的<link>樣式表粘貼到你的網頁的<head>裏面，放在在其餘樣式表文件以前。
web

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

1.二、把這個JavaScript插件以及JQuery放在你的網頁的末尾附近，就在</body>標籤前面。記住須要先添加jQuery，由於咱們的代碼依賴於它。ajax

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

1.三、Bootstrap V4 要求使用HTML5文檔類型。不然可能出現不協調等因素。npm

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

1.四、因爲Bootstrap是基於移動設備優先，因此必須在<head>標籤內添加視圖標籤。bootstrap

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

1.五、盒尺寸c#

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

PS：這裏我理解的是從新定義的.selector-for-some-widget類，將會修改全部嵌套的元素。（未驗證）

1.六、Normalize.css

PS:這裏個人理解是校訂不一樣的設備和瀏覽器中細小的不一樣。

相似規定手機顯示爲1像素，PC網頁顯示2像素。（未驗證）

1.七、社區 ---- 整段複製，各取所需。

要想始終關注Bootstrap的最新開發進展，歡迎加入社區以獲取有用的資源。
在推特上關注@getbootstrap on Twitter。
閱讀並向The Official Bootstrap Blog投稿。
加入the official Slack room。
在 IRC 與 Bootstrap 人交談。在 irc.freenode.net 服務器上，或者 ##bootstrap 頻道里。
可在 Stack Overflow 中找到實施幫助（標記 twitter-bootstrap-3）。
爲了獲取最大的功能，請使用經過 npm 或者相似的傳遞機制來分發內容。開發者須要使用封裝上的關鍵字 bootstrap，它可以改進或者增長 Bootstrap 的功能。
你也能夠在推特上關注@getbootstrap 來得到最新的消息和一些很棒的音樂視頻。

相關標籤/搜索

每日一句

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