bootstrap——组件（六、导航条）

来源：互联网发布：软件开发供应商编辑：程序博客网时间：2024/04/28 02:07

1、导航条基本应用

1）创建nav添加.navbar和其他类.navbar-default2）nav里面包裹两个div，是.navbar-header和.navbar-collapse3）.navbar-header里面有button和a4）button是小屏时的菜单折叠触发器，需要添加.navbar-toggle和data-toggle="collapse"和data-target="#菜单ID"5）a是.navbar-brand6）.navbar-collapse里面可以放文本、连接、按钮、输入框、导航等由于当小屏的时候初始状态是折叠的，所以需要添加.collapse

<nav class="navbar navbar-default">    <div class="navbar-header">        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarcollapse">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>        </button>        <a href="#" class="navbar-brand">Brand</a>    </div>    <div class="navbar-collapse  collapse" id="navbarcollapse">        <button type="button" class="btn btn-default  navbar-btn">submit</button>        <a href="#" class="navbar-link">Mark Otto</a>    </div></nav>

2、Brand添加图片

<a href="#" class="navbar-brand">    <img alt=brand src=""></a>

3、表单

.navbar-form
form需要添加.navbar-form和.navbar-left.navbar-right
必须添加.navbar-left.navbar-right，否则后面的元素会被放置在下一行

<form class="navbar-form navbar-left" role="search">    <div class="form-group">        <input type="text" class="form-control" placeholder="Search">    </div>    <button type="submit" class="btn btn-default">Submit</button></form>

4、按钮

.navbar-btn

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

5、文本

.navbar-text

<p class="navbar-text">Signed in as Mark Otto</p>

6、链接

.navbar-link

<a href="#" class="navbar-link">Mark Otto</a>

7、导航

.navbar-nav

<ul class="nav navbar-nav">    <li><a href="#">item1</a></li>    <li><a href="#">item2</a></li>    <li><a href="#">item3</a></li></ul>

8、组件排列

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。

9、固定在顶部

添加 .navbar-fixed-top 类可以让导航条固定在顶部

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">  <div class="container">    ...  </div></nav>

10、固定在底部

添加 .navbar-fixed-bottom 类可以让导航条固定在底部

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">  <div class="container">    ...  </div></nav>

11、静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。

<nav class="navbar navbar-default navbar-static-top" role="navigation">  <div class="container">    ...  </div></nav>

0 0