• 前端基础之《Bootstrap（8）—CSS组件_导航条》

    一、导航条

    1、nav标签：灰色小条

    1. <nav class="navbar navbar-default">
    2.     
    3. nav>

    2、头部和折叠小按钮（.navbar-header）

    1. <div class="navbar-header">
    2.  
    3. div>

    3、文字对齐（.navbar-brand）

    <a href="" class="navbar-brand">首页a>

    4、折叠的小方块按钮（.navbar-toggle .collapsed）

    5、合并区隐藏（.collapse .navbar-collapse）

    6、导航条结构
    导航条分为两块：
    第一部分，头部和小按钮
    第二部分，合并区

    7、例子

    1. <nav class="navbar navbar-default">
    2.     
    3.     <div class="navbar-header">
    4.         <a href="" class="navbar-brand">首页a>
    5.         
    6.         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
    7.             <span class="icon-bar">span>
    8.             <span class="icon-bar">span>
    9.             <span class="icon-bar">span>
    10.         button>
    11.         
    12.     div>
    13.     
    14.     <div id="mynavbar" class="collapse navbar-collapse">
    15.         <ul class="nav navbar-nav">
    16.             <li><a href="">百度a>li>
    17.             <li><a href="">百度a>li>
    18.             <li><a href="">百度a>li>
    19.             <li><a href="">百度a>li>
    20.             <li><a href="">百度a>li>
    21.             <li><a href="">百度a>li>
    22.         ul>
    23.     div>
    24. nav>

    8、navbar对齐
    navbar-right：右对齐
    navbar-left：左对齐

    二、navbar反色效果
    navbar-default：默认灰色
    navbar-inverse：反色

    三、品牌图标（.navbar-brand）
    在navbar-header中的a链接，直接放入图片

    1. <div class="navbar-header">
    2.     <a href="" class="navbar-brand"><img src="bs/image/222.jpg" height="100%">a>
    3.     
    4.     
    5. div>

    四、导航条中的下拉菜单

    1. <li class="dropdowm">
    2.     <a href="" class="dropdown-toggle" data-toggle="dropdown">
    3.         <span>网站实例 <span class="caret">span>span>
    4.     a>
    5.     <ul class="dropdown-menu">
    6.         <li><a href="">linuxa>li>
    7.         <li><a href="">linuxa>li>
    8.         <li><a href="">linuxa>li>
    9.         <li><a href="">linuxa>li>
    10.         <li><a href="">linuxa>li>
    11.     ul>
    12. li>

    五、导航条中的form表单（.navbar-form）
    做个搜索框

    1. <form action="" class="navbar-form navbar-right">
    2.     <div class="form-group">
    3.         <input type="text" class="form-control">
    4.     div>
    5.     <div class="form-group">
    6.         <input type="submit" value="搜索" class="btn btn-default">
    7.         <button class="btn btn-primary"><span class="glyphicon glyphicon-search">span>button>
    8.     div>
    9. form>

    六、导航条中的纯按钮（.navbar-btn）

    <button class="btn btn-default navbar-btn">Sign inbutton>

    七、导航条中的文本（.navbar-text）

    <p class="navbar-text">注册p>

    八、导航条中的链接（.navbar-link）

    <p class="navbar-text"><a href="#" class="navbar-link">登录a>p>

    九、导航条固定在顶部（.navbar-fixed-top）
    在nav标签内加上

    十、导航条固定在底部（.navbar-fixed-bottom）

    十一、导航条静止在顶部（.navbar-static-top）

    十二、导航条完整例子

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5. <meta charset="UTF-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7. <link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
    8. <script src="bs/js/jquery-3.6.1.js">script>
    9. <script src="bs/js/bootstrap.js">script>
    10. <title>bootstraptitle>
    11. <style>
    12.     body {
    13.         padding-top: 20px;
    14.     }
    15. style>
    16. head>
    17.  
    18. <body>
    19. 	<div class="container">
    20.         <h1 class="page-header">bootstrap前端框架h1>
    21.         
    22.         <nav class="navbar navbar-inverse navbar-fixed-top">
    23.             
    24.             <div class="container">
    25.                 
    26.                 <div class="navbar-header">
    27.                     <a href="" class="navbar-brand"><img src="bs/image/222.jpg" height="100%">a>
    28.                     
    29.                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
    30.                         <span class="icon-bar">span>
    31.                         <span class="icon-bar">span>
    32.                         <span class="icon-bar">span>
    33.                     button>
    34.                     
    35.                 div>
    36.                 
    37.                 <div id="mynavbar" class="collapse navbar-collapse">
    38.                     <ul class="nav navbar-nav">
    39.                         <li><a href="">百度a>li>
    40.                         <li><a href="">百度a>li>
    41.                         <li><a href="">百度a>li>
    42.                         <li><a href="">百度a>li>
    43.                         <li><a href="">百度a>li>
    44.                         <li><a href="">百度a>li>
    45.                         <li class="dropdowm">
    46.                             <a href="" class="dropdown-toggle" data-toggle="dropdown">
    47.                                 <span>网站实例 <span class="caret">span>span>
    48.                             a>
    49.                             <ul class="dropdown-menu">
    50.                                 <li><a href="">linuxa>li>
    51.                                 <li><a href="">linuxa>li>
    52.                                 <li><a href="">linuxa>li>
    53.                                 <li><a href="">linuxa>li>
    54.                                 <li><a href="">linuxa>li>
    55.                             ul>
    56.                         li>
    57.                     ul>
    58.  
    59.                     <button class="btn btn-default navbar-btn">Sign inbutton>
    60.  
    61.                     <p class="navbar-text">注册p>
    62.  
    63.                     <p class="navbar-text"><a href="#" class="navbar-link">登录a>p>
    64.  
    65.                     <form action="" class="navbar-form navbar-right">
    66.                         <div class="form-group">
    67.                             <input type="text" class="form-control">
    68.                         div>
    69.                         <div class="form-group">
    70.                             <input type="submit" value="搜索" class="btn btn-default">
    71.                             <button class="btn btn-primary"><span class="glyphicon glyphicon-search">span>button>
    72.                         div>
    73.                     form>
    74.                 div>
    75.             div>
    76.             
    77.         nav>
    78.         
    79.         <h1>aaaaaaaaaaaaaah1>
    80.         <h1>aaaaaaaaaaaaaah1>
    81.         <h1>aaaaaaaaaaaaaah1>
    82.         <h1>aaaaaaaaaaaaaah1>
    83.         <h1>aaaaaaaaaaaaaah1>
    84.         <h1>aaaaaaaaaaaaaah1>
    85.         <h1>aaaaaaaaaaaaaah1>
    86.         <h1>aaaaaaaaaaaaaah1>
    87.         <h1>aaaaaaaaaaaaaah1>
    88.         <h1>aaaaaaaaaaaaaah1>
    89.         <h1>aaaaaaaaaaaaaah1>
    90.         <h1>aaaaaaaaaaaaaah1>
    91.         <h1>aaaaaaaaaaaaaah1>
    92.         <h1>aaaaaaaaaaaaaah1>
    93.         <h1>aaaaaaaaaaaaaah1>
    94.         <h1>aaaaaaaaaaaaaah1>
    95.         <h1>aaaaaaaaaaaaaah1>
    96.         <h1>aaaaaaaaaaaaaah1>
    97.         <h1>aaaaaaaaaaaaaah1>
    98.         <h1>aaaaaaaaaaaaaah1>
    99.     div>
    100. body>
    101.  
    102. <script>
    103. 	
    104. script>
    105.  
    106. html>

    十三、路径导航（面包屑导航）（.breadcrumb）

    1. <div class="">
    2.     <ol class="breadcrumb">
    3.         <li><a href="">linuxa>li>
    4.         <li><a href="">linuxa>li>
    5.         <li><a href="">linuxa>li>
    6.         <li><a href="">linuxa>li>
    7.         <li><a href="">linuxa>li>
    8.     ol>
    9. div>

  • 相关阅读:
    百度云原生产品 6 月刊 | CCE 节点组支持配置多个备选机型、CCR 新增镜像加速功能
    如何设计一个线程池
    【SpringBoot整合MQ】-----SpringBoot整合RabbitMQ
    springboot基于Java Web的华家医疗器械商城设计与实现毕业设计源码261620
    NVIDIA NCC​L 源码学习（三）- 机器内拓扑分析
    Jackson ImmunoResearch 用于蛋白质印迹的偶联物方案
    Stable Diffusion插件（翻译）
    PostgreSQL LISTEN 与NOTIFY命令
    cookiecutter工具
    SQL 左连接 LEFT JOIN 关键字｜｜SQL右连接 RIGHT JOIN 关键字
  • 原文地址：https://blog.csdn.net/csj50/article/details/127745193