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.
[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('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="/static/imghwm/default1.png" data-src="{{ url_for('static', filename='base/images/logo.png') }}" class="lazy" style="max-width:90%" alt="A brief discussion on the navbar navigation bar in bootstrap" > STEM教育
</a>
</div>
</div>
</nav>
</body>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('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="/static/imghwm/default1.png" data-src="{{ url_for('static', filename='base/images/logo.png') }}" class="lazy" style="max-width:90%" alt="A brief discussion on the navbar navigation bar in bootstrap" > STEM教育
</a>
</div>
</div>
</nav>
</body>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('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="/static/imghwm/default1.png" data-src="{{ url_for('static', filename='base/images/logo.png') }}" class="lazy" style="max-width:90%" alt="A brief discussion on the navbar navigation bar in bootstrap" > STEM教育
</a>
</div>
</div>
</nav>
</body>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>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>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>
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>
运行效果是：
非常难看，鼠标放上去的时候，字体下面还会出现一根横线。如果将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>运行效果如下：
想要将搜索放在文本框后面，只需要将入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后，就会变成如下的样子：
是不是很难看？
更多编程相关知识，请访问：编程视频！！
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!
Understanding the Bootstrap Grid System for Responsive Web DesignMay 14, 2025 am 12:07 AMBootstrap'sgridsystemiseffectiveduetoits12-columnlayoutandresponsiveclasses,allowingforflexibleandmaintainabledesigns.Toleverageit:1)Userowsandcolumnswithclasseslikecol-md,col-sm,andcol-lgfordifferentscreensizes.2)Simplifylayoutsbyavoidingexcessivene
Bootstrap Grid System: A Comprehensive Guide to Responsive LayoutsMay 13, 2025 pm 04:17 PMBootstrapGridSystemisessentialforcreatingresponsivelayouts.1)Itusescontainers,rows,andcolumnsbasedona12-columnlayout.2)CSSflexboxandmediaqueriesensureflexibilityacrossscreensizes.3)Classeslikecol-xs,col-sm,col-md,andcol-lgcontrollayoutchanges.4)Avoid
Bootstrap: Applications and Advantages ExplainedMay 10, 2025 am 12:18 AMBootstrap is a front-end framework for quickly building responsive websites. Its advantages include: 1. Rapid development: leverage predefined styles and components. 2. Consistency: Provide a unified design style. 3. Responsive design: The built-in grid system is adapted to various devices. Bootstrap simplifies the web development process through CSS classes and JavaScript plug-ins.
Bootstrap: Simplifying Responsive Web DevelopmentMay 09, 2025 am 12:13 AMBootstrap simplifies the development process mainly through its raster system, predefined components and JavaScript plug-ins. 1. The grid system allows for flexible layout, 2. Predefined components such as buttons and navigation bars simplify style design, 3. JavaScript plug-in enhances interactive functions and improves development efficiency.
Bootstrap: The Key to Responsive Web DesignMay 08, 2025 am 12:24 AMBootstrap is an open source front-end framework developed by Twitter, providing rich CSS and JavaScript components, simplifying the construction of responsive websites. 1) Its grid system is based on a 12-column layout, and the display of elements under different screen sizes is controlled through class names. 2) The component library includes buttons, navigation bars, etc., which are easy to customize and use. 3) The working principle depends on CSS and JavaScript files, and you need to pay attention to handling dependencies and style conflicts. 4) The usage examples show basic and advanced usage, emphasizing the importance of custom functionality. 5) Common errors include grid system calculation errors and style coverage, which require debugging using developer tools. 6) Performance optimization recommendations only introduce necessary components and customize samples using preprocessors
Bootstrap: A Powerful Framework for Web DesignMay 07, 2025 am 12:05 AMBootstrap is an open source front-end framework developed by the Twitter team to simplify and speed up the web development process. 1.Bootstrap is based on HTML, CSS and JavaScript, and provides a wealth of components and tools for creating modern user interfaces. 2. Its core lies in responsive design, implementing various layouts and styles through predefined classes and components. 3.Bootstrap provides predefined UI components, such as navigation bars, buttons, forms, etc., which are easy to use and adjust. 4. Examples of usage include creating a simple navigation bar and advanced collapsible sidebar. 5. Common errors include version conflicts, CSS overwrites and JavaScript errors, which can be used through the version management tool.
The Power of Bootstrap in React: A Detailed LookMay 06, 2025 am 12:06 AMBootstrap can be integrated in React in two ways: 1) CSS and JavaScript files using Bootstrap; 2) Use the React-Bootstrap library. React-Bootstrap provides encapsulated React components, making using Bootstrap in React more natural and efficient.
Using Bootstrap Components in React: A Step-by-Step TutorialMay 05, 2025 am 12:09 AMThere are two ways to use Bootstrap components in React projects: 1) CSS and JavaScript of the original Bootstrap; 2) Use libraries designed specifically for React such as react-bootstrap or reactstrap. 1) Install Bootstrap through npm and introduce its CSS file in the entry file, and then use the Bootstrap class name in the React component. 2) After installing react-bootstrap or reactstrap, directly use the React components it provides. Use these methods to quickly build a responsive UI, but pay attention to style loading and JavaScript
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 Chinese version
Chinese version, very easy to use
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Zend Studio 13.0.1
Powerful PHP integrated development environment
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
