1.4 Bootstrap5中文手冊要點導航
1、不需要關注的內容
Bootstrap5中文手冊(http://www.roadlinkinfra.com/doc/book/2)前兩章和后兩章(快速入門、定制、擴展、關于)都不需要看,只需要看《俺老劉Bootstrap5簡明教程》中的基礎入門部分即可。
2、布局(Layout)
斷點(Breakpoints):斷點是可自定義的寬度,用于確定Bootstrap中如何跨設備或視口大小執行響應布局。
容器(Containers):容器是Bootstrap的基本構建塊,用于在給定的設備或窗口中包含、填充和對齊內容。
網格(Grid):使用我們強大、行動優先的彈性盒子的網格來建立符合各種尺寸的網頁排版,包含十二欄系統、六個缺省的響應式斷點、Sass變量和mixins,以及很多預定義的類。
列布局(Columns):借助我們的彈性盒子網格系統,了解如何使用一些用于對齊、排序和偏移的選項來修改列。另外,請參閱如何使用列類來管理非網格元素的寬度。
間隙(Gutters):間隙是列之間的填充,用于在Bootstrap網格系統中相應地分隔和對齊內容。
布局通用類(Utilities):布局通用類(Utilities)有時翻譯為布局實用程序,為了更快的移動友好和響應性開發,Bootstrap包含了幾十個用于顯示、隱藏、對齊和間隔內容的實用程序類。
層級(Z-index):雖然z索引不是Bootstrap網格系統的一部分,但它在組件如何相互覆蓋和交互方面起著重要的作用。
3、頁面內容(Content)
重置(Reboot):針對單一文件內CSS的特定元素重置樣式,重置以便Bootstrap準確且一致的建立樣式。
文字排版(Typography):Bootstrap排版的文檔和示例,包括全局設置、標題、正文、列表等。
圖片(Images):本文檔及示例展示了如何讓圖片支持響應式行為(這樣它們就不會超出父元素的范圍)以及如何通過類(class)添加些許樣式。
表格(Tables):Bootstrap設置表格文件和示例(提供表格在JavaScript插件程序中的用途)
畫像(Figures):通過 Bootstrap 的畫像(figure)組件來顯示相關聯的圖片和文本。本文檔包含了畫像(figure)組件的說明和示例。
4、表單(Forms)
表單概覽(Overview):Bootstrap表單控件樣式、布局選項和用于創建各種表單的自定義組件的示例和使用指南。
表單控件(Form control):為<input>
和<textarea>
等文本表單控件提供自定義樣式、大小、焦點狀態等的升級。
下拉列表(Select):使用重置的CSS,重定義原生的下拉列表外觀。
多選與單選(Checks & radios):使用我們重構過的勾選組件,建立跨瀏覽器、跨設備皆一致的復選框(checkbox)及單選按鈕(radio)。
范圍選擇(Range):使用我們的自定義范圍輸入實現一致的跨瀏覽器樣式和內置自定義。
輸入組合(Input group):通過在文本輸入、自定義選擇和自定義文件輸入的任一側添加文本、按鈕或按鈕組,可以輕松擴展窗體控件。通過在文本輸入的任一側添加文本、按鈕或按鈕組(自定義),可以輕松擴展窗體控件
浮動標簽(Floating labels):創建能夠漂浮在輸入字段上的,漂亮簡單的表單標簽。
表單布局(Layout):使用我們的表單布局選項,為表單提供從內聯到水平再到自定義網格實現的一些結構。
表單驗證(Validation):通過瀏覽器默認行為或自定義樣式和JavaScript,通過HTML5表單驗證向用戶提供有價值的、可操作的反饋。
5、組件(Components)
手風琴(Accordion):結合我們的折疊JavaScript插件構建垂直折疊手風琴。
警告框(Alerts):為典型用戶操作提供上下文反饋消息,并提供少量可用且靈活的警報消息。
徽章(Badge):文件和徽章,我們的小計數和標簽組件的例子。
面包屑導航(Breadcrumb):指示當前頁在導航層次結構中的位置,該層次結構通過CSS自動添加分隔符。
按鈕(Buttons):使用Bootstrap自定義的按鈕樣式來進行表單、對話框等操作,并支持多種大小、狀態等。
按鈕組(Button group):將一系列按鈕組合在一行上,或將它們堆疊在一個垂直的列中。
卡片(Card):Bootstrap的卡提供了一個靈活的、可擴展的內容容器,其中包含多種變體和選項。
輪播(Carousel):一種幻燈片放映組件,用于在元素、圖像或文本幻燈片(如旋轉木馬)之間循環播放。
關閉按鈕(Close button):通用的關閉按鈕,用于關閉互動視窗或是警報之類的內容。
折疊(Collapse):在項目中透過Boostrap的類別及JavaScript插件切換內容的可視性。
下拉菜單(Dropdowns):使用Bootstrap下拉菜單插件切換上下文覆蓋效果,顯示連接列表以及更多的內容。
列表群組(List group):列表組是顯示一系列內容的靈活而強大的組件。修改和擴展它們以支持其中的任何內容。
模態彈框(Modal):使用Bootstrap的JavaScript模式插件將對話框添加到站點中,用于燈箱、用戶通知或完全自定義的內容。
導航和選項卡(Navs & tabs):有關如何使用 Bootstrap附帶的導航組件的文檔和示例。
導航工具條(Navbar):Bootstrap強大的響應式導航條文件和示例。包括品牌,導覽等,以及針對折疊插件的支持。
滑動導航(Offcanvas):使用一些類和我們的JavaScript插件在項目中構建隱藏的側邊欄,用于導航、購物車等。
分頁導航(Pagination):用于顯示分頁以指示跨多個頁面存在一系列相關內容的文檔和示例。
彈出提示框(Popovers):Bootstrap彈出提示框的文件與示例,風格類似iOS,可加在網頁上的任何元素上。
進度條(Progress):使用Bootstrap自定義進度條的文件和示例,這些進度條支持堆疊、動態背景和文字標簽。
滾動監控(Scrollspy):根據滾動位置自動更新Bootstrap 導航或列表組組件,以指示視口中當前處于活動狀態的鏈接。
讀取圖標(Spinners):使用Bootstrap讀取圖標以表示元件加載狀態,這些讀取圖標完全使用HTML,CSS,而沒有使用到JavaScript。
吐司消息(Toasts):通過Toasts向使用者推播通知,它是一種輕量且易于客制化的警報消息
工具提示(Tooltips):如何透過CSS與Javascript添加自定義Bootstrap工具提示的文件與示例。其中CSS3用于動畫,data-bs-attributes用于用于本地標題的儲存。
6、助手(Helpers)
清除浮動(Clearfix):透過增加clearfix通用類別,可以快速輕松地清除容器中的浮動內容。
彩色鏈接(Colored links):帶懸停狀態的彩色鏈接
長寬比(Ratio):使用產生的偽元素使元素保持您選擇的長寬比。非常適合根據父對象的寬度響應處理視頻或嵌入幻燈片。
定位(Position):使用這些輔助器可以快速配置元素的位置。
視覺隱藏(Visually hidden):使用這些工具可以在視覺上隱藏元素,但元素仍可以被輔助技術使用。
延伸鏈接(Stretched link):透過CSS將連接“延伸”,令任何HTML元素或Bootstrap元件變得可點擊。
文字截斷(Text truncation):用省略號截斷長字符串。
7、通用類(Utilities)
通用類別API:通用類別API是基于Sass工具所產生的通用類。
背景(Background):通過背景色傳達意義,并添加漸變裝飾。
邊框(Borders):使用Border通用類別迅速設計一個元素的border和border-radius。可用于圖象、按鈕、或任何其它元素。
顏色(Colors):借助一些顏色通用類別讓顏色的表達具有意義。這也包括支持有hover狀態的樣式連接。
顯示方式(Display):使用display通用類別快速且響應式的切換元件的顯示與否。我們的display通用類別包含許多常用的值,另外在打印時也能使用。
彈性盒子(Flex):flexbox彈性盒子通用類別的套件包管理網格欄的排版、對齊、尺寸縮放,以及導覽、元件等。對于更復雜的表現則需要自定義CSS。
浮動(Float):使用我們響應式的float通用類別,在任何斷點上切換任何元素的浮動。
互動(Interactions):可改變使用者如何與網頁內容互動的通用類。
溢出(Overflow):使用這些速記的通用類別快速配置內容溢出元素的方式。
位置(Position):使用這些速記實用程序可以快速配置元素的位置。
陰影(Shadows):使用box-shadow通用類別來增加或移除陰影。
尺寸(Sizing):使用寬度和高度通用類別,可以輕松地將一個元素加寬或增高。
間距(Spacing):Bootstrap包括各種簡寫響應式margin、padding和間隔的通用類別,用來修改一個元素的外觀。
文字(Text):文字通用類別的文檔和示例,用于控制對齊、環繞、粗細等。
垂直對齊(Vertical align):輕松地改變inline、inline-block、inline-table、和table元素的垂直對齊方式。
可視性(Visibility):通過可視性通用類別控制元素的能見度,不需要修改元素的實際空間。