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!
Integrating Bootstrap Styles in React: Methods and TechniquesApr 17, 2025 am 12:04 AMIntegrating Bootstrap in React projects can be done in two ways: 1) introduced using CDN, suitable for small projects or rapid prototyping; 2) installation using npm package manager, suitable for scenarios that require deep customization. With these methods, you can quickly build beautiful and responsive user interfaces in React.
Bootstrap in React: Advantages and Best PracticesApr 16, 2025 am 12:17 AMAdvantages of integrating Bootstrap into React projects include: 1) rapid development, 2) consistency and maintainability, and 3) responsive design. By directly introducing CSS files or using the React-Bootstrap library, you can use Bootstrap's components and styles efficiently in your React project.
Bootstrap: A Quick Guide to Web FrameworksApr 15, 2025 am 12:10 AMBootstrap is a framework developed by Twitter to help quickly build responsive, mobile-first websites and applications. 1. Ease of use and rich component libraries make development faster. 2. The huge community provides support and solutions. 3. Introduce and use class names to control styles through CDN, such as creating responsive grids. 4. Customizable styles and extension components. 5. Advantages include rapid development and responsive design, while disadvantages are style consistency and learning curve.
Breaking Down Bootstrap: What It Is and Why It MattersApr 14, 2025 am 12:05 AMBootstrapisafree,open-sourceCSSframeworkthatsimplifiesresponsiveandmobile-firstwebsitedevelopment.Itofferspre-styledcomponentsandagridsystem,streamliningthecreationofaestheticallypleasingandfunctionalwebdesigns.
Bootstrap: Making Web Design EasierApr 13, 2025 am 12:10 AMWhat makes web design easier is Bootstrap? Its preset components, responsive design and rich community support. 1) Preset component libraries and styles allow developers to avoid writing complex CSS code; 2) Built-in grid system simplifies the creation of responsive layouts; 3) Community support provides rich resources and solutions.
Bootstrap's Impact: Accelerating Web DevelopmentApr 12, 2025 am 12:05 AMBootstrap accelerates web development, and by providing predefined styles and components, developers can quickly build responsive websites. 1) It shortens development time, such as completing the basic layout within a few days in the project. 2) Through Sass variables and mixins, Bootstrap allows custom styles to meet specific needs. 3) Using the CDN version can optimize performance and improve loading speed.
Understanding Bootstrap: Core Concepts and FeaturesApr 11, 2025 am 12:01 AMBootstrap is an open source front-end framework, and its main function is to help developers quickly build responsive websites. 1) It provides predefined CSS classes and JavaScript plug-ins to facilitate the implementation of complex UI effects. 2) The working principle of Bootstrap relies on its CSS and JavaScript components to realize responsive design through media queries. 3) Examples of usage include basic usage, such as creating buttons, and advanced usage, such as custom styles. 4) Common errors include misspelling of class names and incorrectly introducing files. It is recommended to use browser developer tools to debug. 5) Performance optimization can be achieved through custom build tools, best practices include predefined using semantic HTML and Bootstrap
Bootstrap Deep Dive: Responsive Design & Advanced Layout TechniquesApr 10, 2025 am 09:35 AMBootstrap implements responsive design through grid systems and media queries, making the website adapted to different devices. 1. Use a predefined class (such as col-sm-6) to define the column width. 2. The grid system is based on 12 columns, and it is necessary to note that the sum does not exceed 12. 3. Use breakpoints (such as sm, md, lg) to define the layout under different screen sizes.
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
AI Hentai Generator
Generate AI Hentai for free.
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.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SublimeText3 Chinese version
Chinese version, very easy to use
SublimeText3 Linux new version
SublimeText3 Linux latest version
Zend Studio 13.0.1
Powerful PHP integrated development environment
