包含cdnbootstrap.min.js的詞條

本文目錄一覽：

• 1、Bootstrap免費 CDN 加速服務/Bootstrap文件怎麼引入
• 2、bootstrap怎麼快速使用
• 3、bootstrap 導航條下拉菜單點擊無反應？
• 4、怎麼在頁面里引入bootstrap的css和js文件

Bootstrap免費 CDN 加速服務/Bootstrap文件怎麼引入

在你的head標籤裡面加link rel=”stylesheet” href=”” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”

在body後面加script src=”” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”/script

bootstrap怎麼快速使用

Bootstrap 整體架構

為什麼在引言我稱為Bootstrap為一個前端樣式框架呢？可能這樣的稱謂並不是很準確，但是我覺得這樣的稱呼可以讓一些初學者可以更快明白和明白Bootstrap到底是一個什麼東西。我總結東西不喜歡用一些高大上的詞語來加深某個知識的理解，反而更喜歡用一些大家通俗易懂的詞語來描述知識點。雖然這樣的描述方式可能會有點不準確，但是我覺得則沒什麼大不了的，因為這樣的描述確實可以讓初學者更快理解這個知識。因為我在學習知識點的時候就有這樣的困惑，有些知識官方文檔都說的高大上，其實說白了也就是以前的一些東西，然後進行封裝使得開發更加簡單和快速罷了。所以這裡我分享Bootstrap框架也是這樣的。並且內容組織方面也是為了讓初學者更好地掌握。因為我剛開始接觸的時候也是一個初學者。我自認為這樣的組織方式可以更快更好地理解知識。

對於Bootstrap，首先要介紹而是它的整體架構——它到底由什麼組成的。相信大家看下面一張圖就可以很快明白Bootstrap中具體由哪些東西組成的。

從上面的圖，可以清楚看到，Bootstrap主要有下面幾部分組成：

12柵格系統——就是將屏幕平分12份（列）。使用行(row)來組織元素（每一行都包括12個列），然後將內容放在列內。通過col-md-offset-*來控制列偏移。

基礎布局組件——Bootstrap提供了多種基礎布局組件。如排版、代碼、表格、按鈕、表單等。

Jquery——Bootstrap所有的JavaScript插件都依賴於Jquery的。如果要使用這些JS插件，就必須引用Jquery庫。這也是為什麼我們在除了要引用Bootstrap的JS文件和CSS文件外，還需要引用Jquery庫的原因，兩者是依賴關係。

CSS組件——Bootstrap為我們預實現了很多CSS組件。如下拉框、按鈕組、導航等。也就是說Bootstrap內容幫我們定義好了很多CSS樣式，你可以將這些樣式直接應用到之前的下拉框等元素里。

JavaScript插件——Bootstrap也為我們實現了一些JS插件，我們可以用其提供的插件要完成一些常用功能，而不需要我們再重新寫JS代碼來實現像提示框，模態窗口這樣的效果了。

響應式設計——這就是一個設計理念。響應式的意思就是它會根據屏幕尺寸來自動調整頁面，使得前端頁面在不同尺寸的屏幕上都可以表現很好。

Bootstrap就是由上面幾部分組成的。上面已經都每個組成部分做了一個簡單的介紹，接下來的內容無非是通過一些實例來對每個組成部分進行一個詳細的介紹罷了。

三、12柵格系統

Bootstrap定義12柵格系統，就是為了更好的布局。每個前端框架都首先要定義好的就是布局系統。在Bootstrap裡面，就是利用行和列來創建頁面布局的。其布局有幾個原則：

行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中

每行都包含12列

將內容放置在每列中　

在bootstrap的柵格系統中，根據寬度將瀏覽器分為4種。其值分別是：自動（100%）、750px、970px、 1170px。

對應的樣式為超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）

其本就是通過媒體查詢定義最小寬度實現。所以，Bootstrap做出來的網頁向大兼容，向小不兼容！

在Bootstrap框架內，已預先定義好了屏幕大小的分界值，其分界值得定義就是通過媒體查詢來定義的。其定義方式如下：

/* 超小屏幕（手機，小於 768px） */

/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */

/* 小屏幕（平板，大於等於 768px） */

@media (min-width: @screen-sm-min) { … }

/* 中等屏幕（桌面顯示器，大於等於 992px） */

@media (min-width: @screen-md-min) { … }

/* 大屏幕（大桌面顯示器，大於等於 1200px） */

@media (min-width: @screen-lg-min) { … }

其實Win8應用開發中也應用了媒體查詢來實現可響應式的應用。所以大家以後如果聽到了可響應系統不要覺得很高深哦，其實就是框架為我們定義了媒體查詢，如果超過了媒體查詢中定義的最小寬度對應某個類型屏幕，通過這樣的方式，就可以在不同屏幕之間收縮元素大小來適應屏幕。然而Bootstrap提出的概念是移動設備優先的，所以Bootstrap設計出來的頁面只能向大兼容，向小不兼容。

四、基礎布局組件

基礎布局組件就是Bootstrap框架內為一些基礎布局的標籤定義了一些統一的樣式。如Table、按鈕、表單等。下面讓我們看一個Table的例子：

!DOCTYPE html

html lang=”zh-CN”

head

meta charset=”utf-8″

meta http-equiv=”X-UA-Compatible” content=”IE=edge”

meta name=”viewport” content=”width=device-width, initial-scale=1″

!– 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ —

titleBootstrap 101 Template/title

!–因為這裡沒有使用到Bootstrap的JS插件，所以就沒有引用Jquery組件–

!– Bootstrap —

link rel=”stylesheet” href=””

/head

body

h3默認樣式的Table/h3

table class=”table”

caption表標題./caption

!– 表頭，組合為t+head, t代表table的意思–

thead

tr

thID/th

thFirst Name/th

thLast Name/th

/tr

/thead

tbody

tr

th scope=”row”1/th

tdTommy/td

tdLi/td

/tr

tr

th scope=”row”2/th

tdBob/td

tdsan/td

/tr

tr

th scope=”row”3/th

tdSam/td

tdwang/td

/tr

/tbody

/table

h3帶邊框的表格/h3

table class=”table-bordered”

caption表標題./caption

!– 表頭，組合為t+head, t代表table的意思–

thead

tr

thID/th

thFirst Name/th

thLast Name/th

/tr

/thead

tbody

tr

th scope=”row”1/th

tdTommy/td

tdLi/td

/tr

tr

th scope=”row”2/th

tdBob/td

tdsan/td

/tr

tr

th scope=”row”3/th

tdSam/td

tdwang/td

/tr

/tbody

/table

!– 更多表格樣式參考： ;

!– jQuery (necessary for Bootstrap’s JavaScript plugins) —

script src=””/script

!– Include all compiled plugins (below), or include individual files as needed —

script src=””/script

/body

/html

具體的運行效果：在此運行。

對於Button和表單的例子代碼這裡就不貼了，大家可以通過下面的鏈接查看運行效果和查看源碼。也可以通過最後的下載文件來下載本專題的所有源碼。

Button例子的運行效果：在此運行

表單例子的運行效果：在此運行

五、CSS組件

CSS組件和基礎布局組件差不多，也就是Bootstrap為一些標籤定義了一些已有的樣式，這些樣式運行的效果都非常美觀，這樣每個公司或開發人員都不需要再去寫一篇樣式，從而加快開發效率。這裡直接看一個導航的例子吧。說白這個東西，你用多了自然就熟了。

!DOCTYPE html

html lang=”zh-CN”

head

meta charset=”utf-8″

meta http-equiv=”X-UA-Compatible” content=”IE=edge”

meta name=”viewport” content=”width=device-width, initial-scale=1″

!– 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ —

titleBootstrap 101 Template/title

!– Bootstrap —

link rel=”stylesheet” href=””

/head

body

h3導航條/h3

nav class=”navbar navbar-default navbar-inverse”

div class=”container-fluid”

!– Brand and toggle get grouped for better mobile display —

div class=”navbar-header”

button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”

span class=”sr-only”Toggle navigation/span

span class=”icon-bar”/span

span class=”icon-bar”/span

span class=”icon-bar”/span

/button

a class=”navbar-brand” href=”#”Home/a

/div

!– Collect the nav links, forms, and other content for toggling —

div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″

ul class=”nav navbar-nav”

li class=”active”a href=”#”Home span class=”sr-only”(current)/span/a/li

lia href=”#”About/a/li

/ul

ul class=”nav navbar-nav navbar-right”

lia href=”#”Link/a/li

li class=”dropdown”

a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”Dropdown span class=”caret”/span/a

ul class=”dropdown-menu”

lia href=”#”Action 1/a/li

lia href=”#”Action 2/a/li

lia href=”#”Action 3/a/li

li role=”separator” class=”divider”/li

lia href=”#”Separated Action/a/li

/ul

/li

/ul

/div!– /.navbar-collapse —

/div!– /.container-fluid —

/nav

!– jQuery (necessary for Bootstrap’s JavaScript plugins) —

script src=””/script

!– Include all compiled plugins (below), or include individual files as needed —

script src=””/script

/body

/html

bootstrap 導航條下拉菜單點擊無反應？

第一步:梳理js的加載順序

!– jquery —

script src=””/script

!– bootstrap —

script src=””

      integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl”

      crossorigin=”anonymous”/script

!– 用於彈窗、提示、下拉菜單 —

script src=””

      integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q”

      crossorigin=”anonymous”/script

1

2

3

4

5

6

7

8

9

10

還沒有解決的話,繼續第二步:初始化下拉菜單,頁面加入以下js代碼

script type=”text/javascript”

  $(function () {

      // 解決bootstrap下拉菜單第一次點擊無反應問題

      $(‘.dropdown-toggle’).dropdown();

  });

/script

原文鏈接：

怎麼在頁面里引入bootstrap的css和js文件

先到官網下載bootstrap的 css 和 js文件，下載地下：

選擇第一個下載即可，然後複製時面的 css 和 js文件 到你自己的項目里

然後在你項目的文件中引用，引用方法：

link href=”css/bootstrap.min.css” rel=”stylesheet”

script src=””/script

script src=”js/bootstrap.min.js”/script

說明：由於 bootstrap.min.js是基於jQuery實現各種效果，所以在引用 bootstrap.min.js 之前，必須先引用 jquery.min.js

望採納