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

今天接着学习~

导航栏nav

tab式导航栏（胶囊导航）

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

     

         
home
         
content
         
end
     

   
   
   
   

e.preventDefault()是阻止冒泡（防止子元素的行为触动了父元素的默认行为）

.nav-pills 变成按钮式

.nav-stacked 纵向排列

.nav-justified填满父元素

配合下拉菜单食用

     

         
home
         

          
              content
             
          
             

                 
1
                 
2
                 
3
             
         
         
end
     

当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，具体的可以通过tabindex属性的作用了解。

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

 

       

           

               
Link
               
Link2
               
Link3
           
       
   

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

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

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

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

      

          

              标题
          
          

              

                  
Link
                  
Link2
                  
Link3
              

              

                  

                      
                  
                  搜索
              
          
      
   

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

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

底部导航栏

    

        
网站首页 
        
企业合作 
        
人才招聘 
    

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

媒体对象

 

           
               
           
           

               

                   皮卡丘介绍
               
               

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

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

Panel面板

  

           

             皮卡丘
          
           

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

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

嵌套列表

 

           

             宝可梦
          
                  

                      

                          001.妙蛙种子
                      
                      

                          002.妙蛙草
                      
                  
       

List-group列表

          
001妙蛙种子
          
002妙蛙草
          
003妙蛙花
          
004杰尼龟
      

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

          
              

                  《模拟人生4》新DLC“魔法世界” 变身魔法师畅玩巫术
              
              

                  日前，EA公布了《模拟人生4》的新DLC“魔法世界”，在这款DLC中，玩家将有机会体验不一样的魔法生活，据官方公布逇消息，该DLC将于9月10日登陆PC、MAC，10月15日登陆主机平台。
              
          
      

参考文献

1.https://www.cnblogs.com/jipinglong/p/9032640.html