Bootstrap组件系列之福利篇几款好用的组件(推荐)

Bootstrap组件系列之福利篇

简介

Bootstrap是由Twitter开发的开源框架，是一套用于前端开发的工具包，对于前端页面的排版、样式组成、组件、模板都提供了一些常用的元素。本次分享是Bootstrap组件系列之福利篇，主要介绍几款好用的组件供大家参考。

目录

1. 模态框
2. 轮播图
3. 下拉框
4. 导航栏

模态框

模态框是网站或者应用程序上不可或缺的一部分，可以在一个弹窗中展示信息或者与用户进行交互。Bootstrap提供了一个非常简单易用的模态框组件。使用时只需要通过data-toggle="modal"属性和data-target="#myModal"属性指定目标模态框的ID，就可以在目标位置添加一个触发器。模态框内部可以添加任何元素，比如表单、文本、按钮等，具体的样式可以通过CSS自定义。

<!--触发器的HTML结构-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!--模态框的HTML结构-->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭模态框</button>
      </div>
    </div>
  </div>
</div>

轮播图

轮播图是现代网站常用的展示图片或文字信息的一种方式，Bootstrap提供了一个非常简单易用的轮播图组件。使用时只需要在HTML中添加一个图片列表，通过data-ride="carousel"属性和data-target="#myCarousel"属性指定目标轮播图的ID，就可以将图片列表包含在轮播图中。轮播图内部还可以添加文本、按钮等元素。

<!--轮播图的HTML结构-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!--轮播图的指示器-->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!--轮播图的内容-->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img/slide1.jpg" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>第一张幻灯片标题</h5>
        <p>第一张幻灯片内容</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/slide2.jpg" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>第二张幻灯片标题</h5>
        <p>第二张幻灯片内容</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/slide3.jpg" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>第三张幻灯片标题</h5>
        <p>第三张幻灯片内容</p>
      </div>
    </div>
  </div>

  <!--轮播图的控制按钮-->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">上一个</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">下一个</span>
  </a>
</div>

下拉框

下拉框是页面交互中常用的控件之一，Bootstrap提供了一个简单易用的下拉框组件。使用时只需要在HTML中添加一个按钮和下拉菜单，通过添加data-toggle="dropdown"属性和aria-haspopup="true"属性指定按钮的功能，通过添加data-toggle="dropdown"属性和aria-haspopup="true"属性指定下拉菜单的功能。下拉菜单内部可以添加任何元素，比如表单、文本、按钮等，具体的样式可以通过CSS自定义。

<!--下拉框的HTML结构-->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉选项
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">选项一</a>
    <a class="dropdown-item" href="#">选项二</a>
    <a class="dropdown-item" href="#">选项三</a>
  </div>
</div>

导航栏

导航栏是网站或者应用程序上常用的一个组件，可以让用户更方便地找到所需的内容。Bootstrap提供了一个简单易用的导航栏组件，可以通过添加navbar类来实现。可以通过添加navbar-brand类来添加品牌logo，通过添加navbar-toggler类来添加响应式按钮，通过添加navbar-nav类来添加垂直的导航条目，通过添加nav-link类来添加水平的导航条目。导航条目也可以添加下拉菜单和表单等元素。

<!--导航栏的HTML结构-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">品牌logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="展开导航">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">文章</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="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          下拉菜单
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">选项一</a>
          <a class="dropdown-item" href="#">选项二</a>
          <a class="dropdown-item" href="#">选项三</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

以上就是Bootstrap组件系列之福利篇的攻略，希望对大家有所帮助。