Bootstrap4组件:导航栏(navbar)


发布时间:2020-03-20 16:26    作者: Uncle Hui   已过去:4 月,3 周   阅读总量:286 已被赞:0


导航栏(navbar)

支持的内容

Navbar导航栏内置支持少量子组件。根据需要从以下选择:

  1. .navbar-brand 为您的公司,产品或项目名称。
  2. .navbar-nav 提供完整的高和轻便的导航(包括对下拉菜单的支持)。
  3. .navbar-toggler 用於我們的折疊插件和其他 navigation toggling 行為。
  4. .form-inline 用于任何表单控件和操作。
  5. .navbar-text 用于添加垂直居中的文本字符串。
  6. .collapse.navbar-collapse用于通过父断点进行分组和隐藏导航列内容。

品牌

.navbar-brand 可以用于大多数元素,但对于链接最有效,因为某些元素可能需要通用样式类别class或自定义样式。

<nav class="navbar navbar-light bg-light">

<a href="#" class="navbar-brand">

<!-- <img src="images/logo.png" alt="" width="30" height="30" class="d-inline-block align-top"> -->#清掉上边距,内容上移

网战天下

</a>

<!-- <span class="navbar-brand h1 mb-0">网战天下</span> -->

</nav>

nav导航

1. 导航栏链接建立在我们的.nav上,享有使用专属的class样式,并可以使用toggler切换触发器来进行响应式切换,在导航栏中的元件,也装饰占用更多的水平空间,以保持导览列内容安全对齐。

2. 活动状态指示:用 .active表示当前页面,可直接应用于.nav-link .nav-item上。

3. When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

4. 右侧有一个LOGO(主标题),左边是MENU切换按钮:

<nav class="navbar navbar-expand-sm navbar-light bg-light">

<a href="#" class="navbar-brand">网战天下</a>

<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item">

<a href="#" class="nav-link active">首页</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link">产品</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link">最新资讯</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link disabled">公司简介</a>

</li>

</ul>

</div>

</nav>

如果你喜欢(或有需要),也可以不使用ul、ol式的列(直接用A其它元素作为列表子项)。

<div class="collapse navbar-collapse" id="navbarNav">

<div class="navbar-nav">

<a href="#" class="nav-item nav-link active">首页</a>

<a href="#" class="nav-item nav-link">产品</a>

<a href="#" class="nav-item nav-link">最新资讯</a>

<a href="#" class="nav-item nav-link disabled">公司简介</a>

</div>

</div>

下拉列表

您还可以在导航栏中使用下拉列表,下拉菜单最好使用一个菜单进行位置定位包裹,请确保使用单独的元素嵌套.nav-item  .nav-link,如下所示。

<li class="nav-item dropdown">

<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">下拉菜单</a>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">aaa</a>

<a href="#" class="dropdown-item">bbb</a>

<a href="#" class="dropdown-item">ccc</a>

</div>

</li>

Form表单

在导航栏中使用 .form-inline放置各种表单控制元件和组件。

<nav class="navbar navbar-expand-md navbar-light bg-light">

<a href="#" class="navbar-brand">网战天下</a>

<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav"> #(方式一)添加justify-content-between 两端对齐,表单会去右边对齐

<ul class="navbar-nav mr-auto"> #(方式二)或者这里添加mr-auto也可实现表单右对齐

<li class="nav-item">

<a href="#" class="nav-link active">首页</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link">产品</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link">最新资讯</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link disabled">公司简介</a>

</li>

</ul>

<form action="" class="form-inline my-2 my-md-0">#(方式三)添加ml-auto也可以实现靠右对齐

<input type="text" class="form-control mr-sm-2" placeholder="请输入关键字">

<button class="btn btn-outline-success my-2 my-md-0">搜索</button>

</form>

</div>

</nav>

Text文本处理

可以使用.navbar-text选择器来包裹文字-这已经对文本字符串的垂直对齐、水平间距作了处理优化。

<span class="navbar-text">文本内容</span>#放ul里 与li同级

Color颜色选择器(配色方案)

基于主题类class和background-color通用样式class定义,导航栏的配色方案和主题选择从未如此简单!你可以选择.navbar-light 来定义导航颜色反转(强黑白对比),也可以使用.navbar-dark用于深色背景定义,然后再引用.bg-*类通用定义来进行大小处理。

<nav class="navbar navbar-dark bg-dark">

<!-- Navbar content -->

</nav>

 

<nav class="navbar navbar-dark bg-primary">

<!-- Navbar content -->

</nav>

 

<nav class="navbar navbar-light" style="background-color: #e3f2fd;"> #自定义导航栏颜色

<!-- Navbar content -->

</nav>

.Container主内容-容器

你可以把导航条包裹在一个 .container容器中,从而使之在网页中呈现居中效果(或在导航栏内部居中)--虽然这不是强制的。

导航内容与主页面内容对齐显示。

定位

使用系统提供的position位置间距定位通用样式可以使导航栏呈现出随浏览器滚动的效果(非固定位置),可选的流动可以包括固定在顶部、固定在底部、或粘到顶部(与页面滚动,直到顶部并停留到那里)。固定导航栏可以使用position: fixed属性,这意味着它们从DOM的正常流动和拉动可能需要自定义的CSS(如在 <body>上定义padding-top),以防止其重叠覆盖了其它元素。

注意:在.sticky-top 使用 position: sticky, 目前不支持所有常用浏览器。

固定在顶部.fixed-top会挡住部部分内容,应查看导航栏高度,给body加个padding-top

固定在底部.fixed-bottom

会挡住部部分内容,应查看导航栏高度,给body加个padding-bottom

呈现粘性(随屏滚动)于浏览器窗口顶部.sticky-top (这个就不用加padding-top,不会挡住)

点赞

0




登陆后方可评论