bootstrap-navbar

初学bootstrap，遇见了navbar以及他的几个兄弟朋友，做个笔记记录，啦啦啦.....

如果想了解更多的或者详细的可以去bootstrap的中文官https://v3.bootcss.com/css/

咳咳，正题，笔记开始

看网课视频的时候，网课老师在 <head> 之中添加 viewport 元数据标签。这个是为了确保适当的绘制和触屏缩放在移动设备浏览器上’通过为视口（viewport）设置 Meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

一些与navbar相关的东西：

container：类用于固定宽度并支持响应式布局的容器。

container-fluid:自适应屏幕宽度，即满屏显示。

行（row）与列（column）是bootstrap的栅格系统的主要部件。

navbar——设置nav元素为导航条组件；

navbar-default——指定导航条组件为默认主题；

navbar-inverse——指定导航条组件为黑色主题；

navbar-fixed-top——设置导航条组件固定在顶部；

navbar-fixed-bottom——设置导航条组件固定在底部；

container-fluid——设置宽度充满父元素，即为100%；

navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

navbar-toggle——设置button元素为导航条组件的切换钮；

collapsed——设置button元素为在视口小于768px时才显示；

navbar-brand——设置导航条组件内的品牌图标；

navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下

navbar-nav——设置ul为导航条组件内的列表元素;

navbar-left——设置导航条内元素向左对齐；

navbar-right——设置导航条内元素向右对齐；

navbar-form——为导航条组件内部的表单组件；

navbar-form：主要调整所有form都为行内元素

navbar-btn——为导航条组件内部的按钮样式；

navbar-text——为导航条组件内部的文本样式；

navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；

breadcrumb——设置列表元素显示为路径导航组件；

简单代码示例：

示例中的图片要自己找，container-header和container-second的样式要自己设置，不然会重叠。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <Meta charset="UTF-8">
    <title>bootstrap-navbar</title>
    <Meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="selfdefined.css">
</head>
<body>
<!--container相当于一个大容器-->
<!--类名是navbar，说明这是个导航条，如果不带，后面的内容会移上来-->
<!--这里选择了皮肤inverse和顶部固定样式fixed-top-->
<!--role="navigation"，有助于增加可访问性,navigation英语是航行的意思。而使用role属性是告诉辅助设备（如屏幕阅读器）
这个元素所扮演的角色，例如点击的按钮，就是role="button"；会让这个元素可点击-->
<div class="container-header">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <!--navbar-header一般在里面放品牌图标及切换按钮-->
        <div class="navbar-header">
            <!--navbar-brand一般放导航栏商标logo-->
            <a class="navbar-brand" href="#">假装我是标题</a>
        </div>
        <div>
            <!--navbar-text和navbar-btn可以理解为是一种格式，为了确保适当的前导和颜色的统一。-->
            <p class="navbar-text">假装冒个泡</p>
        </div>
        <div>
            <!--navbar-toggle,为了确保表单适当的垂直对齐和在较窄的视口中折叠的行为,collapse：折叠-->
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">iOS</a></li>
                <li><a href="#">Linux</a></li>
                <li><a href="#">Windows</a></li>
            </ul>
        </div>
    </nav>
</div>
<div class="container-second">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" style="width:250px;" href="#">
                <img src="picture/erweima.png" style="height:50px;">
            </a>
        </div>
        <div>
            <!--navbar-left设置导航条内元素向左对齐；-->
            <!--navbar-form主要调整所有form都为行内元素-->
            <form class="navbar-form navbar-left" role="search" >
                <div class="form-group">
                    <input type="text" class="form-control"  style="height:50px;" placeholder="Search">
                </div>
                <button type="submit" style="height:50px;" class="btn btn-default">搜索</button>
            </form>
            <button type="button" class="btn btn-default navbar-btn navbar-left" style="height: 50px">
                假装是个按钮
            </button>
        </div>
    </nav>
</div>
</body>
</html>

相关推荐