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 获取模态窗口的滚动位置代码
Aug 06 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
js实现登录拖拽窗口
Feb 10 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
获取URL文件名后缀
2013/10/24 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP简单日历实现方法
2016/07/20 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python获取图片颜色信息的方法
2015/03/18 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python实现公司年会抽奖程序
2019/01/22 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python tqdm库的使用
2020/11/30 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
软件配置管理有什么好处
2015/04/15 面试题
后勤部经理岗位职责
2014/02/23 职场文书
促销活动总结怎么写
2014/06/25 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python