前端布局常用类名

常见布局块类名

1. 容器和网格布局：

   • .container：用于包裹内容的主容器。
   • .container-fluid：用于全宽度的流体容器。
   • .row：用于行的类，通常用于网格布局。
   • .col 或 .column：用于列的类，通常与.row配合使用。

2. 导航和头部：

   • .navbar：导航栏的类。
   • .navbar-brand：导航栏品牌/标志的类。
   • .navbar-nav：导航栏菜单的类。
   • .header：页头的类。

3. 内容块：

   • .content：主要内容区域的类。
   • .main-content：主内容区域的类。
   • .sidebar：侧边栏的类。
   • .footer：页脚的类。

4. 卡片和面板：

   • .card：卡片布局的类。
   • .card-header：卡片头部的类。
   • .card-body：卡片主体的类。
   • .card-footer：卡片底部的类。
   • .panel：面板的类。
   • .panel-heading：面板头部的类。
   • .panel-body：面板主体的类。
   • .panel-footer：面板底部的类。

5. 按钮和表单：

   • .btn：按钮的类。
   • .btn-primary：主要按钮的类。
   • .btn-secondary：次要按钮的类。
   • .form-group：表单组的类。
   • .form-control：表单控件的类。

6. 排版和文本：

   • .text-center：文本居中的类。
   • .text-right：文本右对齐的类。
   • .text-left：文本左对齐的类。
   • .lead：引导段落的类。

7. 辅助类：

   • .clearfix：清除浮动的类。
   • .hidden：隐藏元素的类。
   • .visible：显示元素的类。
   • .d-flex：应用Flexbox布局的类。
   • .d-none：隐藏元素的类（通过display:none）。