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>

结果显示如下:

大屏:

小屏幕:

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

1.bootstrap练习笔记-导航条的更多相关文章

  1. Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

    Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...

  2. Bootstrap系列 -- 39. 导航条添加标题

    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...

  3. bootstrap 组件之"导航条"

    一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...

  4. Bootstrap如何实现导航条?导航条实例详解

    本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...

  5. Bootstrap系列 -- 40. 导航条二级菜单

    在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> < ...

  6. bootstrap 响应式导航条模板(含下拉菜单,弹出框)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Bootstrap 手风琴搭配导航条实现常用菜单栏

    效果 HTML代码 <div class="sidebar"> <div class="mc-search"> <div clas ...

  8. Bootstrap 反色导航条

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  9. bootstrap学习笔记之导航条基础

    导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...

随机推荐

  1. 【Python大系】Python快速教程

    感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容很多,加上各种标准库.拓展库, ...

  2. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  3. link与@import的区别

    我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: <link rel="st ...

  4. javascript随笔20160808

    var jsondata=$.parseJSON(@ViewBag.x); //转换为Json数据 var fruits = ["Banana", "Orange&quo ...

  5. angularjs+微信,解决chooseImage不能预览的问题

    在wx.chooseImage的success回调中直接进行数据绑定,却在ng-repeat时发现ng-src不加载微信localId的问题,类似wxLocalResource://imageid98 ...

  6. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十二)水情雨情模块

    config.xml文件的配置如下: <widget label="水情" icon="assets/images/water.png" config=& ...

  7. 将oracle冷备份恢复到另外一个数据库实例中

    因更换服务器需要将Oracle数据库转移到另外台Oracle中.说明: 1.测试环境为:windows server2003 和 oracle 10g. 2.2台服务器安装的程序目录一样,数据目录不一 ...

  8. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q124-Q127)

    Question  124 You are designing a SharePoint 2010 application. You need to design a single feature t ...

  9. GCD封装的个人理解和应用

    GCD封装的个人理解和应用 特点 >>将GCD封装,使我们从繁琐的方法记忆中解脱出来,能够直接快速的应用. 使用方法 1.将工程中的GCD文件中的9个文件拖入自己的工程中(你自己最好建一个 ...

  10. AndRodi Strudio中的按钮时件

    AndRodi Studio中的按钮时件注册一定要写在onCraete中 @Override protected void onCreate(Bundle savedInstanceState) { ...