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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
jquery的颜色选择插件实例代码
Oct 02 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 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
php5数字型字符串加解密代码
2008/04/24 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
js改变Iframe中Src的方法
2015/05/05 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
python 写一个水果忍者游戏
2021/01/13 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
老公保证书怎么写
2015/02/26 职场文书
培训后的感想
2015/08/07 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL