Bootstrap3 导航之个人学习笔记

Boostrap3 导航

标签(空格分隔): Bootstrap

1 目的

学习bootstrap导航栏

效果图:
Bootstrap3 导航之个人学习笔记_第1张图片

参考代码:


<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="#">Homea>li>
        <li><a href="#">Profilea>li>
        <li><a href="#">Messagea>li>
    ul>
<hr>
    
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Homea>li>
        <li><a href="#">Profilea>li>
        <li><a href="#">Messagea>li>
    ul>
<hr>

    
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Homea>li>
        <li><a href="#">Profilea>li>
        <li><a href="#">Messagea>li>
    ul>
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Homea>li>
        <li class="disabled"><a href="#">Profilea>li>
        <li><a href="#">Messagea>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="#">Homea>li>
                <li><a href="#">Profilea>li>
                <li><a href="#">Messagea>li>
            ul>
        li>
        <li><a href="#">Homea>li>
        <li><a href="#">Profilea>li>
        <li><a href="#">Messagea>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="#">Homea>li>
                <li><a href="#">Profilea>li>
                <li><a href="#">Messagea>li>
            ul>
        li>
        <li><a href="#">Homea>li>
        <li><a href="#">Profilea>li>
        <li><a href="#">Messagea>li>
    ul>
<hr>
    
    <h1>Example heading <span class="label label-default">Newspan>h1>
    <h2>Example heading <span class="label label-default">Newspan>h2>
    <h3>Example heading <span class="label label-default">Newspan>h3>
    <h4>Example heading <span class="label label-default">Newspan>h4>
    <h5>Example heading <span class="label label-default">Newspan>h5>
    <h6>Example heading <span class="label label-default">Newspan>h6>
    <hr>
    <span class="label label-default">Defaultspan>
    <span class="label label-primary">Primaryspan>
    <span class="label label-success">Successspan>
    <span class="label label-info">Infospan>
    <span class="label label-warning">Warningspan>
<hr>
    
    <ol class="breadcrumb">
        <li>
            <a href="#">Homea>
        li>
        <li><a href="#">Librarya>li>
        <li class="active">Currentli>
    ol>

body>
html>

2 实验内容

2.1 导航

  1. 标签页 nav nav-tabs
  2. 胶囊式标签 nav nav-pills
  3. 垂直堆叠 nav nav-pills nav-stacked
  4. 两端对齐 nav nav-pills nav-justified
  5. 禁用 disabled
  6. 下拉菜单,结合 dropdown dropdown-toggle data-toggle="dropdown" dropdown-menu
  7. 标签 label label-default 可用变体 label-primary label-success label-info label-warning label-danger
  8. 面包屑导航

你可能感兴趣的:(Bootstrap)