bootstrap组件4

最新推荐文章于 2024-10-03 22:12:17 发布

Winsonone

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量283

点赞数

分类专栏： Notes 文章标签： JavaScript css ViewUI

Notes 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

每个网站都会有导航，Bootstrap中可用的导航有相似的标记，使用基类.nav开头，这是相似的部分，然后改变修饰类可以改变样式。当使用标签页.nav-tabs，假如要实现切换功能，必须要用到tabs的JS插件。Bootstrap中使用.nav-pills可以创建一个胶囊式标签页，加上.nav-stacked，pill可以竖直堆叠。在大于768px的屏幕上，通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。对任何导航（包含标签页，pills，或列表），加入.disabled使链接为灰色且没有鼠标悬停效果。但是这个类只改变<a>的外观，而不是它的功能。导航条是在应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式。这个响应式导航栏需要collapse插件，要增强可访问性，一定要给每个导航条加上role=navigation。导航条中可以有许多的元素，并且不同的元素有不同的修饰类。例如，将表单元素放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。对于不包含在<form>中的<button>元素，加上.navbar-btn这个类后可以让它在导航条里垂直居中。把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用<p>标签。在标准的导航组件之外添加标准链接，使用.navbar-link可以让链接有正确的默认颜色和反色。用.navbar-left或者navbar-right工具类给导航链接、表单、按钮或文本对齐。另外导航条的位置也是可以bootstrap中的类来设置，添加.navbar-fixed-top可以让导航条固定在顶部，使用时要注意，这个固定的导航条会遮住页面上的其他内容，除非给<body>的上方设置了padding，导航条的默认高度是50px。可以在bootstrap.css之后加入body{padding-top:70px}。用navbar-fixed-bottom，使用的注意事项与navbar-fixed-top一样，需要为body标签设置内部（padding）。通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。Bootstrap中有一个反色导航条的设置，通过添加.navbar-inverse类可以改变导航条的外观。最后介绍一个面包屑导航，使用breadcrumb来修饰，用一个带方向的层次表明当前页面的位置，分隔符自动地通过CSS的:before和content添加上。