加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-18 00:56:18 所属栏目:安全 来源:网络整理
导读:本文包含了Bootstrap导航条基础使用方法,供大家参考,具体内容如下 1、Bootstrap基础导航样式 Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之

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

1、Bootstrap基础导航样式

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

  • 2、Bootstrap基础导航条

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

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

      )基础上添加类名“navbar-nav”

      第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

      “.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置

    3、Bootstrap导航条添加标题

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

    4、Bootstrap导航条二级菜单

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

    5、Bootstrap带表单的导航条

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

      推荐文章
        热点阅读