Bootstrap如何激活导航状态


Posted in Javascript onMarch 22, 2017

本文实例为大家分享了Bootstrap激活导航状态的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Bootstrap-激活导航状态</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <style> 
      body { 
        padding-top: 150px; 
        padding-bottom: 40px; 
        font-family: '楷体'; 
        font-size: 24px; 
      } 
      span.badge { 
        font-size: 18px; 
      } 
    </style> 
  </head> 
 
  <body> 
    <div class="container"> 
      <h3>胶囊式导航中的激活状态</h3> 
      <ul class="nav nav-pills"> 
        <li class="active"> 
          <a href="#">首页 <span class="badge">42</span></a> 
        </li> 
        <li> 
          <a href="#">简介</a> 
        </li> 
        <li> 
          <a href="#">消息 <span class="badge" >3</span></a> 
        </li> 
      </ul> 
      <br> 
      <h3>列表导航中的激活状态</h3> 
      <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> 
        <li class="active"> 
          <a href="#"> <span class="badge pull-right">42</span> 首页 </a> 
        </li> 
        <li> 
          <a href="#">简介</a> 
        </li> 
        <li> 
          <a href="#"> <span class="badge pull-right">3</span> 消息 </a> 
        </li> 
      </ul> 
    </div> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

效果图:

Bootstrap如何激活导航状态

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

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
javascript如何定义对象数组
Jun 07 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
Bootstrap缩略图的创建方法
Mar 22 #Javascript
JS+DIV实现的卷帘效果示例
Mar 22 #Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 #Javascript
javascript实现滑动解锁功能
Mar 22 #Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 #Javascript
bootstrap IE8 兼容性处理
Mar 22 #Javascript
You might like
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
各种快递查询--Api接口
2016/04/26 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
DOM精简教程
2006/10/03 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
JS中数组重排序方法
2016/11/11 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
在python中bool函数的取值方法
2018/11/01 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python多维数组分位数的求取方式
2020/03/03 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
学期个人自我总结
2015/02/13 职场文书