1.bootstrap练习笔记-导航条

bootstrap练习笔记

1.关于导航栏   官网链接：http://v3.bootcss.com/components/#nav

结构大概是这样的：

nav标签标识导航栏

class为navbar 告诉BS这是一个导航条

navbar-default 标识引入默认的导航条样式

navbar-fixed-top 标识导航条在像下拉取页面的时候始终固定在顶端

Div.container标识导航栏要存放的内容

Div.navbar-header标识导航条的头部

Div.navbar-header>a.bavbar-brand标识链接品牌  一般在下面加一个img表示LOGO

ul.nav.navbar>li标识页面的导航条内容

Ul.navbar-right表示浮动在右边

ul.nav.navbar>li.active标识激活内容，也就是说在当前页添加背景

ul.nav.navbar>li>a标识导航连接

ul.nav.navbar>li>a>span.glyphicon glyphicon-XXX 表示引用官网提供的图标，用于放在链接前面

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="padding: 0;">
                <img src="img/logo.png" alt="网站LOGO">
            </a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li class="active">
                <a href="#">
                    <span class="glyphicon glyphicon-home"></span>
                     首页
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="glyphicon glyphicon-list"></span>
                    资讯
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="glyphicon glyphicon-file"></span>
                    案例
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="glyphicon glyphicon-question-sign"></span>
                    关于
                </a>
            </li>
        </ul>
    </div>
</nav>

得到的结果如下

大屏：

小屏幕：

如果想要在小屏幕下将列表收缩起来，就要如下做：

1首先在div.navbar-header下添加一个按钮

Button.navbar-toggle表示按钮用于导航条切换显示或者隐藏

data-toggle=’collapse’标识切换的类型是 collapse

data-target=’#navbar-collapse’标识作用于制定的id

button原始按钮不好看，所以可以在其中增加好看的图标

例如：span.icon-bar

2既然按钮要作用于目标，所以要在导航条的div设置一个与之对应的id

class为 collapse navbar-collapse,并且用这个div将ul包裹起来

完整代码如下：

<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="padding: 0;">
                <img src="img/logo.png" alt="网站LOGO">
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right" style="margin-top: 0">
                <li class="active">
                    <a href="#">
                        <span class="glyphicon glyphicon-home"></span>
                        首页
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-list"></span>
                        资讯
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-file"></span>
                        案例
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-question-sign"></span>
                        关于
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

结果显示如下:

大屏：

小屏幕：

点击右上方的按钮可以控制导航条的显示和隐藏