BootStrap栅格系统、表单样式与按钮样式源码解析

我来详细讲解一下“Bootstrap栅格系统、表单样式与按钮样式源码解析”的攻略。

我来详细讲解一下“Bootstrap栅格系统、表单样式与按钮样式源码解析”的攻略。

Bootstrap栅格系统

Bootstrap栅格系统是用于在不同屏幕宽度下，将页面分成不同的列和行。通过栅格系统可以轻松地实现响应式布局，让页面在不同的设备上达到良好的展示效果。Bootstrap栅格系统基于12个列，在页面上可以实现等宽或不等宽的布局。

栅格系统的基本语法

下面是栅格系统的基本语法：

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

上面的代码演示了三个等宽的列，这些列在小于等于576px的屏幕上将会全部显示，而在大于576px的屏幕上会自动排列成两列，每列显示两个。在大于768px的屏幕上，这些列又会自动排列成一行，每行显示三个等宽的列。

栅格系统的实例演示

下面是一个更详细的实例演示。

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">Column 1</div>
    <div class="col-sm-4 col-md-6">Column 2</div>
    <div class="col-sm-4 col-md-3">Column 3</div>
  </div>
</div>

在这个例子中，页面被分成了一行和三列。在小于等于576px的屏幕上，这三列会依次排列，每个列的宽度都是100%。在大于576px、小于等于768px的屏幕上，这三列被排列成两行，第一行显示两列，每列占据屏幕的一半；第二行只显示一列，占据整个屏幕的宽度。在大于768px的屏幕上，这三列被排列成一行，并且第一列和第三列各占据1/4的屏幕宽度，中间的列占据1/2的屏幕宽度。

Bootstrap表单样式

Bootstrap提供了丰富的表单样式，可以让我们快速创建漂亮的表单。下面我将展示Bootstrap表单的几种样式。

基本表单

下面是一个基本的Bootstrap表单：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

在这个表单中，我们使用了带有 .form-group 类的div元素来包含每个表单元素。这个类可以设置表单的样式。同时我们还使用了 .form-text 类来添加关于表单输入的额外帮助文本。

内联表单

Bootstrap还可以实现内联表单：

<form class="form-inline">
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

在内联表单中，表单元素被放置在同一行中，并且包含了 form-inline 类。内联表单中的表单元素也可以添加 .form-group 类和 .form-control 类。

Bootstrap按钮样式

Bootstrap还提供了丰富的按钮样式，可以让我们快速创建漂亮的按钮。

基本按钮

下面是一个基本的Bootstrap按钮样式：

<button type="button" class="btn btn-primary">Primary</button>

我们可以指定按钮的类型，用 .btn 类定义按钮的样式。这个例子中，使用了 .btn-primary 类，它会定义一个带有蓝色背景颜色的主按钮。

带图标按钮

Bootstrap还可以创建带有图标的按钮：

<button type="button" class="btn btn-primary">
  <i class="fa fa-search"></i> Search
</button>

在这个例子中，我们使用font-awesome图标库来创建一个带有搜索图标的按钮。

以上就是关于Bootstrap栅格系统、表单样式和按钮样式的攻略，希望对你有所帮助。