【揭秘Bootstrap4】全面解析實用類名與布局技巧

Bootstrap4是一個風行的前端框架，它為開辟者供給了豐富的實用類名跟規劃技能，使得創建呼應式跟挪動優先的網站變得愈加簡單。本文將單方面剖析Bootstrap4中的實用類名跟規劃技能，幫助開辟者更好地利用這個框架。

容器跟網格體系

Bootstrap4的規劃始於容器跟網格體系。容器用於包裹頁面內容跟柵格體系，Bootstrap過後定義了.container跟.container-fluid兩個類。

• .container：存在牢固寬度，在差別屏幕尺寸下有差其余寬度設置，默許為960px，在窄屏設備上變為100%寬度。
• .container-fluid：寬度為100%，佔據全部視口。

<div class="container">
  <!-- 頁面內容 -->
</div>
<div class="container-fluid">
  <!-- 頁面內容 -->
</div>

柵格體系

Bootstrap4的柵格體系容許你經由過程列（column）跟行（row）的組合來創建複雜的頁面規劃。行必須包含在容器內，而列是行的直接子元素。

• .row：創建程度行，用於放置列。
• .col-xs-*、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*：用於指定列在差別屏幕尺寸下的寬度。

<div class="row">
  <div class="col-md-6">列1</div>
  <div class="col-md-6">列2</div>
</div>

呼應式規劃

Bootstrap4供給了呼應式規劃功能，容許網站根據瀏覽器或設備大小主動調劑規劃。它利用斷點（breakpoints）來定義屏幕尺寸範疇，並根據每個斷點調劑規劃。

• xs：小於768px
• sm：大年夜於768px
• md：大年夜於992px
• lg：大年夜於1200px
• xl：大年夜於1400px

<div class="col-md-4 col-lg-4">列1</div>
<div class="col-md-4 col-lg-4">列2</div>
<div class="col-md-4 col-lg-4">列3</div>

實用類名

Bootstrap4供給了豐富的實用類名，用於疾速實現各種款式後果。

• .text-center：文本居中對齊
• .text-right：文本右對齊
• .text-left：文本左對齊
• .text-uppercase：文本全部大年夜寫
• .text-lowercase：文本全部小寫
• .text-capitalize：首字母大年夜寫

<p class="text-center">居中對齊的文本</p>
<p class="text-uppercase">全部大年夜寫的文本</p>

排版款式

Bootstrap4還供給了排版款式類名，用於疾速實現段落、標題、列表等排版後果。

• .h1 至 .h6：標題款式
• .lead：用於凸起表現文本
• .list-unstyled：去除列表項目標記跟內邊距
• .list-inline：將列表項陳列在同一行

<h1 class="h1">標題1</h1>
<p class="lead">凸起表現的文本</p>
<ul class="list-unstyled">
  <li>無項目標記的列表</li>
</ul>

總結

Bootstrap4是一個功能富強的前端框架，經由過程利用其供給的實用類名跟規劃技能，開辟者可能疾速創建呼應式跟挪動優先的網站。本文單方面剖析了Bootstrap4的規劃技能，盼望對開辟者有所幫助。