bootstrap之navbar

最新推荐文章于 2024-06-18 17:56:18 发布

cat_moon

最新推荐文章于 2024-06-18 17:56:18 发布

阅读量844

点赞数

文章标签： css html web

原文链接：https://www.cnblogs.com/jipinglong/p/9032640.html

版权

.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默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

例子：

<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

代码执行时，样式是这样的：
在这里插入图片描述
我们发现图标和字体是错位了。我们只需要在加入：display: inline;就可以了，加入后的代码如下：

<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;display:inline;">&nbsp;STEM教育
            </a>
        </div>
    </div>
</nav>
</body>~

代码执行后，样式如下图，已经成为我们想要的样子了：
在这里插入图片描述
也可以这样写：

<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
<style>
    .navbar-brand>img {
        display: inline;
    }
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;STEM教育
            </a>
        </div>
    </div>
</nav>
</body>~

效果是一样的：
在这里插入图片描述
解释：
display:inline 的作用是设置对象做为行内元素显示，也就是它能够将垂直排列变成横向排列。
.collapse——设置div元素为视口大于768px时显示；
.navbar-collapse——设置div元素为导航条组件各列表项的父元素；
这里说的有点不清楚，我解释一下，collapse的作用是为了当浏览器的窗口宽度小于768px的时候，将设置为collapse样式的div元素内的所有其它元素都折叠起来，以一个列表的形式显示。
例子：
.navbar-nav——设置ul为导航条组件内的列表元素;
.navbar-left——设置导航条内元素向左对齐；
.navbar-right——设置导航条内元素向右对齐；
当出现navbar-right时：~ 在这里插入图片描述
.navbar-nav——设置ul为导航条组件内的列表元素;
.navbar-left——设置导航条内元素向左对齐；
.navbar-right——设置导航条内元素向右对齐；
当出现navbar-right时：

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
        </li>
    </ul>
</div>~

运行结果如下：
在这里插入图片描述
可以看出form和ul不在同一行，这是因为ul使用navbar-right指定靠右显示，而form并未指定靠左还是靠右。应该将form指定靠左显示，即设置样式为navbar-left：

<div class="navbar-collapse collapse">
    <form class="navbar-form navbar-left">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
        </li>
    </ul>
</div>

执行解决为：
在这里插入图片描述
在ul标签中使用了navbar-nav的样式，如果没有使用的话：

<ul class="nav  navbar-right">
    <li>
        <a ><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
    </li>
    <li>
        <a ><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
    </li>
</ul>

在这里插入图片描述
会导致两个li标签在不同的行，加上navbar-nav后，可以使两个li标签在同一行显示。
.navbar-form——为导航条组件内部的表单组件；
.navbar-form：主要调整所有form都为行内元素
.navbar-btn——为导航条组件内部的按钮样式；
.navbar-text——为导航条组件内部的文本样式；
.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；
.breadcrumb——设置列表元素显示为路径导航组件；
form-goup和input-goup参考：https://blog.csdn.net/qq_15267341/article/details/54016811写的很好哦。

<span class="glyphicon glyphicon-search"></span> //通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：

在这里插入图片描述
input-group-btn的作用：
例子:

<form class="navbar-form">
    <div class="form-group input-group">
        <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
        <span><a class="btn btn-default"><span
                class="glyphicon glyphicon-search"></span>搜索</a></span>
    </div>
</form>

在这里插入图片描述
想要将搜索放在文本框后面，只需要将入input-group-btn样式就可以了：

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
</div>

运行结果如下：
在这里插入图片描述
如果将input-group-btn换成input-group-addon后，就会变成如下的样子：

是不是很难看？

cat_moon

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap之navbar

.navbar——设置nav元素为导航条组件；.navbar-default——指定导航条组件为默认主题；.navbar-inverse——指定导航条组件为黑色主题；.navbar-fixed-top——设置导航条组件固定在顶部；.navbar-fixed-bottom——设置导航条组件固定在底部；.container-fluid——设置宽度充满父元素，即为100%；.navbar-h...
复制链接

扫一扫