Bootstrap如何激活导航状态

2024-10-02 12:35:23

本文实例为大家分享了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开发实战之第一次接触Bootstrap

本文我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开发我们的 Web 项目. 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC
第一次接触Bootstrap框架

关于Bootstrap,话不多说,直接进入主题: 安装可以通过bootstrap官方网站下载安装可以通过Bower安装(关于bower一种包管理器,本文不做详解) bower install bootstrap 可以通过npm安装(关于npm可以阅读) npm install bootstrap 项目中引入Bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo
Bootstrap每天必学之基础排版

本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下.主要内容如下: 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表一.标题 Html中的所有标题标签,从<h1>到<h6>均可使用.另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式. <div class="container"> <h1 class
bootstrap基础知识学习笔记

在此就不做 bootstrap 的介绍了,近几年 bootstrap 越来越流行,一点不亚于 js 中的 jquery. 以下为 bootstrap 3.3.5 学习中记录的东西,方便查阅,作者使用的是 jsp ,跟 html 可能有稍许不同,请自行参考修改 [引用文件] [页面引用] 路径请自行规划 <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.j
第一次接触神奇的Bootstrap

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boilerp
Bootstrap如何创建表单

Bootstrap表单类型分为三种格式:垂直或基本表单.内联表单.水平表单. 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. 向所有的文本元素 <input>.<tex
如何使用bootstrap框架 bootstrap入门必看!

前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录看bootstrap官网,接着我下载了用于生产环境Bootstrap: 解压出来是这样的: 目录结构大概是这样的,前几天在官网有看到.下面这个目录结构你应该先了解下: bootstrap3 ├── css │├── bootstrap-theme.css //主题类型,生产上一般用不到 │├── boots
如何使用Bootstrap创建表单

Bootstrap 表单在本章中,我们将学习如何使用 Bootstrap 创建表单.Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 垂直或基本表单基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: - 向父 <form> 元素添加 role="form". - 把标签和控件放在一个带有 class .form-group 的中.这是获取最佳间距所必需的. - 向所有的
vue中如何引入jQuery和Bootstrap

这两天学习了Vue.js ,所以,今天添加一点小笔记. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev 这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在build文件下)两个地方: 1:加入 var webpack=require('webpack'); 2 在module.exports的里面加入 plugins: [ new webpack.opt
全系IE支持Bootstrap的解决方法

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在一个网友帖子的帮助下解决了问题,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记attribu

Bootstrap如何激活导航状态

相关推荐

随机推荐