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


Posted in Javascript onAugust 03, 2016

上一篇已经讲了一些使用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">«</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">»</span>
  </a>
  </li>
 </ul>

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

<ul class="pager">
  <li><a href="#"><span aria-hidden="true">←</span>上一页</a> </li>
  <li><a href="#"><span aria-hidden="true">→</span>下一页 </a> </li>
  </ul>

上面的写法是两个按钮连在一起的
下面的写法是两个按钮分布在两侧

<ul class="pager">
  <li class="previous"><a href="#"><span aria-hidden="true">←</span>上一页</a> </li>
  <li class="next"><a href="#"><span aria-hidden="true">→</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>

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

效果如图

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
Highcharts学习之坐标轴
Aug 02 #Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 #Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 #Javascript
Highcharts入门之基本属性
Aug 02 #Javascript
js检查是否关闭浏览器的方法
Aug 02 #Javascript
Highcharts入门之简介
Aug 02 #Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 #Javascript
You might like
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
jQuery使用方法
2017/02/04 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
python创建关联数组(字典)的方法
2015/05/04 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
商务宴请邀请函范文
2015/02/02 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
党员个人自我评价
2015/03/03 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
父亲节感言
2015/08/03 职场文书
消防宣传标语大全
2015/08/03 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android