Bootstrap导航和导航条

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

标签页

要体现出导航的效果就要将<ul>标签和<li>标签结合起来，

在ul标签使用到的属性值是<ul class="nav nav-tabs">。

在li标签里使用到的属性是<li role="presentation"><a href="#">Profile</a></li>。

胶囊式标签页

导航条

在使用导航条时要用到主要标签有

nav标签：标签定义导航链接的部分

<nav>元素

在nav标签中要用到的属性值是： class="navbar navbar-default"

若要将导航固定在顶部 ：添加 .navbar-fixed-top 类可以让导航条固定在

顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居

中，并在两侧添加内补（padding）。

若要将导航固定在底部 ：添加 .navbar-fixed-bottom 类可以让导航条固定在

底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航

条居中，并在两侧添加内补（padding）。

若要将导航静止在顶部 ：通过添加 .navbar-static-top 类即可创建一个与页面等

宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个

.container 或 .container-fluid 容器，用于将导航条居中对齐并

在两侧添加内补（padding）。

与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）。

Bootstrap导航和导航条相关推荐

Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
Bootstrap 反色导航条
反色导航条只需在 .navbar 类后面追加 .navbar-inverse 类,就能创建出反色效果导航条,即黑底白字的导航条.如: <div class="navbar navba ...
Bootstrap组件学习之导航和导航条
导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...
Bootstrap 学习之（十）------ 导航与导航条
导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页注意 .nav-tabs 类依赖 .nav 基类. <span style= ...
bootstrap下拉框分页_学习使用Bootstrap输入框、导航、分页等常用组件
Bootstrap输入框和导航组件一.下拉菜单下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来. 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置datat ...
bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
Bootstrap面包屑导航
Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...
Bootstrap 面包屑导航（Breadcrumb）
一.Bootstrap 面包屑导航 1.1 面包屑导航css 面包屑导航是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置,是 ...
bootstrap悬浮多级导航菜单
bootstrap悬浮多级导航菜单效果图: 源码: <!DOCTYPE html> <html lang="zh-cn"><head>< ...

Bootstrap导航和导航条

Bootstrap导航和导航条相关推荐

最新文章

热门文章