A brief discussion on the navbar navigation bar in bootstrap-Bootstrap Tutorial-php.cn

This article will take you through the navbar navigation bar in bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion on the navbar navigation bar in bootstrap

[Related recommendation: "bootstrap tutorial"]

container: fixed 960px width, (if responsive style is introduced , it will be adjusted appropriately, for example, 1600*900, it will display 1200px)

container-fluid: adaptive screen width, that is, full screen display.

You can refer to row and col: https://blog.csdn.net/yzy85/article/details/53021385?locationNum=2&fps=1 and http://v3.bootcss.com/css/

Especially http://v3.bootcss.com/css/ explains it very clearly

For example:

Use a single group .col-md- * Grid class, you can create a basic grid system, which is initially stacked on mobile phones and tablet devices (from ultra-small screens to small screens), and on desktop (medium) screen devices Change to horizontal arrangement. All "columns" must be placed within " .row.

.navbar——Set the nav element as the navigation bar component;

.navbar-default——Specify the navigation bar component as the default theme;

.navbar-inverse——Specify the navigation bar component as a black theme;

.navbar-fixed-top——Set the navigation bar component to be fixed at the top;

.navbar-fixed- bottom - Set the navigation bar component to be fixed at the bottom;

.container-fluid - Set the width to fill the parent element, which is 100%;

.navbar-header - Mainly specify the p element Wrap the brand icon and toggle button for the navigation bar component;

.navbar-toggle——Set the button element as the toggle button of the navigation bar component;

.collapsed——Set the button element as the visible It will only be displayed if the size is smaller than 768px;

.navbar-brand——Set the brand icon in the navigation bar component;

navbar-brand defaults to text, and you can also put pictures, but it must be It is a small picture. If the picture is too big, the position will be lower.

Example:

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</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(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}" style="height:30px;"> STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

Copy after login

When the code is executed, the style is like this:

We found that the icons and fonts were misaligned. We only need to add: display: inline;. The added code is as follows:

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</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(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}" style="height:30px;display:inline;"> STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

Copy after login

After the code is executed, the style is as shown below, and it has become what we want:

You can also write like this:

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
<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(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}" style="height:30px;"> STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

Copy after login

The effect is the same:

Explanation:

The function of display:inline is to set the object to be displayed as an inline element, that is, it can change the vertical arrangement into a horizontal arrangement.

.collapse——Set the p element to be displayed when the viewport is larger than 768px;

.navbar-collapse——Set the p element to be the parent element of each list item of the navigation bar component;

What is said here is a bit unclear. Let me explain. The function of collapse is to collapse all other elements within the p element set to collapse style into a list when the browser window width is less than 768px. displayed in the form.

Example:

You can see that at the current size, it has not been folded. When it is reduced again, it will be folded:

.navbar-nav——Set ul as the list element in the navigation bar component;

.navbar-left——Set the element in the navigation bar Align to the left;

.navbar-right——Set the elements in the navigation bar to align to the right;

When navbar-right appears:

<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> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

Copy after login

The running results are as follows:

It can be seen that form and ul are not on the same line. This is because ul uses navbar-right to specify whether to display on the right, while form does not specify whether to display on the left or on the right. . The form should be specified to be displayed on the left, that is, set the style to 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> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

Copy after login

The execution solution is:

The navbar-nav style is used in the ul tag. If it is not used If:

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

Copy after login

will cause the two li tags to be on different lines. After adding navbar-nav, the two li tags can be displayed on the same line.

.navbar-form——For the form component inside the navigation bar component;

navbar-form: Mainly adjust all forms to be inline elements

.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>通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：

.btn 是按钮的基础，主要是调整盒模型的，.btn-default 以及其他 .btn-* 系列则是视觉样式的调整，如颜色、大小等等。

例子：

<a ><span class="glyphicon glyphicon-search"></span>搜索</a>

Copy after login

运行效果是：

非常难看，鼠标放上去的时候，字体下面还会出现一根横线。如果将a元素的样式设置成btn btn-default时，就好看多了，代码如下：

鼠标放上去的时候，也没有横线的，只是由白色编程灰色了：

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>

Copy after login

运行效果如下：

想要将搜索放在文本框后面，只需要将入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>

Copy after login

运行结果如下：

如果将input-group-btn换成input-group-addon后，就会变成如下的样子：

是不是很难看？

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of A brief discussion on the navbar navigation bar in bootstrap. For more information, please follow other related articles on the PHP Chinese website!