一、组件基础

1、什么是组件

组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象的思想来说 ，将一些符号某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。

2、组件的优势

组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。 组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。

3、 Bootstrap组件的依赖文件

Bootstrap组件依赖于Bootstrap框架，在实现组件的功能时首先引入依赖文件。

（1）引入Bootstrap的核心文件

（2）引入jQuery文件

<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>

 引入jQuery文件的方法：

<!-- 方式1：引入本地下载的jQuery -->
<script src="jquery-3.2.1.min.js"></script>

另外，一些CDN（内容分发网络）也提供了jQuery文件，可以无须下载直接引入。

<!-- 方式2：通过CDN(内容分发网络)引入jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

二、Bootstrap常用组件

1、引入依赖文件

在实现静态的页面结构时，只涉及结构和样式问题，所以不需要使用jQuery、bootstrap.min.js等JavaScript文件。为了实现下面Bootstrap常用组件的页面结构之前，首先引入bootstrap.min.css文件。

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

2、按钮

（1）在实现按钮的样式时，如果按钮中的文本内容超出了按钮的宽度，默认情况下，按钮中的内容会自动换行排列，如果不希望按钮文本换行，可以在按钮中添加text-nowrap类名。

（2）常用的背景样式

btn-primary主要
btn-success成功
btn-danger危险
btn-warning警告
btn-info信息
btn-secondary次要

（3）按钮的大小

btn-lg  ——  大按钮                btn-sm  ——  小按钮

Bootstrap中按钮的实现方式

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
        <button type="button" class="btn btn-primary text-nowrap">主要西安邮电大学</button>
        <button type="button" class="btn btn-success btn-lg">成功</button>
        <button type="button" class="btn btn-danger btn-sm">危险</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-secondary">次要</button>
    </div>
</body>

 3、导航

<ul class="nav">
        <li class="nav-item">
            <a href="#" class="nav-link">首页</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">简介</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">详情</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link disabled">联系我们</a>
        </li>
</ul>

 

注意：最后一个<li>元素的<a>标签添加了.disabled类，表示该链接禁止使用。

4、面包屑导航

在前面的内容中实现了传统导航的页面结构，不能展示出当前页在导航层次结构中的位置。 Bootstrap常用组件提供了面包屑导航，通过为导航层次结构自动添加分隔符来实现面包屑导航的页面效果。

<nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">首页</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                简介
            </li>
        </ol>
</nav>

 5、分页

在前端页面开发的过程中，经常会使用到分页器的功能，分页器的功能是帮助用户快速的跳转到指定页码的页面，当用户想要打开指定页面时，不需要用户多次操作，实现了一步到位的效果，提高了用户的使用体验。

<nav>
        <ul class="pagination">
            <li class="page-item">
                <a href="#" class="page-link">
                    <span>&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a href="#" class="page-link">1</a>
            </li>
            <li class="page-item">
                <a href="#" class="page-link">2</a>
            </li>
            <li class="page-item">
                <a href="#" class="page-link">3</a>
            </li>
            <li class="page-item">
                <a href="#" class="page-link">4</a>
            </li>
            <li class="page-item">
                <a href="#" class="page-link">5</a>
            </li>
            <li class="page-item">
                <a href="#" class="page-link">
                    <span>&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

 6、列表

在学习Bootstrap常用组件之前，为了实现列表页面结构，我们首先要编写列表结构，然后，再根据列表结构的样式需求编写烦琐的CSS代码。 为了提高开发的效率，在Bootstrap中可以直接通过列表组件来实现列表页面结构。

<ul class="list-group">
        <li class="list-group-item active">列表1</li>
        <li class="list-group-item">列表2</li>
        <li class="list-group-item active">列表3</li>
        <li class="list-group-item">列表4</li>
        <li class="list-group-item">列表5</li>
</ul>

 7、表单

在前端页面开发的过程中，除了导航、列表和按钮等页面结构之外，表单也是页面结构中重要的组成部分。 表单主要包括form、button和input等元素，通过在form元素中定义input和button等元素来实现表单页面结构。

<div class="container">
        <form action="#">
           <div class="form-group">
               <label for="userName">用户名</label>
               <input type="text" id="userName" class="form-control col-md-3">
               <label for="pwd">密码</label>
               <input type="password" id="pwd" class="form-control col-md-3">
               <label for="email">邮箱</label>
               <input type="email" id="email" class="form-control col-md-3">
           </div> 
           <button type="submit" class="btn btn-primary col-md-3">提交</button>
        </form>
    </div>

 8、按钮组

在前面讲解的内容中，学习了单个按钮的实现方式，但是不能实现多个按钮页面结构。 为了实现多个按钮页面结构，Bootstrap提供了按钮组的功能，按钮组就是将多个按钮放在一个类名为.btn-group的父元素中。

<div class="btn-group">
        <button type="button" class="btn btn-primary">按钮1</button>
        <button type="button" class="btn btn-success">按钮1</button>
        <button type="button" class="btn btn-danger">按钮1</button>
    </div>

 9、输入框组

除了按钮组页面结构之外，Bootstrap常用组件还提供了输入框组的组件，用来实现多个输入框的页面结构，主要实现思路是将多个输入框页面结构定义在类名为input-group的父元素中。

<!--输入框组-->
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">姓名 </span>
        </div>
        <input type="text" class="form-control" placeholder="请输入姓名">
    </div>
    <!--家庭住址-->
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">家庭住址 </span>
        </div>
        <input type="text" class="form-control">

        <div class="input-group-prepend">
            <span class="input-group-text" >省 </span>
        </div>
        <input type="text" class="form-control">

        <div class="input-group-prepend">
            <span class="input-group-text">市</span>
        </div>
        <input type="text" class="form-control">

        <div class="input-group-prepend">
            <span class="input-group-text" >区</span>
        </div>
    </div>
    <!--个人简介-->
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">个人简介</span>
        </div>
       <textarea class="form-control"></textarea>
    </div>

 10、超链接方式

<!--a超链接方式-->
    <a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" >
        iPhone11 pro
    </a>
    <!--手机详细信息-->
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            iPhone 爆款限时特惠！大二神权抢购中！iPhone11 pro立减1200元，XR64GB黄色低至3899元
        </div>
        <div class="card card-body">
            iPhone 爆款限时特惠！大二神权抢购中！iPhone11 pro立减1200元，XR64GB黄色低至3899元
        </div>
        <div class="card card-body">
            iPhone 爆款限时特惠！大二神权抢购中！iPhone11 pro立减1200元，XR64GB黄色低至3899元
        </div>
    </div>

三、Bootstrap实现菜单功能

1、 引入依赖文件

<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-3.2.1.min.js"></script>
<script src="../bootstrap/js/popper.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>

注意：jQuery必须排在第一位，然后在jQuery的下面引入popper.min.js和 bootstrap.min.js插件。

2、折叠菜单

折叠菜单是前端页面中常用的功能模块，例如通过折叠菜单实现商品信息的展示与隐藏等。折叠菜单功能的实现思路：

（1）当用户单击页面中选项菜单时，页面会展示当前选项下的内容信息；

（2）当再次单击选项菜单时，页面会自动隐藏当前选项下的内容信息。

<body>
    <!--a超链接方式-->
    <a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" >
        iPhone11 pro
    </a>
    <!--手机详细信息-->
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            iPhone 爆款限时特惠！大二神权抢购中！iPhone11 pro立减1200元，XR64GB黄色低至3899元
        </div>
        <div class="card card-body">
            iPhone 爆款限时特惠！大二神权抢购中！iPhone11 pro立减1200元，XR64GB黄色低至3899元
        </div>
        <div class="card card-body">
            iPhone 爆款限时特惠！大二神权抢购中！iPhone11 pro立减1200元，XR64GB黄色低至3899元
        </div>
    </div>
</body>

3、下拉菜单

下拉菜单的实现思路：

（1）当用户单击页面中选项按钮时，页面会展示当前选项下的菜单选项；

（2）当用户再次单击页面中的该选项按钮时，页面会自动隐藏当前选项按钮下的菜单选项。

<body>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
          菜单
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">菜单1</a>
          <a class="dropdown-item" href="#">菜单2</a>
          <a class="dropdown-item" href="#">菜单3</a>
        </div>
      </div>
</body>

 

 四、Bootstrap实现轮播图功能

1、什么是轮播图

轮播图是页面结构中重要的组成部分，主要是用来展示页面中的活动信息。

轮播图功能实现的思路:

（1）当鼠标指针移动到图片上时，活动信息停止自动切换；

（2）当用户单击图片上的左侧按钮时，可以让图片切换到上一张；

（3）当用户单击图片上的右侧按钮时，可以让图片信息切换到下一张；

（4）在图片的下方是轮播图指示器可以显示当前图片信息的展示状态；

（5）当鼠标指针移出图片时图片信息自动切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div id="xy" class="carousel slide" data-ride="carousel">
        <!-- 轮播指示器 -->
        <ol class="carousel-indicators">
            <li class="active" data-target="#deyun" data-slide-to="0"></li>
            <li data-target="#deyun" data-slide-to="1"></li>
            <li data-target="#deyun" data-slide-to="2"></li>
        </ol>
        <!-- 显示区域 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../images/p1.jpg" alt="..." class="d-block w-100"  height="600">
            </div>
            <div class="carousel-item">
                <img src="../images/p2.jpg" alt="..." class="d-block w-100" height="600">
            </div>
            <div class="carousel-item">
                <img src="../images/p3.jpg" alt="..." class="d-block w-100" height="600">
            </div>
        </div>
        <!-- 上一页按钮 -->
        <a href="#xy" class="carousel-control-prev" id="xy" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            <span class="sr-only">Previous</span>
        </a>

        <!-- 下一页按钮 -->
        <a href="#xy" class="carousel-control-next" id="xy" role="button" data-slide="next">
            <span class="carousel-control-next-icon"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <script src="../bootstrap/js/jquery-3.2.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

   

 

# bootstrap # css # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟