标签和徽章

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>
    <!-- Bootstrap CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container" style="margin-top:50px;">
        <div class="row">
            <div>
                <div class="col-md-6">
                    <span class="label label-default">Default</span>
                    <span class="label label-primary">Primary</span>
                    <span class="label label-success">Success</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-warning">Warning</span>
                    <span class="label label-danger">Danger</span>
                    <br>
                    <br>
                    <!-- 徽章 -->
                    <a href="#">Inbox <span class="badge">42</span></a>
                    <button class="btn btn-primary" type="button">
                        Messages
                        <span class="badge">4</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="nav nav-pills" role="tablist">
                        <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
                        <li role="presentation"><a href="#">Profile</a></li>
                        <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
                    </ul </div>
                    <!-- 路径导航 <nav>官方没有加 -->
                </div>
            </div>
            <!-- jQuery -->
            <script src="//code.jquery.com/jquery.js"></script>
            <!-- Bootstrap JavaScript -->
            <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>
时间: 2024-10-10 10:56:18

标签和徽章的相关文章

Bootstrap基础7(标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签.徽章.

第二百三十九节,Bootstrap路径分页标签和徽章组件

Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 和徽章组件. 一.路径组件 路径组件也叫做面包屑导航. 面包屑导航 breadcrumb样式class类,写在<ul>或<ol>里,设置面包屑导航(Bootstrap) <ol class="breadcrumb"> <li><a hr

BootStrap入门教程 (三) :可重用组件(按钮,导航,标签,徽章,排版,缩略图,提醒,进度条,杂项)

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).

Bootstrap 分页、标签、徽章、超大屏幕、页面标题

分页(pagination), 是一种无序列表 1.默认的分页(.pagination) 代码示例: 1 <ul class="pagination"> 2 <li><a href="#">«</a></li> 3 <li><a href="#">1</a></li> 4 <li><a href="#"

Bootstrap(8) 路径分页标签和徽章组件

一.路径组件路径组件也叫做面包屑导航.//面包屑导航 <ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li> <li class="active">韩版 2015 年羊绒毛衣</li> &l

第 9 章 路径分页标签和徽章组件

学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件和徽章组件. 一.路径组件 路径组件也叫做面包屑导航. //面包屑导航 <ol class="breadcrumb"> <li> <a href="#">首页</a> </li> <li> <a href="

Bootstrap 路径分页标签和徽章组件

一.路径组件路径组件也叫做面包屑导航.//面包屑导航<ol class="breadcrumb"><li><a href="#">首页</a></li><li><a href="#">产品列表</a></li><li class="active">韩版 2015 年羊绒毛衣</li></ol

Bootstrap 内联标签和徽章

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap badges Example</title> <meta name="description" content="Bootstrap badges Example. All types of badge

bootstrap中标签和徽章&lt;新闻后面的new hot等&gt;

直接看效果吧! 代码: <div class="container"> <h2>最近气温将会大幅上升<span class="label label-info">最新</span></h2> <h3>房价下跌了 <span class="label label-danger">hot</span></h3> <a href="