Bootstrap 关于导航的使用

如果你在使用导航组件实现导航条功能,务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性,或者用一个 <nav> 元素包裹整个导航组件。

导航条基于.nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

  

.nav-pills

垂直的话,多加个.nav-stacked

.disabled只改变 <a> 的外观,不改变功能

两端对齐的标签页

在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。

两端对齐的导航条导航链接已经被弃用了。

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

  

时间: 2024-10-14 16:44:42

Bootstrap 关于导航的使用的相关文章

第二百四十九节,Bootstrap附加导航插件

第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 附加导航即粘贴在屏幕某处实现锚点功能. 基本实例

关于bootstrap的导航栏

以下是bootstrap的导航栏 <div id="navbar" class="navbar-collapse collapse">                    <ul class="nav navbar-nav">                        <li class="active"><a href="#">主页</a>

Bootstrap 附加导航(Affix)插件 问题与解决方式

使用 Bootstrap 附加导航(Affix)插件 出现各种问题:记录下解决问题的方式,供大家使用参考,言有不当,欢迎拍砖. ★  Link点击后的位置偏移 点击侧导航条时,页面上指定的Link会滚动过高,被顶导航条遮住.这个貌似不是Affix的问题,而是顶导航条固定位置的原因.也可以定义到外层div中,这个自己发挥 Css代码 /* Janky fix for preventing navbar from overlapping */   h1[id] {     padding-top: 

bootstrap-导航条

默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 两端对齐的导航条导航链接已经被弃用了. 导航条内所包含元素溢出 由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间,你可能会遇到导航条中的内容折行的情况(也就是导航条占据两行).解决办法如下: 减少导航条内所有元素所占据的宽度. 在某些尺寸的屏幕上(利用 响应式工具类)隐藏导航条内的一些元素. 修

深入理解BootStrap Item11 -- 导航页(navbar)

导航条 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色(显示更突出).而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.在这一节中将一起探讨Bootstrap框架中导航条的使用. 导航条和导航一样,在Bootstrap框架中是一个独立组件,所以你也可以根据自己的需求使用不同的版本: LESS版本:对应的源文件navbar.l

【Bootstrap】导航栏navbar在PC上的缺陷与解决方案

在Bootstrap的官网上,提供了一种导航栏的组件: 只要在站点文件夹放好JQ与Bootstrap输入如下代码, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

Bootstrap之导航条,分页导航

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.   基础导航条 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使

Bootstrap(导航条)

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>顶部导航

bootstrap制作导航条

bootstrap 导航条摸索了好久,要不就是左边和右边不会水平对齐,要不就是颜色不一样,菜鸟最后终于搞定,直接把代码放这里,以后直接用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&

Bootstrap 附加导航插件

一.附加导航 附加导航即粘贴在屏幕某处实现锚点功能. //基本实例. <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron" style="height:150px"> <h1>Bootstrap Affix</h