Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

1. 使用图标的导航栏

使用导航栏样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <nav class="navbar navbar-default" role="navigation">

        <div class="container-fluid">

            <div class="navbar-header">

                <a class="navbar-brand" href="#">Test Bootstrap</a>

            </div>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>

                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>

            </ul>

        </div>

    </nav>

</body>

</html>

样式效果：

2. 分页(Pagination):  是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。

使用分页样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <ul class="pagination">

        <li><a href="#">&laquo;</a></li>

        <li class="active"><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        <li><a href="#">5</a></li>

        <li><a href="#">6</a></li>

        <li><a href="#">&raquo;</a></li>

    </ul>

</body>

</html>

样式效果：

3. 标签样式

使用样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <span class="label label-default">默认标签</span>

    <span class="label label-primary">主要标签</span>

    <span class="label label-success">成功标签</span>

    <span class="label label-info">信息标签</span>

    <span class="label label-warning">警告标签</span>

    <span class="label label-danger">危险标签</span>

</body>

</html>

样式效果：

4. 徽章（Badges）：主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。

使用徽章样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <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="#">留言</a>

        </li>

        <li>

            <a href="#">消息

                <span class="badge">3</span>

            </a>

        </li>

    </ul>

</body>

</html>

样式效果：

Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式的更多相关文章

  1. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  2. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  3. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  4. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  5. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  6. bootstrap导航栏PC端移动端之不同样式

    在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因. 首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏: 这是我网站的移动端导航栏,看着就难受: 我用谷歌浏览器F12 ...

  7. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  8. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

  9. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

随机推荐

  1. WebSocket(2)---实现游戏公告功能

    实现游戏公告功能 实现功能:游戏管理里发布游戏公告,其它游戏玩家页面能够马上接受到游戏公告信息. 下面直接上代码案例,这里主要展示关键代码,底部有源码. 一.案例 1.pom.xml文件 主要是添加s ...

  2. 【从零开始自制CPU之学习篇06】寄存器

    上一篇文章学习了总线的相关知识,途中ABC当时假设为一个个的8位寄存器.这一篇要学习怎么构建这个寄存器. 这分为两个三个部分,数据输入,寄存器,数据输出.首先不管输出,来看数据输入和寄存器这两个部分. ...

  3. Kibana（一张图片胜过千万行日志）

    Kibana是一个开源的分析和可视化平台,设计用于和Elasticsearch一起工作. 你用Kibana来搜索,查看,并和存储在Elasticsearch索引中的数据进行交互. 你可以轻松地执行高级 ...

  4. Shader 入门笔记(二) CPU和GPU之间的通信,渲染流水线

    渲染流水线 1)应用阶段(CPU处理) 首先,准备好场景数据(摄像机位置,视锥体,模型和光源等) 接着,做粗粒度剔除工作. 最后,设置好每个模型的渲染状态(使用的材质,纹理,shader等) 这一阶段 ...

  5. [十二]基础数据类型之String

    在正式介绍String之前,我们先介绍下CharSequence char + sequence 就是字符的序列的意思 Java中万事万物都是对象类型 而对于字符的序列,也就是多个char, 这么一种 ...

  6. Spring Boot 2.x（四）：整合Mybatis的四种方式

    前言 目前的大环境下,使用Mybatis作为持久层框架还是占了绝大多数的,下面我们来说一下使用Mybatis的几种姿势. 姿势一:零配置注解开发 第一步:引入依赖 首先,我们需要在pom文件中添加依赖 ...

  7. 痞子衡嵌入式：飞思卡尔Kinetis系列MCU启动那些事（11）- KBOOT特性(ROM API)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔Kinetis系列MCU的KBOOT之ROM API特性. KBOOT的ROM API特性主要存在于ROM Bootloader ...

  8. VisualStudio移动开发（C#、VB.NET）Smobiler开发平台——GifView控件的使用方式

    一.          样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个GifView控件到窗体界面上 修改GifView的属性 Aut ...

  9. 如何终止正在进行expdp导出数据的任务

    不能用ctrl+c来终止导出 一.按照以前的习惯,在进行oracle数据库数据导出操作时,大家一般都会使用组合键“CTRL+C”来终止导出操作.但这种方法在expdp导出数据时,却不能使用,因为虽然可 ...

  10. [PHP] 邮件发送mail()函数失败问题 sendmail命令与postfix

    1. php的mail()函数是可以发送邮件的 , 但是一直就没有测试成功过 , 现在总结一下原因 : php的mail函数 基于sendmail命令来发送 , sendmail命令需要安装postf ...