H5第四天（1）
boostrap框架介紹
核心知識點(diǎn)
- boostrap框架
- 柵格系統(tǒng)[重點(diǎn),不是難點(diǎn)]
- 基本的全局樣式
學(xué)習(xí)目標(biāo)
- 能夠使用boostrap框架中的基本樣式
- 能夠使用柵格系統(tǒng)完成阿里百秀案例
boostrap框架
-
介紹 https://www.bootcss.com/
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
-
起步
-
下載【下載后的框架就是一個(gè)css文件】
-
生產(chǎn)環(huán)境下的Bootstrap
編譯并壓縮后的 CSS文件。不包含文檔和源碼文件。 -
Bootstrap源碼
沒有壓縮的CSS文件,包含文檔和源碼文件。
-
-
引用 【在網(wǎng)頁中引用下載好的css文件】
<!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"><title>Bootstrap</title><!-- 引用bootstrap css文件 --><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1></body> </html> -
框架中的全局樣式
-
在框架中用來表示一號標(biāo)題到六號標(biāo)題
.h1 - .h6
-
在框架中要設(shè)置文字對齊方式可以使用如下類名
text-left | text-center | text-right
-
在網(wǎng)頁中表示超小文字的標(biāo)簽
文字
<small>超小文字</small>或者使用類名<div class="small">超小文字</div> -
字母大小寫轉(zhuǎn)化對應(yīng)的類名
text-uppercase —> 將小寫字母都轉(zhuǎn)化為大寫字母
text-lowercase —> 將大寫字母轉(zhuǎn)化為小寫字母
text-capitalize ----> 將單詞首字母轉(zhuǎn)為大寫
注意：以上類名中使用都是 text-transform屬性實(shí)現(xiàn)的
.text-lowercase {text-transform: lowercase; } .text-uppercase {text-transform: uppercase; } .text-capitalize {text-transform: capitalize; } -
去掉列表前的默認(rèn)樣式
.list-unstyled -
實(shí)現(xiàn)li一行顯示添加類名
.list-inline -
設(shè)置表格基本樣式
.table.table-bordered 設(shè)置邊框.table-hover 設(shè)置鼠標(biāo)懸停時(shí)候的樣式 -
柵格系統(tǒng)
-
介紹
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。
-
作用：
- 通過柵格系統(tǒng)就可以開發(fā)響應(yīng)式布局
- 將柵格系統(tǒng)對應(yīng)的盒子分為12列實(shí)現(xiàn)的
-
使用
-
必須 放到類名叫.container （固定寬度）或 .container-fluid （100% 寬度）中
-
柵格參數(shù)
- col-xs-值 ： 代表在超小設(shè)備中（手機(jī)）
- col-sm-值: 代表在小屏幕設(shè)置中（平板）
- col-md-值：代表在中等設(shè)備中（PC設(shè)備）
- col-lg-值: 代表的是在超大設(shè)備中
- 備注柵格參數(shù)中的值取值范圍是： 1- 12
-
-
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-CPi2m4Q0-1582626878125)(img/1582448784655.png)]
- col-md-值：代表在中等設(shè)備中（PC設(shè)備）- col-lg-值: 代表的是在超大設(shè)備中- 備注柵格參數(shù)中的值取值范圍是： 1- 12[外鏈圖片轉(zhuǎn)存中…(img-CPi2m4Q0-1582626878125)]
總結(jié)
