Bootstrap中如何添加导航工具条

本篇内容主要讲解“Bootstrap中如何添加导航工具条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Bootstrap中如何添加导航工具条”吧!Bootstrap导航工具条（Navbar）与上一节学习的导航比，功能强大，且是响应式的，结构包括包括品牌、导航、表单等，以及针对折叠插件的支持。在开始使用导航条之前，您需要了解以下内容：导航条需要使用.navbar包装，并透过.navbar-expand{-sm|-md|-lg|-xl}给予响应式的折叠以及使用color scheme class。导航条预设的内容宽度是浮动的，更改containers以不同的方式来限制水平宽度。使用间距及弹性盒子通用类来控制物件免费云主机、域名在导航条的间隔及对齐。导航条默认是响应式的，但也可以轻易的修改这个选项。使用nav元素确保亲和性，也可使用更通用的元素，如div。通过设置aria-current=“page”于当前页面，或将aria-current=“true”设置于群组中的当前项目来指示目前位置。导航条内置对一些对子元件的支持。根据需求可从以下选项中进行选择：navbar-brand 用于您的公司，产品或项目名称。navbar-nav 提供高度完整和轻便的导航（包括对下拉清单的支持）。navbar-toggler 用于我们的折叠插件和其他navigation toggling行为。间距及弹性盒子通用类 用于表单控制与行为。navbar-text 用于垂直居中的文本字串。.collapse.navbar-collapse 透过父层断点来群组、隐藏导航条内容。添加可选的.navbar-scroll以设置最大高度并滚动扩展的navbar内容。以下是一个包含子元件的示例，包括在一个自动在 md 断点处摺叠的响应式导航条。在断点前后显示的导航如图点击右侧三道横线显示下图，在此点击恢复经过上面的例子，如果你要手写代码实现，是要花很多功夫的，现在简单复制粘贴就好了。
下面我们详细介绍一下各部分元件的功能及使用方法。里面可以放置文字、图像、图像和文字组合，上面的例子我们放的是logo图像。文字图像在上面的示例中已经用了，现在来个图像和文字混合的导航的连接建立在我们之前学习过的.nav上，并且需要使用toggler classes以建立适当的响应样式。在导航条中的导航元件会尽可能的占用水平空间，以保持您的导航条内容安全对齐。启用状态-用.active -表示当前页面。可直接用于.nav-link或直属的.nav-item。请注意，您应该在.nav-link本身上添加aria-current属性。不使用列表的简洁方法。二者效果一样您还可以在导航条的导航元件使用下拉菜单。下拉菜单需要一个包装元素进行定位，请确保为.nav-item和.nav-link使用单独及嵌套的元素，如下所示。你可以将各种表单和元件放在导航条中，如13.2.1 中的搜索表单，navbar中的直接子元素使用flex排版，预设为justify-content: space-between，也就是两端对齐。根据需要使用其他单星盒子类来调整此行为。input群组也可以这样使用。如果导航条整个都是表单，或者大部分是表单，则可以使用form元素作为容器并保存HTML。表单导航条也支持各种按钮。这也大大的提醒了我们可以使用垂直对齐工具来对齐不同大小的元素。

相关推荐: Restful框架有哪些优点

这篇文章主要讲解了“Restful框架有哪些优点”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Restful框架有哪些优点”吧！拥有jfinal/activejdbc一样的activerecord的简洁设计，使…