Bootstrap学习(五）navbar、nav、media、panel、list-group

最新推荐文章于 2022-06-18 17:52:04 发布

八千鸟羽

最新推荐文章于 2022-06-18 17:52:04 发布

阅读量2.8k

点赞数 2

分类专栏：小白的前端学习

本文链接：https://blog.csdn.net/qq_21567935/article/details/99945035

版权

小白的前端学习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

今天接着学习~

导航栏nav

tab式导航栏（胶囊导航）

注意这里ul改成div效果也不会变，但是ul是专门为行列表准备的~且必须保持一个tab处于active状态

<div class="container">
     <ul id="mytab" class="nav nav-tabs" role="tablist">
         <li role="presentation" class="active"><a href="">home</a></li>
         <li role="presentation"><a href="">content</a></li>
         <li role="presentation" ><a href="">end</a></li>
     </ul>

   </div>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
       $("#mytab a").click(function (e) {
           e.preventDefault();
           $(this).tab("show");
       })
   </script>

e.preventDefault()是阻止冒泡（防止子元素的行为触动了父元素的默认行为）
在这里插入图片描述

.nav-pills 变成按钮式

在这里插入图片描述

.nav-stacked 纵向排列

在这里插入图片描述

.nav-justified填满父元素

在这里插入图片描述

配合下拉菜单食用

     <ul id="mytab" class="nav nav-pills " role="tablist">
         <li role="presentation" class="active"><a href="">home</a></li>
         <li role="presentation">
          <a href="" class="dropdown-toggle" data-toggle="dropdown">
              content
             <span class="caret" ></span>
          </a>
             <ul class="dropdown-menu" role="menu" >
                 <li role="presentation" ><a role="menuitem" tabindex="-1">1</a></li>
                 <li role="presentation" ><a role="menuitem" tabindex="-1">2</a></li>
                 <li role="presentation" ><a role="menuitem" tabindex="-1">3</a></li>
             </ul>
         </li>
         <li role="presentation" ><a href="">end</a></li>
     </ul>

在这里插入图片描述
当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，具体的可以通过tabindex属性的作用了解。

导航栏navbar（上面是简易导航栏）

 <nav class="navbar navbar-default" role="navigation">
       <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav" id="mytab">
               <li class="active"><a href="#">Link</a></li>
               <li><a href="#">Link2</a></li>
               <li><a href="#">Link3</a></li>
           </ul>
       </div>
   </nav>

在这里插入图片描述

注意：role="navigation"表示告诉屏幕阅读器这是导航栏，navbar-collapse表示导航栏在手机端访问或者PC页面小于一定大小时（768px）,导航栏折叠不显示。navbar-default表示为导航栏为默认主题。navbar-nav表示设置ul为导航条组件内的列表元素。navbar-collapse 设置div元素为导航条组件各列表项的父元素。

.navbar-inverse 设置导航条为黑色主题

.navbar-fixed-top 设置导航条组件固定在顶部

.navbar-fixed-bottom 设置导航条组件固定底部

<nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
          <div class="navbar-header">
              <a class="navbar-brand" href="#">标题</a>
          </div>
          <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav" id="mytab">
                  <li class="active"><a href="#">Link</a></li>
                  <li><a href="#">Link2</a></li>
                  <li><a href="#">Link3</a></li>
              </ul>

              <form class="navbar-form navbar-left" role="search">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="搜索">
                  </div>
                  <button type="submit" class="btn btn-default">搜索</button>
              </form>
          </div>
      </div>
   </nav>

在这里插入图片描述

注意：.container-fluid设置宽度充满父元素;.navbar-header指定div元素包裹品牌图标，.navbar-brand设置导航条组件的品牌图标。.navbar-for为导航条组件内部的表单组件。

.navbar-left/right 导航控件居左居右

底部导航栏

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <ol class="breadcrumb">
        <li><a href="">网站首页</a> </li>
        <li><a href="">企业合作</a> </li>
        <li><a href="">人才招聘</a> </li>
    </ol>
</nav>

注意：.breadcrumb 面包屑组件，设置li分隔为斜杠/

在这里插入图片描述

媒体对象

 <div class="media">
           <a class="media-left" href="#">
               <img src="timg.jpg" alt="">
           </a>
           <div class="media-body">
               <h4 class="media-heading">
                   皮卡丘介绍
               </h4>
               <p>
                   皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型宝可梦，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路 。住在森林中的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟。
               </p>
           </div>
       </div>

注意：.media-left/middle/right/bottom/heading调整图片位置

在这里插入图片描述

Panel面板

  <div class="panel panel-default">
           <div  class="panel-heading">
             皮卡丘
          </div>
           <div  class="panel-body">
               皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型宝可梦，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路 。住在森林中的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟。
           </div> 
          <div class="panel-footer">宝可梦百科www.XXX.com</div>
       </div>

在这里插入图片描述

各种panel样式 .panel-danger/info…

嵌套列表

 <div class="panel panel-default">
           <div  class="panel-heading">
             宝可梦
          </div>
                  <ul class="list-group">
                      <li class="list-group-item">
                          001.妙蛙种子
                      </li>
                      <li class="list-group-item">
                          002.妙蛙草
                      </li>
                  </ul>
       </div>

在这里插入图片描述

List-group列表

<div class="list-group">
          <li class="list-group-item list-group-item-success">001妙蛙种子</li>
          <li class="list-group-item list-group-item-warning">002妙蛙草</li>
          <li class="list-group-item list-group-item-info">003妙蛙花</li>
          <li class="list-group-item list-group-item-danger active">004杰尼龟</li>
      </div>

注意：各种子项样式和active不表，如需选择点击事件可以把li标签改成a标签

在这里插入图片描述

<div class="list-group">
          <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">
                  《模拟人生4》新DLC“魔法世界” 变身魔法师畅玩巫术
              </h4>
              <p class="list-group-item-text">
                  日前，EA公布了《模拟人生4》的新DLC“魔法世界”，在这款DLC中，玩家将有机会体验不一样的魔法生活，据官方公布逇消息，该DLC将于9月10日登陆PC、MAC，10月15日登陆主机平台。
              </p>
          </a>
      </div>

在这里插入图片描述