《bootstrap入门经典_bootstrap-》

一、解决方案简述

对于网页开发人员来说，想要快速构建响应式布局的页面，Bootstrap是一个非常优秀的解决方案。它是一套用于HTML、CSS和JS开发的前端框架，能够帮助开发者轻松创建美观且适应不同设备屏幕大小的网页。通过使用Bootstrap预定义好的样式类、组件以及强大的栅格系统，可以大大减少重复编写代码的工作量，并且保证页面在各种浏览器上的一致性。

二、解决布局问题

（一）使用栅格系统实现简单布局

Bootstrap的栅格系统是其核心功能之一。例如我们想创建一个两列布局，其中左边占8份宽度，右边占4份宽度（总宽度为12份）。我们可以这样写代码：

html</p>

<div class="container">
    <div class="row">
        <div class="col-md-8">这是左边的内容，宽度为8份</div>
        <div class="col-md-4">这是右边的内容，宽度为4份</div>
    </div>
</div>

<p>

这里的container类用于包含整个页面内容并居中显示；row表示一行；col - md - 8等表示在中等及以上屏幕尺寸下的列宽，md代表medium，可以根据需要替换为sm(小屏幕)、lg(大屏幕)等。

（二）利用内置组件美化页面

如果要添加导航栏，可以使用Bootstrap的导航栏组件。以下是一个简单的固定顶部导航栏示例：

html</p>

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">品牌名</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
          下拉菜单
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">选项1</a>
          <a class="dropdown-item" href="#">选项2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">选项3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<p>

这段代码中，navbar相关类定义了导航栏的基本样式，如颜色、位置等；通过navbar - nav等类创建导航链接；还有下拉菜单功能，当点击下拉菜单按钮时会显示隐藏的菜单项。

三、多思路创建表单

除了布局和组件，Bootstrap对表单的美化也很有帮助。

一种常见的思路是创建水平排列的表单元素。代码如下：

html</p>


  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
    <div class="col-sm-10">
      
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">性别</legend>
      <div class="col-sm-10">
        <div class="form-check">
          
          <label class="form-check-label" for="gridRadios1">
            男
          </label>
        </div>
        <div class="form-check">
          
          <label class="form-check-label" for="gridRadios2">
            女
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>


<p>

这里利用了form - group、row等类来组织表单项，使表单结构清晰，而且表单元素自带Bootstrap的样式，看起来更加专业。

另一种思路是创建内联表单，适合一些简单的搜索框或者输入框组合。例如：

html</p>


  <div class="form-group mx-sm-3 mb-2">
    <label for="inlineFormInputGroupUsername2" class="sr-only">用户名</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      
    </div>
  </div>
  <button type="submit" class="btn btn-primary mb-2">搜索</button>


<p>

Bootstrap为网页开发提供了便捷高效的工具，无论是布局构建还是组件应用，都能满足大多数项目的需求。