1.4 Bootstrap5中文手冊要點導航

      On this page
      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):通過可視性通用類別控制元素的能見度,不需要修改元素的實際空間。

      返回頂部
      主站蜘蛛池模板: 久久精品无码一区二区三区不卡 | 国产一区二区三区在线影院| 亚洲国产一区在线| 久久精品国产第一区二区| 国产人妖在线观看一区二区| 精品国产一区二区三区| 欧美日韩精品一区二区在线视频 | 亚洲一区视频在线播放| 久久精品人妻一区二区三区| www一区二区三区| 日本精品高清一区二区| 国产成人一区二区动漫精品| 国产福利一区二区三区| 亚洲一区二区三区首页| 国产在线一区二区在线视频| 国产福利电影一区二区三区,日韩伦理电影在线福 | 一本岛一区在线观看不卡| 中文字幕人妻第一区| 日韩国产精品无码一区二区三区| 红杏亚洲影院一区二区三区| 国产在线无码视频一区| 亚洲国产欧美一区二区三区 | 极品人妻少妇一区二区三区| 国产综合一区二区| 熟女少妇丰满一区二区| 色欲AV无码一区二区三区| 影院成人区精品一区二区婷婷丽春院影视 | 精品女同一区二区三区在线| 亚洲日韩一区二区三区| 国产一区二区三区乱码网站| 人妻无码一区二区三区免费| 亚洲AV午夜福利精品一区二区| 日本道免费精品一区二区| 国产在线精品一区二区高清不卡 | 中文字幕一区二区三| 日韩在线不卡免费视频一区| 亚洲AV无码一区二区乱子仑| 日韩一区二区三区在线观看| 国产亚洲3p无码一区二区| 国产成人一区二区三区| 国产品无码一区二区三区在线蜜桃 |