Bootstrap 导航栏栏

摘要: 导航栏栏是一个非常好的作用,是 Bootstrap 网站的一个突显特性。导航栏栏在您的运用或网站内做为导航栏页头的响应式基本部件。导航栏栏在移动终端的主视图中是折叠的,伴随着能...

导航栏栏是一个非常好的作用,是 Bootstrap 网站的一个突显特性。导航栏栏在您的运用或网站内做为导航栏页头的响应式基本部件。导航栏栏在移动终端的主视图中是折叠的,伴随着能用视口总宽的提升,导航栏栏也会水准进行。在 Bootstrap 导航栏栏的关键中,导航栏栏包含了站训话称和基本的导航栏界定款式。


向 nav 标识加上 class .navbar、.navbar_default。 往上面的原素加上 role="navigation",有利于于提升可浏览性。 向 div 原素加上一个题目 class .navbar_header,內部包括了含有 class navbar_brand 的 a 原素。这会让文字看上去更大一号。 以便指导航栏加上连接,只必须简易地加上含有 class .nav、.navbar_nav 的混乱目录就可以。

下边的案例演试了这一点:

nav > 试着一下 »

結果以下所显示:

响应式的导航栏栏

以便给导航栏栏加上响应式特点,您要折叠的內容务必包囊在含有 class .collapse、.navbar_collapse 的 div 中。折叠起來的导航栏栏具体上是一个含有 class .navbar_toggle 及2个 data_ 原素的按键。第一个是 data_toggle,用以告知 JavaScript 必须对按键干什么,第二个是 data_target,标示要转换到哪个原素。三个含有 class .icon_bar 的 span 建立说白了的汉堡包按键。这种会转换为 .nav_collapse div 中的原素。以便完成之上这种作用,您务必包括 Bootstrap 折叠(Collapse)软件。

下边的案例演试了这一点:

nav > 试着一下 »

結果以下所显示:

响应式的导航栏
导航栏栏中的文字

假如必须在导航栏中包括文字标识符串,请应用 class .navbar_text。这一般与 p 标识一起应用,保证适度的前导和色调。下边的案例演试了这一点:

nav > 试着一下 »

結果以下所显示:

导航栏中的文本
部件两端对齐方法

您可使用好用专用工具 class .navbar_left 或 .navbar_right 向左或向右两端对齐导航栏栏中的 导航栏连接、表格、按键或文字 这种部件。这2个 class 都是在特定的方位上加上 CSS 波动。下边的案例演试了这一点:

nav >








联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503