| 标题 | 一系列Bootstrap导航条使用方法分享 |
| 内容 | 这篇文章主要为大家整理了一系列Bootstrap导航条使用方法，分享给大家，感兴趣的小伙伴们可以参考一下 本文包含了Bootstrap导航条基础使用方法，供大家参考，具体内容如下 1、Bootstrap基础导航样式 Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式 <ul> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> 2、Bootstrap基础导航条 在制作一个基础导航条时，主要分以下几步： 第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default” “.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置 <div role="navigation"> <ul> <li><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div> 3、Bootstrap导航条添加标题 在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现。 <div role="navigation"> <div> <a href="##">导航条</a> </div> <ul> <li><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div> 4、Bootstrap导航条二级菜单 在导航条中添加二级菜单也非常简单 <div role="navigation"> <div> <a href="##">导航条</a> </div> <ul> <li><a href="##">网站首页</a></li> <li> <a href="##" data-toggle="dropdown">系列教程<span></span></a> <ul> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li><a href="##">PHP</a></li> </ul> </li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div> 5、Bootstrap带表单的导航条 有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。 <div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <ul> <li><a href="##">网站首页</a></li> <li> <a href="##" data-toggle="dropdown">系列教程<span></span></a> <ul> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li><a href="##">PHP</a></li> </ul> </li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> <form action="##" rol="search"> <div> <input type="text" placeholder="请输入关键词" /> </div> <button type="submit">搜索</button> </form> </div> 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 role="navigation"> <div> <a href="##">Bootstrap</a> </div> <ul> <li><a href="##">Navbar Text</a></li> <li><a href="##">Navbar Text</a></li> <li><a href="##">Navbar Text</a></li> </ul> </div> <div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <div> <a href="##">Navbar Text</a> <a href="##">Navbar Text</a> <a href="##">Navbar Text</a> </div> </div> 7、Bootstrap固定导航条 很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式： .navbar-fixed-top：导航条固定在浏览器窗口顶部 .navbar-fixed-bottom：导航条固定在浏览器窗口底部 <div role="navigation"> … </div> <div>我是内容</div> <div role="navigation"> … </div> 8、Bootstrap分页导航 带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法。 <ul> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> 在Bootstrap框架中，也可以通过几个不同的情况来设置分页按钮大小。 1).通过“pagination-lg”让分页导航变大； 2).通过“pagination-sm”让分页导航变小 <ul> … </ul> <ul> … </ul> <ul> … </ul> Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。 在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类。 <ul> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul> 默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式 previous：让“上一步”按钮居左 next：让“下一步”按钮居右 <ul> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul> 以上就是关于Bootstrap 导航条的全部内容，希望对大家的学习有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。