Web-第五天 BootStrap學(xué)習(xí)

Bootstrap基礎(chǔ)入門

今日內(nèi)容介紹

使用bootstrap重寫首頁

今日內(nèi)容學(xué)習(xí)目標(biāo)

學(xué)會通過官方提供demo實例，完成自己需要的功能。
能夠從已有html文檔中，找到將要修改的位置，并進(jìn)行簡單調(diào)整

第1章案例：重寫首頁

1.1 案例介紹

將使用Bootstrap重寫首頁，整個案例中將使用到Bootstrap各種模塊，為了方便編程，將采用拆分的原則，各個模塊單獨(dú)編寫，最后組合。

1.2 相關(guān)技術(shù)介紹

1.2.1 BootStrap概述

1.2.1.1 什么是BootStrap

Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架（半成品）。其預(yù)定義一套CSS樣式和與樣式對應(yīng)的jQuery代碼，我們只需要提供固定HTML結(jié)構(gòu)，添加固定的class樣式，就可以完成指定效果的實現(xiàn)。
Bootstrap在jQuery的基礎(chǔ)工作，可以理解Bootstrap就是jQuery的一個插件。
Bootstrap 使得 Web 開發(fā)更加快捷，代碼優(yōu)雅，美觀大方。
由Twitter 公司的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)。
Bootstrap基礎(chǔ)入門使用的都是自帶CSS樣式，高級開發(fā)中需要使用HTML5、CSS3、動態(tài)CSS語言Less 進(jìn)行自定義開發(fā)，JavaEE課程中學(xué)習(xí)時“基礎(chǔ)入門”。
國內(nèi)一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來
中文官網(wǎng)：http://www.bootcss.com/

1.2.1.2 什么是響應(yīng)式布局

響應(yīng)式布局：一個網(wǎng)站能夠兼容多個終端(手機(jī)、iPad等)，而不需要為每個終端做一個特定的版本。此概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計師采用這個技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。
Bootstrap就是響應(yīng)式布局最成功的實現(xiàn)，為了兼容不同的瀏覽器采用jQuery，為了適配不同的終端采用CSS3 Media Query （媒體查詢）

1.2.2 環(huán)境搭建

1.2.2.1 下載

中文官網(wǎng)地址：http://d.bootcss.com/bootstrap-3.3.5.zip
GIT地址：https://github.com/twbs/bootstrap/archive/v3.3.6.zip

1.2.2.2 目錄結(jié)構(gòu)

1.2.2.3 內(nèi)容結(jié)構(gòu)

發(fā)布版，及開始使用到的Bootstrap內(nèi)容結(jié)構(gòu)

1.2.2.4 簡潔模板

<!DOCTYPE html>

<head>

<title>Bootstrap 模板</title>

</head>

<body>

</body>

</html>

1.2.2.5 完整模板（了解）

參考文檔：起步/基本模板，http://v3.bootcss.com/getting-started/#template

<!DOCTYPE html>

<html>

<head>

<!--

視口：用于設(shè)置移動瀏覽器顯示效果。

視口的作用：在移動瀏覽器中，當(dāng)頁面寬度超出設(shè)備(device)，瀏覽器內(nèi)部虛擬的一個頁面容器，將頁面容器縮放到設(shè)備這么大，然后展示

取值：

width=device-width, 視口的寬度，大多手機(jī)瀏覽器視口的寬度是980

device-width 表示采用設(shè)備的寬度

initial-scale=1 初始化縮放級別,取值：1-5

minimum-scale=1 最小縮放級別

maximum-scale=1 最大縮放級別

user-scalable=no 禁用縮放

如果設(shè)置“user-scalable=no”，則“minimum-scale”和“maximum-scale”無效

下面實例表示的意思：

根據(jù)設(shè)置確定視口寬度，初始化的縮放比例是2.5，最小縮放比例1.5，最大縮放比例為3，允許在移動設(shè)置縮放

常用值：

-->

<title>Bootstrap 模板</title>

<!-- 使IE8支持HTML5元素特性和CSS3媒體查詢

注意：respond.js 不能本地運(yùn)行（file://），必須放置在web服務(wù)器（http:// ,暫時不用掌握）

-->

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

1.3 重寫首頁之topbar

1.3.1 案例相關(guān)技術(shù)

1.3.1.1 布局容器

幫助手冊：全部CSS樣式/概覽/布局容器，http://v3.bootcss.com/css/#overview-container
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .container 容器。提供的兩個容器如下：

.container 類用于固定寬度并支持響應(yīng)式布局的容器。

<div>

...

</div>

.container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

<div>

...

</div>

例如：

1.3.1.2 柵格

幫助手冊：全部CSS樣式/柵格系統(tǒng)，http://v3.bootcss.com/css/#grid-options
Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。
柵格特點(diǎn)

“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中
“列（column）” 可以作為行（row）”的直接子元素。
行使用的樣式“.row”，列使用樣式“col-*-*” 內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)
列大于12時，將另起一行排列
柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對小屏幕設(shè)備覆蓋柵格類。

柵格參數(shù)：“col-*-*”

large : lg

medium : md

small: sm : sm

x small : xs

例如：

<div>

</div>

<div>

</div>

1.3.1.3 按鈕

幫助手冊：全部CSS樣式/按鈕/預(yù)定義樣式，http://v3.bootcss.com/css/#buttons-options

<button type="button" class="btn btn-default">（默認(rèn)樣式）Default</button>

<button type="button" class="btn btn-primary">（首選項）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危險）Danger</button>

.btn-lg、.btn-sm 或 .btn-xs 可以設(shè)置按鈕的不同尺寸
.active類設(shè)置按鈕激活狀態(tài)，其表現(xiàn)為被按壓下去（底色更深、邊框夜色更深、向內(nèi)投射陰影）

1.3.1.4 響應(yīng)式工具

幫助手冊：全部CSS樣式/響應(yīng)式工具，http://v3.bootcss.com/css/#responsive-utilities-classes

例如：

<!--

設(shè)置one div，中等屏幕和超小屏幕顯示

設(shè)置two div，小屏幕和超大屏幕隱藏

-->

1.3.2 案例實現(xiàn)

<!--

1.整個topbar劃分比例：1:2:1

2.中間區(qū)域只在“大屏幕”和“中等屏幕”顯示

3.整個區(qū)域在“超小屏幕”英寸

-->

<div>

</div>

</div>

</div>

1.4 重寫首頁之導(dǎo)航

1.4.1 案例分析

Bootstrap 已經(jīng)提供了導(dǎo)航的完整實例，通常情況下，只需要進(jìn)行簡單修改即可。
幫助文檔：組件/導(dǎo)航條，http://v3.bootcss.com/components/#navbar
反色導(dǎo)航條：組件/導(dǎo)航條/反色的導(dǎo)航條，http://v3.bootcss.com/components/#navbar-inverted

1.4.2 案例實現(xiàn)

<!--

1.大屏幕顯示所有分類

2.中等屏幕隱藏部分分類，提供“更多”

3.超小屏幕隱藏所有分類，以“漢堡按鈕”顯示

-->

<div>

<div>

<div>

</button>

</div>

<li><a href="#">電腦辦公 <span>(current)</span></a></li>

<ul>

</ul>

</li>

</ul>

<div>

</div>

<button type="submit" class="btn btn-default hidden-xs">Submit</button>

</form>

</div>

</div>

</nav>

</div>

1.5 重寫首頁之輪播圖

1.5.1 案例分析

Bootstrap 已經(jīng)提供輪播圖的完整案例，此處我們也是進(jìn)行修改即可
參考文檔：JavaScript插件/ carousel，http://v3.bootcss.com/javascript/#carousel

1.5.2 案例實現(xiàn)

<div>

<ol>

</ol>

<!-- 輪播展示

* item 表示一個圖片，與“指示器”li的個數(shù)保持一致

-->

</div>

<div>

</div>

<div>

</div>

<!-- 左右控制區(qū) Controls

* href 用于確定點(diǎn)擊觸發(fā)的那個輪播圖

-->

</a>

</a>

</div>

1.6 重寫首頁之熱賣商品

1.6.1 案例分析

“熱賣商品”模塊是對柵格系統(tǒng)的再應(yīng)用。我們將用已有的知識編寫出響應(yīng)式頁面。

1.6.2 案例實現(xiàn)

<div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

1.7 重寫首頁之footer

1.7.1 案例分析

通過分析，該模塊需要使用柵格劃分上下兩行，第二行的文字信息準(zhǔn)備使用“列表”，內(nèi)容的居中將提供兩種方案：文字居中，柵格列偏移

參考文檔-文本對齊：全局CSS樣式/排版/對齊，http://v3.bootcss.com/css/#type-alignment

參考文檔-列表：全局CSS樣式/排版/列表，http://v3.bootcss.com/css/#type-lists

參考文檔-柵格列偏移：全局CSS樣式/柵格系統(tǒng)/列偏移，http://v3.bootcss.com/css/#grid-offsetting

1.7.2 案例實現(xiàn)

<div>

</div>

<div>

<ul>

</ul>

</div>

第2章總結(jié)

Bootstrap基礎(chǔ)入門

今日內(nèi)容介紹

使用bootstrap重寫首頁

今日內(nèi)容學(xué)習(xí)目標(biāo)

學(xué)會通過官方提供demo實例，完成自己需要的功能。
能夠從已有html文檔中，找到將要修改的位置，并進(jìn)行簡單調(diào)整

第3章內(nèi)容回顧

把bootstrap的標(biāo)簽復(fù)習(xí)一下等著案例練習(xí)

第4章案例：重寫首頁

4.1 重寫案例之樓梯

4.1.1 案例分析

現(xiàn)在的網(wǎng)頁開發(fā)中，經(jīng)?？吹綄⑺行畔⒕帉懺谝粋€頁面上，然后通過上下滾動翻頁進(jìn)行具體信息查詢，且存在一個提示信息，通知用戶當(dāng)前查看的位置。bootstrap提供相應(yīng)功能，稱為“滾動監(jiān)聽”。

幫助文檔--膠囊式標(biāo)簽頁：組件/導(dǎo)航/膠囊式標(biāo)簽頁， http://v3.bootcss.com/components/#nav-pills

幫助文檔-滾動監(jiān)聽：JavaScript插件/動態(tài)監(jiān)聽，http://v3.bootcss.com/javascript/#scrollspy

4.1.2 案例實現(xiàn)

4.1.2.1 樣式

.elevator{

width: 70px;

position: fixed;

top: 100px;

left: 5%;

}

.elevator > ul > li > a{

padding: 5px;

}

.elevator .one{

display: none;

}

.elevator .two{

display: block;

}

.elevator .active .one{

display: block;

}

.elevator .active .two{

display: none;

}

</style>

4.1.2.2 HTML代碼

</li>

</ul>

</div>

</body>

4.2 重寫首頁之固定滾動條

4.2.1 案例分析

當(dāng)瀏覽器向下滾動到指定位置時，導(dǎo)航條懸浮在指定頁面最頂端，保證整個瀏覽過程，都可以看到導(dǎo)航條。Bootstrap提供實現(xiàn)功能是“affix 粘貼”

參考文檔：JavaScript插件/affix/用法，http://v3.bootcss.com/javascript/#via-data-attributes-3

4.2.2 案例實現(xiàn)

4.2.3 導(dǎo)航條完善

導(dǎo)航條不在希望的位置

添加樣式

.header_fixed{

z-index: 1;

top: 0;

left: 0;

right: 0;

}

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報。

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

Bootstrap基礎(chǔ)入門

第1章 案例：重寫首頁

1.1 案例介紹

1.2 相關(guān)技術(shù)介紹

1.2.1 BootStrap概述

1.2.1.1 什么是BootStrap

1.2.1.2 什么是響應(yīng)式布局

1.2.2 環(huán)境搭建

1.2.2.1 下載

1.2.2.2 目錄結(jié)構(gòu)

1.2.2.3 內(nèi)容結(jié)構(gòu)

1.2.2.4 簡潔模板

1.2.2.5 完整模板（了解）

1.3 重寫首頁之topbar

1.3.1 案例相關(guān)技術(shù)

1.3.1.1 布局容器

1.3.1.2 柵格

1.3.1.3 按鈕

1.3.1.4 響應(yīng)式工具

1.3.2 案例實現(xiàn)

1.4 重寫首頁之導(dǎo)航

1.4.1 案例分析

1.4.2 案例實現(xiàn)

1.5 重寫首頁之輪播圖

1.5.1 案例分析

1.5.2 案例實現(xiàn)

1.6 重寫首頁之熱賣商品

1.6.1 案例分析

1.6.2 案例實現(xiàn)

1.7 重寫首頁之footer

1.7.1 案例分析

1.7.2 案例實現(xiàn)

第2章 總結(jié)

Bootstrap基礎(chǔ)入門

第3章 內(nèi)容回顧

第4章 案例：重寫首頁

4.1 重寫案例之樓梯

4.1.1 案例分析

4.1.2 案例實現(xiàn)

4.1.2.1 樣式

4.1.2.2 HTML代碼

4.2 重寫首頁之固定滾動條

4.2.1 案例分析

4.2.2 案例實現(xiàn)

4.2.3 導(dǎo)航條完善

第1章案例：重寫首頁

第2章總結(jié)

第3章內(nèi)容回顧

第4章案例：重寫首頁