功能强大的Bootstrap效果展示（二）

网络编程 2024/11/15 佚名

3 2 1

上一篇已经讲了一些使用BootStrap的步骤和一些基本使用，点击查看
这篇博客继续给大家介绍一些常用效果的使用，主要有以下几个组件

1. 下拉菜单
2. 导航栏
3. 进度条
4. 媒体对象
5. 分页
6. 列表

首先要导入BootStrap的css和js

<link rel="stylesheet" href="css/bootstrap.min.css">
<!--最好也引用cdn的css，有些样式文件里没有-->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="/UploadFiles/2021-04-02/jquery-3.1.0.min.js">

1.下拉菜单
主要由button和ul组成，可以添加小标题和分割线


<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  地铁线路
  <!--这个是向下的三角符号-->
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
  <!--这个是小标题-->
  <li class="dropdown-header">地铁</li>
  <li><a href="#">1号线</a> </li>
  <li><a href="#">2号线</a> </li>
  <li><a href="#">3号线</a> </li>
  <li><a href="#">4号线</a> </li>
  <!--这个是分割线-->
  <li class="divider"></li>
  <li><a href="#">5号线</a> </li>
  </ul>
 </div>




2.导航栏
导航栏几乎是每个网页的标配，学好怎么用一定没错 

这是网页顶部的导航栏


<!--将nav的类设为navbar-inverse更加高端,设为navbar-static-top将navbar的圆角去掉并且静止固定在顶部-->
 <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container">
  <!--导航栏的开头，通常是文字或者图片-->
  <div class="navbar-header">
  <!--这个按钮可以在位置不够时点开菜单-->
  <button type="button" class="navbar-toggle" data-toggle="collapse"
   data-target="#bs-example-navbar-collapse-1">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <!--可将Brand换成img-->
  <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!--要id设为bs-example-navbar-collapse-1才能伸缩后被点开-->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
   <li><a href="#">会员管理</a></li>
   <li><a href="#">会员管理</a></li>
   <li><a href="#">会员管理</a></li>
   <li><a href="#">会员管理</a></li>
   <!--导航栏中加一个下拉菜单-->
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
    系统维护<span class="caret"></span>
   </a>
   <ul class="dropdown-menu" role="menu">
    <li><a href="#">恢复系统</a></li>
    <li><a href="#">系统备份</a></li>
    <li><a href="#">断开连接</a></li>
    <li><a href="#">删除用户</a></li>
   </ul>
   </li>
  </ul>
  <!--先写navbar-right越靠右-->
  <!--导航栏中的按钮-->
  <button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>
  <!--导航栏中的表单-->
  <form class="navbar-form navbar-right" role="search">
   <div class="form-group">
   <input type="text" class="form-control" placeholder="输入搜索内容">
   </div>
   <button type="summit" class="btn btn-default">搜索</button>
  </form>
  </div>
 </div>
 </nav>




我们在用网页浏览博客或者文件的时候，都有一个层级，这时如果是想返回上一级或者上几级就需要位置的导航栏


 <!--导航条-->
  <ol class="breadcrumb">
  <li><a href="#">我的后台</a> </li>
  <li><a href="#">系统分析</a> </li>
  <!--当前位置不可以点击跳转-->
  <li class="active">访问统计</li>
  </ol>



3.进度条


<div class="progress">
  <!--progress-bar-striped设置条纹，active设置动画-->
  <!--根据style宽度的百分比显示进度条的百分比-->
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
  <span class="sr-only">30%</span>
  <!--文字显示在进度条中间-->
  30%
  </div>
 </div>




4.媒体对象
在微博或者Twitter里的消息基本上都是这种样式 

左边是头像，右边是标题和文字


 <div class="media">
  <div class="media-left">
  <img class="media-object" src="/UploadFiles/2021-04-02/1.jpg">

5.分页
这是有多个页码的


<ul class="pagination">
  <li class="disabled">
  <a href="#" aria-label="Previous">
   <!--向左的双箭头-->
   <span aria-hidden="true">&laquo;</span>
  </a>
  </li>
  <!--第一个选项被激活-->
  <li class="active"><a href="#">1</a> </li>
  <li><a href="#">2</a> </li>
  <li><a href="#">3</a> </li>
  <li><a href="#">4</a> </li>
  <li><a href="#">5</a> </li>
  <li><a href="#">6</a> </li>
  <li><a href="#">7</a> </li>
  <li>
  <a href="#" aria-label="Next">
   <!--向右的双箭头-->
   <span aria-hidden="true">&raquo;</span>
  </a>
  </li>
 </ul>




这是只有上一页和下一页的


 <ul class="pager">
  <li><a href="#"><span aria-hidden="true">&larr;</span>上一页</a> </li>
  <li><a href="#"><span aria-hidden="true">&rarr;</span>下一页 </a> </li>
  </ul>



上面的写法是两个按钮连在一起的 

下面的写法是两个按钮分布在两侧


 <ul class="pager">
  <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>上一页</a> </li>
  <li class="next"><a href="#"><span aria-hidden="true">&rarr;</span>下一页 </a> </li>
  </ul>



6.列表
列表的效果十分常见，用起来也十分简单


 <div class="list-group col-md-3">
  <!--第一项被选中-->
  <a href="#" class="list-group-item active">访问统计</a>
  <a href="#" class="list-group-item">信息统计</a>
  <a href="#" class="list-group-item">日志统计</a>
  <a href="#" class="list-group-item">信息统计</a>
  <a href="#" class="list-group-item">信息统计</a>
  <a href="#" class="list-group-item">信息统计</a>
  <a href="#" class="list-group-item">信息统计</a>
  <a href="#" class="list-group-item">信息统计</a>
  </div>



我用上面的组件做了一个后台的静态网页
效果如图

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。