[Bootstrap]组件（四） - 盛夏、光年_H5之家 - 中国HTML5教程资源分享第一站

导航条

移动设备上折叠(可开关)，超过规定视口标签时候水平展开模式依赖插件

注意点：导航条内元素过多或其他原因导致元素内元素宽度过长，会引起折行-->解决：a.减少导航内元素或者减少宽度 b.利用媒体查询或者响应工具类隐藏元素 c.修改媒体查询的值或者重置覆盖媒体查询的值

注意点：<nav>元素 || <div role="navigation"></div>

/* * 1 nav(.navbar.navbar-*：基类＋状态类)(div元素需要额外添加role="navigation") * 2 div(.container-fluid:响应式容器) * 3 div(.navbar-header：导航条头部) + div(.collapse.navbar-collapse：折叠类+导航折叠类) * 3.1 导航条头部内部：btn(.navbar-toggle.collapsed：导航开关类+被折叠类)+a(.navbar-brand：导航条商标类) * 3.2 折叠类+导航折叠类内部：ul(.nav.navbar-nav：导航基类＋导航条导航类)+(表单) */ Toggle navigationBrandLink (current)LinkDropdown ActionAnother actionSomething else hereSeparated linkOne more separated linkSubmitLinkDropdown ActionAnother actionSomething else hereSeparated link

导航条中的品牌图标

.navbar-brand类中放置img元素，即可设置自己的商标，根据需要修改css或覆盖css

导航条中的表单

submit

导航条中的按钮

button

导航条中的文本

navbar-text

非导航的链接

Signed in as Mark Otto

组件排列

.navbar-left/.navbar-right -->导航链接/表单/按钮/文本对齐

最后一个.navbar-right设置了负边距，最好不要用多个.navbar-right

导航条固定在顶部

.navbar-fixed-top 固定的导航条引起遮挡body内部其他的信息，可能需要对其添加内补等额外样式

...

导航条静止在顶部

.navbar-static-top 不需要给body设置内补

...

路径导航

面包屑.breadcrumb {padding/margin-bottom/list-style/background-color/border-radius}

HomeLibraryData

分页

nav>ul.pagination>li>a

12345

分页禁止和激活状态

禁止.disabled/激活.active

1 (current) ...

翻页

nav>ul.pager>li*2>a

PreviousNext

翻页两端对齐

nav>ul.pager>(li.previous>a)+(li.next>a)

OlderNewer