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 FormatNumber函数实现方法
Dec 30 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
图形数字验证代码
2006/10/09 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
详解vue中axios请求的封装
2019/04/08 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
应聘面试自我评价
2014/01/24 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
《雷雨》教学反思
2016/02/20 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python