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