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 相关文章推荐
JQuery实现防止退格键返回的方法
Feb 12 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
BootStrap selectpicker
Jun 20 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
详解Python自建logging模块
2018/01/29 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python实现字典嵌套列表取值
2019/12/16 Python
如何理解python对象
2020/06/21 Python
python 绘制正态曲线的示例
2020/09/24 Python
python中str内置函数用法总结
2020/12/27 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
weblogic面试题
2016/03/07 面试题
创业计划书怎样才能打动风投
2014/01/01 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
软件售后服务方案
2014/05/29 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技