Bootstrap入門學習

  • 時間:2018-09-13 22:40 作者:程序猿Monster 來源:程序猿Monster 閱讀:243
  • 掃一掃,手機訪問
摘要:********Bootstrap框架************Bootstrap詳情****Bootstrap是Twitter開源的基于HTML、CSS、JavaScript的前臺框架。它是為實現快速開發Web應使用程序而設計的一套前臺工具包。它支持響應式布局,并且在V3版本之后堅持移動設施優先。*

********Bootstrap框架********

****Bootstrap詳情****

Bootstrap是Twitter開源的基于HTML、CSS、JavaScript的前臺框架。

它是為實現快速開發Web應使用程序而設計的一套前臺工具包。

它支持響應式布局,并且在V3版本之后堅持移動設施優先。

****為什么要用Bootstrap?****

在Bootstrap出現之前:

命名:重復、復雜、無意義(想個名字吃力)

樣式:重復、冗余、不規范、不和諧

頁面:錯亂、不規范、不和諧

在用Bootstrap之后: 各種命名都統一并且規范化。 頁面風格統一,畫面和諧。

****Bootstrap下載****

官方地址:https://getbootstrap.com

中文地址:http://www.bootcss.com/

****Bootstrap環境調試****

目錄結構:

bootstrap-3.3.7-dist/

├── css // CSS文件

│ ├── bootstrap-theme.css // Bootstrap主題樣式文件

│ ├── bootstrap-theme.css.map

│ ├── bootstrap-theme.min.css // 主題相關樣式壓縮文件

│ ├── bootstrap-theme.min.css.map

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css // 核心CSS樣式壓縮文件

│ └── bootstrap.min.css.map

├── fonts // 字體文件

│ ├── glyphicons-halflings-regular.eot

│ ├── glyphicons-halflings-regular.svg

│ ├── glyphicons-halflings-regular.ttf

│ ├── glyphicons-halflings-regular.woff

│ └── glyphicons-halflings-regular.woff2

└── js // JS文件

├── bootstrap.js

├── bootstrap.min.js // 核心JS壓縮文件

└── npm.js

解決依賴

因為Bootstrap的某些組件依賴于jQuery,所以請確保下載對應版本的jQuery文件,來保證Bootstrap相關組件運行正常。

****Bootstrap全局樣式****

排版、按鈕、表格、表單、圖片等我們常使用的HTML元素,Bootstrap中都提供了全局樣式。

我們只需在基本的HTML元素上通過設置class就能夠應使用上Bootstrap的樣式,從而使我們的頁面更美觀和諧。

**標題相關**

*標題*

一級標題36px

二級標題30px

三級標題24px

四級標題18px

五級標題14px

六級標題12px

一級標題36px

二級標題30px

三級標題24px

四級標題18px

五級標題14px

六級標題12px

*副標題*

一級標題小標題

**文本對齊**

文本左對齊

文本居中

文本右對齊

**文本大小寫**

Lowercased text.

Uppercased text.

Capitalized text.

**表格**

Class 形容

.table-striped條紋狀表格

.table-bordered帶邊框的表格

.table-hover鼠標懸停變色的表格

.table-condensed緊縮型表格

.table-responsive響應式表格

**狀態類**

Class 形容

.active鼠標懸停在行或者單元格上時所設置的顏色

.success標識成功或者積極的動作

.info標識普通的提醒信息或者動作

.warning標識警告或者需要使用戶注意

.danger標識危險或者潛在的帶來負面影響的動作

**表單**

內聯表單

表單狀態

帶圖標的表單

**按鈕**

Link

*按鈕樣式*

*按鈕大小*

**圖片**

Responsive image

*圖片形狀*

https://img.songma.com/wenzhang/20180913/g2qphdbpnis6

https://img.songma.com/wenzhang/20180913/g2qphdbpnis6

https://img.songma.com/wenzhang/20180913/g2qphdbpnis6

**輔助類**

*文本顏色*

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

*背景顏色*

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

*關閉按鈕*

*下拉三角*

*快速浮動*

http://toutiao.com/group/6600625038683013646/...

http://toutiao.com/group/6600625038683013646/...

*內容塊居中*

http://toutiao.com/group/6600625038683013646/...

*清理浮動*

http://toutiao.com/group/6600625038683013646/...

*顯示與隱藏*

http://toutiao.com/group/6600625038683013646/...

*******常使用Bootstrap組件*******

1.字體圖標

2.下拉菜單

3.按鈕組

4.輸入框俎

5.導航

6.分頁

7.標簽和徽章

8.頁頭

9.縮率圖

10.進度條

模擬滾動的進度條:

var $d1 = $("#d1");

var width = 0;

var theID = setInterval(setValue, 200);

function setValue() {

if (width === 100) {

clearInterval(theID);

} else {

width++;

$d1.css("width", width+"%").text(width+"%");

}

}

********響應式開發********

****為什么要進行響應式開發?****

隨著移動設施的流行,網頁設計必需要考慮到手機端的設計。同一個網站為了兼容PC端和手機端顯示,就需要進行響應式開發。

****什么是響應式?****

利使用媒體查詢,讓同一個網站兼容不同的終端(PC端、手機端)呈現不同的頁面布局。

****使用到的及時:****

[email protected]查詢

使用于查詢設施能否符合某一特定條件,這些特定條件包括屏幕尺寸、能否可觸摸、屏幕精度、橫屏豎屏等信息。

常見屬性:

device-width, device-height 屏幕寬、高

width,height 渲染窗口寬、高

orientation 設施方向

resolution 設施分辨率

語法:

@media mediatype and|not|only (media feature) {

CSS-Code;

}

不同的媒體用不同的stylesheet

viewport

手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中,通常這個虛擬的"窗口"(viewport)比屏幕寬,這樣就不使用

把每個網頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),使用戶可以通過平移和縮放來看網頁的不

同部分。

設置viewport

一個常使用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下:

width:控制 viewport 的大小,可以指定的一個值,假如 600,或者者特殊的值,如 device-width 為設施的寬度(單位為縮放為 100% 時的 CSS 的像素)。

height:和 width 相對應,指定高度。

initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。

maximum-scale:允許使用戶縮放到的最大比例。

minimum-scale:允許使用戶縮放到的最小比例。

user-scalable:使用戶能否可以手動縮放。

Bootstrap的柵格系統

container

row

column

注意事項: 用Bootstrap的時候不要讓自己的名字與Bootstrap的類名沖突。

********JavaScrip插件********

****常使用的Bootstrap自帶插件****

**模態框**

模態框的HTML代碼放置的位置

務必將模態框的HTML代碼放在文檔的最高層級內(也就是說,盡量作為 body 標簽的直接子元素),以避免其余組件影響模態框的展示和/或者功能。

*HTML代碼*

注意事項:

1.通過為模態框設置 .bs-example-modal-lg和 .bs-example-modal-sm來控制模態框的大小。

2.通過 .fade類來控制模態框彈出時的動畫效果(淡入淡出效果)。

3.通過在 .modal-bodydiv中設置 .row可以用Bootstrap的柵格系統。

*調使用方式*

1.通過data屬性

通過在一個觸發彈出模態框的元素(例如:按鈕)上增加 data-toggle="modal"屬性,而后設置 data-target="#foo"屬性或者 href="#foo"屬性,使用來指向被控制的模態框。

2.通過JS代碼調使用

$('#myModal').modal("show"); // 顯示

$('#myModal').modal("hide") // 隱藏

常使用參數:

名稱可選值默認值形容

backdroptrue/false/'static'truefalse表示有沒有遮罩層,'static'表示點擊遮罩層不關閉模態框

keyboardtrue/falsetrue鍵盤上的 esc 鍵被按下時關閉模態框。

showtrue/falsetrue模態框初始化之后就立即顯示出來。

方法:

$('#myModal').modal({

keyboard: false

})

**輪播圖**

*HTML代碼*

可以再為圖片增加詳情信息

https://img.songma.com/wenzhang/20180913/g2qphdbpnis6

方法:

設置切換間隔為2秒,默認是5秒。

$('.carousel').carousel({

interval: 2000

})

****其余常使用插件****

待續。。。

********Bootstrap實例精選:********

1.封面圖

2.Carousel

3.博客頁面

4.控制臺

5.登錄頁

6.Offcanvas

  • 全部評論(0)
最新發布的資訊信息
【系統環境|】干貨整理!零基礎html5網站開發學習步驟方法(保存不后悔)(2019-09-10 16:27)
【系統環境|】「前端入門」前端基本概念(2019-09-07 21:36)
【系統環境|】小白入門學習web前端,這些干貨不能少(2019-09-05 20:59)
【系統環境|】不是計算機專業,哪個專業更適合學習web前端(2019-09-03 20:31)
【系統環境|】入行web前端開發可以做什么工作(2019-09-02 20:51)
【系統環境|】什么是Web前端呢?為什么說web前端開發人員的薪資高、前景好呢?(2019-08-31 20:55)
【系統環境|】2019年Web前端開發的8個趨勢,你知道幾個?(2019-08-29 16:23)
【系統環境|】學習web前端,掌握這些,才有底氣跟面試官提薪資(2019-08-28 15:23)
【系統環境|】Web前端為什么那么好(2019-08-27 18:20)
【系統環境|】月入35k大佬總結:web前端必須學習的內容(附全套前端教程)(2019-08-26 13:48)
手機二維碼手機訪問領取大禮包
返回頂部
双色球号码300期遗传走势图