• 1.bootstrap练习笔记-导航条


    bootstrap练习笔记

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

    结构大概是这样的:

    nav标签标识导航栏

    classnavbar 告诉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

    classcollapse navbar-collapse,并且用这个divul包裹起来

    完整代码如下:

    <!--导航栏-->
    <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>

    结果显示如下:

    大屏:

    小屏幕:

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

  • 相关阅读:
    5 输出的properties文件按照key进行排序
    JFinal 部署在 Tomcat 下推荐方法(转)
    15个必须知道的chrome开发者技巧(转)
    一次完整的浏览器请求流程(转)
    工作第一天
    Struts2的crud
    equal 和 ==
    生成Apk遇到的问题
    Http Framework
    Gradle: The New Android Build System
  • 原文地址:https://www.cnblogs.com/zhouqi666/p/6014708.html
Copyright © 2020-2023  润新知