Bootstrap3 导航之个人学习笔记

来源：互联网发布：教育统计系统导出数据编辑：程序博客网时间：2024/06/05 08:04

Boostrap3 导航

标签（空格分隔）： Bootstrap

1 目的

学习bootstrap导航栏

效果图：
这里写图片描述

参考代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <title>导航和标签</title></head><body>    <!--标签页-->    <ul class="nav nav-tabs">        <li class="active"><a href="#">Home</a></li>        <li><a href="#">Profile</a></li>        <li><a href="#">Message</a></li>    </ul><hr>    <!--胶囊标签 加上.nav-stacked垂直堆叠-->    <ul class="nav nav-pills nav-stacked">        <li class="active"><a href="#">Home</a></li>        <li><a href="#">Profile</a></li>        <li><a href="#">Message</a></li>    </ul><hr>    <!--两端对齐的导航-->    <ul class="nav nav-tabs nav-justified">        <li class="active"><a href="#">Home</a></li>        <li><a href="#">Profile</a></li>        <li><a href="#">Message</a></li>    </ul>    <ul class="nav nav-pills nav-justified">        <li class="active"><a href="#">Home</a></li>        <li class="disabled"><a href="#">Profile</a></li>        <li><a href="#">Message</a></li>    </ul><hr>    <!--下拉菜单-->    <ul class="nav nav-tabs">        <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown">                Dropdown <span class="caret"></span>            </a>            <ul class="dropdown-menu">                <li><a href="#">Home</a></li>                <li><a href="#">Profile</a></li>                <li><a href="#">Message</a></li>            </ul>        </li>        <li><a href="#">Home</a></li>        <li><a href="#">Profile</a></li>        <li><a href="#">Message</a></li>    </ul><hr>    <!--下拉菜单胶囊式-->    <ul class="nav nav-pills">        <li class="dropdown active">            <a href="#" class="dropdown-toggle" data-toggle="dropdown">                Dropdown <span class="caret"></span>            </a>            <ul class="dropdown-menu">                <li><a href="#">Home</a></li>                <li><a href="#">Profile</a></li>                <li><a href="#">Message</a></li>            </ul>        </li>        <li><a href="#">Home</a></li>        <li><a href="#">Profile</a></li>        <li><a href="#">Message</a></li>    </ul><hr>    <!--标签-->    <h1>Example heading <span class="label label-default">New</span></h1>    <h2>Example heading <span class="label label-default">New</span></h2>    <h3>Example heading <span class="label label-default">New</span></h3>    <h4>Example heading <span class="label label-default">New</span></h4>    <h5>Example heading <span class="label label-default">New</span></h5>    <h6>Example heading <span class="label label-default">New</span></h6>    <hr>    <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><hr>    <!--面包屑导航-->    <ol class="breadcrumb">        <li>            <a href="#">Home</a>        </li>        <li><a href="#">Library</a></li>        <li class="active">Current</li>    </ol></body></html>

2 实验内容

2.1 导航

标签页 nav nav-tabs
胶囊式标签 nav nav-pills
垂直堆叠 nav nav-pills nav-stacked
两端对齐 nav nav-pills nav-justified
禁用 disabled
下拉菜单，结合 dropdown dropdown-toggle data-toggle="dropdown" dropdown-menu
标签 label label-default 可用变体 label-primary label-success label-info label-warning label-danger
面包屑导航 <ol class="breadcrumb">

阅读全文

0 0