当前位置: 首页 > 编程笔记 >

功能强大的Bootstrap效果展示(二)

翟誉
2023-03-14
本文向大家介绍功能强大的Bootstrap效果展示(二),包括了功能强大的Bootstrap效果展示(二)的使用技巧和注意事项,需要的朋友参考一下

上一篇已经讲了一些使用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="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

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="images/1.jpg">
  </div>
  <div class=" media-body">
  <h4>Media heading</h4>
  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  </div>
 </div>

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插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍功能强大的Bootstrap组件(结合js),包括了功能强大的Bootstrap组件(结合js)的使用技巧和注意事项,需要的朋友参考一下 上两篇只讲了组件如何使用,基本没有说js,这篇博客要结合js来讲讲 主要讲解一下几个组件 1.模态框 2.滚动监听 3.标签页 4.工具提示 5.弹出框 6.按钮 7.堆叠 8.轮换页 9.侧边栏 首先导入css和js 1.模态框 我们通常在登录注

  • 本文向大家介绍轻松实现功能强大的Android刮奖效果控件(ScratchView),包括了轻松实现功能强大的Android刮奖效果控件(ScratchView)的使用技巧和注意事项,需要的朋友参考一下 前言 我身边有一部分开发的小伙伴,存在着这样一种习惯。某一天,突然看到某一款 App 上有个很漂亮的自定义控件(动画)效果,就会绞尽脑子想办法去自己实现一发。当然,我自己也是属于这类型的骚年,看到

  • 本文向大家介绍bootstrap daterangepicker汉化以及扩展功能,包括了bootstrap daterangepicker汉化以及扩展功能的使用技巧和注意事项,需要的朋友参考一下 bootstrap daterangepicker使用介绍,具体如下 一、扩展的功能      1、初始化时,会自动创建一个select标签;      2、当改变select值时,日期也会自动改变,并且

  • 本文向大家介绍功能强大的PHP发邮件类,包括了功能强大的PHP发邮件类的使用技巧和注意事项,需要的朋友参考一下 本文示例为大家分享了强大的PHP发邮件类,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 各种图片的 cover flow 展示效果。应用范围比较广,都是一些常见的展示,而且引用也很简单。 [Code4App.com]

  • 本文向大家介绍JS相册图片抖动放大展示效果的示例代码,包括了JS相册图片抖动放大展示效果的示例代码的使用技巧和注意事项,需要的朋友参考一下 上篇文章给大家介绍了JS实现简单抖动效果,感兴趣的朋友点击查看。 今天给大家分享JS相册图片抖动放大展示效果,效果图如下所示: 到此这篇关于JS相册图片抖动放大展示效果的示例代码的文章就介绍到这了,更多相关js图片放大抖动内容请搜索呐喊教程以前的文章或继续浏览