一、bootstrap簡介
二、排版屬性
三、布局模式
四、**查詢
五、柵格系統
一、bootstrap簡介
二、排版屬性
.lead
使段落突出顯示
.small
設定小文字為父文字的85%大小
.text-left
設定文字左對齊
.text-center
設定文字居中對齊
.text-reght
設定文字右對齊
.text-justify
設定文字對齊,-中段落超出螢幕部分文字自動換行
.text-nowrap
段落中超出螢幕部分不換行
.text-lowercase
設定文字小寫
.text-uppercase
設定文字大寫
.text-capitalize
設定單詞首字母大寫
.initialism
顯示在元素中的文字以小號字型顯示，且可以將小寫字母轉換為大寫字母
.blockquote-reverse
設定引用右對齊
.list-inline
將所有列表項放置同一行
.dl-horizontal
該類設定了浮動和偏移，應用於元素和元素中
.pre-scrollable
使
元素可滾動，**塊區域最大高度為340px，一旦超出這個高度，就會在y軸出現滾動條五、柵格系統<1>柵格系統工作原理：三、布局模式
1. 布局模式：固定布局、流動布局
固定布局：container（設定裝置優先，有不同的解析度下的情況，適應各種螢幕）
流動布局：container-fluid
注：開發時一般會利用
padding-right:-15px和padding-left:-15px-去掉固定布局的padding-right:15px和padding-left:15px
四、**查詢
1.**查詢：可應用於不同螢幕解析度下的框架顯示模式(pc端、移動端)
2.例項
1.容器提供了一種中心和水平填充站點內容的方法。使用.container應答畫素寬度或.container-fluid，用於width:100%在所有視窗和器件尺寸
2.行是列的包裝器。每列都有水平padding，用於控制他們之間的空間。
3.在網格布局中，內容必須放在列中，只有列可以是行的直接子項。
4.由於flexbox，沒有指定的網格列width將自動布局為等寬列。
5.列widths以百分比形式設定，英雌它們總是相對於其父元素是流動的和大小的。
6.列具有水平padding建立單獨的列之間的排水溝，但可以刪除行中margin,列中padding，.row上.no-gutters
7.為了使網格響應，有5個網格斷點，每個響應斷點乙個：超小、小、中、大和超大
8.網格斷點基於最小寬度的**查詢，這意味著它們適用於那個斷點以及它上面的所有斷點
9.可以使用預定義的網各類或sass mixins進行更多語義標記
<2>理解
1.網格系統/柵格系統：網格系統類似於標籤table中的tr、td
分為行row 和列col-*-*
2.網格系統一行最大12個列，多出的列會自動折行，為flex布局
3.網格類似於 table tr td
4.col-xl-auto 根據內容自動分配
5.col-*-num 列 後邊的代表跨幾列
6.offset-1 設定marginleft 8.333%
7.offset-*-2 不同的螢幕marginleft
8.invisible 隱藏元素，visible 顯示元素
9.p-0 padding:0，p-1 padding:0.25rem;
10.w-100 100%，w-75 75%
11.h-100 100%，h-50 50%
12.align-items-center 相對父容器垂直居中，align-items-start 相對父容器頂部對齊，align-items-end 相對父容器底部對齊，align-content-center 考慮多行，align-self-center 自身在flexbox中的y軸分布
13.justify-content-center 子元素在父容器裡面的x軸的排布情況
超小<576px
小》=576px
中等》=768px
大》=992px
超大》=1200px
最大容器寬度
無（自動）
540px
720px
960px
1140px
類字首.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
列數12
天溝寬度
30px(每列15px)巢狀是
列排序是
注：sm:小屏，md:中屏，lg：大屏，xl:超大屏
<3>例項
123
4567
891011
12
Bootstrap入門基礎
最近需要做乙個簡單的web頁面。考慮到前端經驗不足，為了快速產出，同時專案只是乙個工具，對專案沒有什麼要求，所以我選擇了bootstrap這個框架作為web框架。寫從零 學習 bootstrap 的初衷 讓我們先從bootstrap的最簡單的模板開始 讓我們一行行的來看 我用 代表解釋 代表這是ht...
bootstrap入門使用
1.bootstrap使用簡單模板 container類用於固定寬度並支援響應式布局的容器。兩邊有留白 container fluid類用於 100 寬度，佔據全部視口 viewport 的容器。查詢 超小螢幕 手機，小於 768px 沒有任何 查詢相關的 因為這在 bootstrap 中是預設的 ...
bootstrap基礎學習
簡潔 直觀 強悍的前端開發框架，讓web開發更迅速 簡單。常用 哦,還有bootstrap是基於jquery的,所以之前要先引入jquery 1.bootstrap把螢幕分成四個狀態 1 lg 大螢幕 螢幕寬度大於1200px 2 md 中等螢幕 螢幕寬度992 1200px 3 sm 小螢幕 螢幕...