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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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如何解决无法上传大于8M的文件问题
2014/03/10 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Javascript var变量删除原理及实现
2020/08/26 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
python3实现mysql导出excel的方法
2019/07/31 Python
python实现邮件发送功能
2019/08/10 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python中bisect的用法及示例详解
2020/07/20 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
管理科学大学生求职信
2013/11/13 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
win10更新失败无限重启解决方法
2022/04/19 数码科技