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

今天接着学习~

导航栏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>

参考文献

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

Bootstrap学习(五）navbar、nav、media、panel、list-group相关推荐

python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
昨日内容回顾 ajax //get post 两种方式做请求get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数get请求acce ...
bootstrap学习（五）代码
bootstrap学习(五)代码内联代码: <code>public static</code>void main 用户输入: to edit setting,press & ...
Bootstrap学习（三）——Bootstrap 插件
Bootstrap学习(三)--Bootstrap 插件 Bootstrap 插件 Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动. 站点引用 Boots ...
bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）
这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老 ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
Bootstrap学习文档（三）
Bootstrap 注意下面的组件,很多是需要用到 js 的,所以要引入 Bootstrap 的 js 文件和 jquery 文件在示例代码中,我只是没有写,注意加上哦. 字体图标 Bootstrap ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
Bootstrap学习 (一)
Bootstrap学习(一) 准备 1.需要下载的资源 2.参考资源 1. HBuilder快捷键设置 2. Bootstrap的使用 2.1 01-BootStrap的页面模板代码 2.2 参考A ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
bootstrap学习（四）输入框、导航
bootstrap学习(四)输入框.导航输入框组: 基本用法: //form-control 占满 //input-group:输入框组 //input-group-addon:输入框前加入一个前缀 ...