一系列Bootstrap导航条使用方法分享

前端之家收集整理的这篇文章主要介绍了一系列Bootstrap导航条使用方法分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文包含了Bootstrap导航条基础使用方法,供大家参考,具体内容如下

1、Bootstrap基础导航样式

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式

2、Bootstrap基础导航条

在制作一个基础导航条时,主要分以下几步:

第一步:首先在制作导航的列表(

3、Bootstrap导航条添加标题

在Web页面制作中,常常在菜单前面都会有一个标题文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现。

4、Bootstrap导航条二级菜单

在导航条中添加二级菜单也非常简单

5、Bootstrap带表单的导航条

有的导航条中会带有
搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动,更好实现对齐。在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐。

6、Bootstrap导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式: 1).导航条中的按钮navbar-btn

2).导航条中的文本navbar-text

3).导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <a href="##" class="navbar-brand">Bootstrap

 
<div class="nav navbar-nav">
<a href="##" class="navbar-text">Navbar Text
<a href="##" class="navbar-text">Navbar Text
<a href="##" class="navbar-text">Navbar Text

7、Bootstrap固定导航条

很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定在浏览器窗口顶部 .navbar-fixed-bottom:导航条固定在浏览器窗口底部

导航条

猜你在找的Bootstrap相关文章