功能强大的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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
在Django的上下文中设置变量的方法
2015/07/20 Python
简述Python中的进程、线程、协程
2016/03/18 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
环境工程专业自荐信范文
2014/06/24 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
公司授权委托书范本
2014/09/18 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android