Detailed explanation of navigation bar implementation examples in Bootstrap

This article mainly shares with you detailed examples of Bootstrap implementation of navigation. When building a website, different pages have many elements that are the same, such as navigation bars, sidebars, etc. We can use template inheritance to avoid repeated writing. html code. Now we plan to implement a navigation bar at the top of the web page and inherit this navigation bar in all pages. To create the navigation bar, we directly use the following navigation bar style provided by Bootstrap.

Related recommendations: "Bootstrap Tutorial"

But I am using Bootstrap Before setting the navigation bar style, you need to reference the css and js files required by Bootstrap as well as jQuery. We are ## in html Insert the following code into #header to complete the reference:

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

Here are references to the

css and js files on the Internet through links instead of downloading them Come down and quote from local. After that, we copy all the html code in the above picture to the body of html, and the browser will display the same navigation bar as in the picture. Let’s make some simple modifications and optimizations. Finally, our navigation bar will look like this:

The specific modification point is that I changed the original Brand was replaced with a picture as the logo, the first drop-down control Dropdown was deleted, an option was added to the rightmost drop-down control, and the text was replaced with what we wanted. Then I created a

base.css file to adjust the image size, control position, background color, etc. This part is basic html/css knowledge, so I won’t go into details. All subsequent web pages will use this navigation bar. We will name the html containing the navigation bar base.html, and add the following code below the navigation bar code in its body :

{% block body_part %}
{% endblock %}

Then create a new

home.html and enter the following content:

{% extends 'base.html' %}
{% block body_part %}
<p>This is body content under nav-bar</p>
{% endblock %}

Render

home.html and visit, we can see this The result:

##So it is not difficult for us to understand that in

home.html

, {% extends 'base .html' %} represents the code block inherited from base.html, home.html in the block and endblock intervals It will be automatically replaced with the block area of ​​base.html also named body_part. You can use multiple block, for example, you can also use it in <title>, so that different pages can have different titles. Finalbase.html
The code is as follows: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;     &lt;script src=&quot;https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;     &lt;script src=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js&quot; integrity=&quot;sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;     &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&amp;#39;static&amp;#39;,filename=&amp;#39;css/base.css&amp;#39;) }}&quot;/&gt;     &lt;link rel=&quot;shortcut icon&quot; href=&quot;{{ url_for(&amp;#39;static&amp;#39;, filename=&amp;#39;images/favicon.ico&amp;#39;) }}&quot;&gt;     &lt;title&gt;{% block page_name %}{% endblock %}-HarpQA&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;nav class=&quot;navbar navbar-default&quot;&gt;     &lt;p class=&quot;container&quot;&gt;         &lt;!-- Brand and toggle get grouped for better mobile display --&gt;         &lt;p class=&quot;navbar-header&quot;&gt;           &lt;button type=&quot;button&quot; class=&quot;navbar-toggle collapsed&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot; aria-expanded=&quot;false&quot;&gt;             &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;             &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;             &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;             &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;           &lt;/button&gt;           &lt;a class=&quot;navbar-brand&quot;&gt;               &lt;img class=&quot;logo&quot; src=&quot;{{ url_for(&amp;#39;static&amp;#39;,filename=&amp;#39;images/logo.png&amp;#39;) }}&quot;&gt;           &lt;/a&gt;         &lt;/p&gt;         &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;         &lt;p class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;           &lt;ul class=&quot;nav navbar-nav&quot;&gt;             &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;首页 &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;发布问答&lt;/a&gt;&lt;/li&gt;           &lt;/ul&gt;           &lt;form class=&quot;navbar-form navbar-left&quot;&gt;             &lt;p class=&quot;form-group&quot;&gt;               &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Key Words&quot;&gt;             &lt;/p&gt;             &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;搜索&lt;/button&gt;           &lt;/form&gt;           &lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt;             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;登录&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;注册&lt;/a&gt;&lt;/li&gt;              &lt;li class=&quot;dropdown&quot;&gt;               &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;友情链接&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&lt;/a&gt;               &lt;ul class=&quot;dropdown-menu&quot;&gt;                 &lt;li&gt;&lt;a href=&quot;mailto:liutao25@baidu.com&quot;&gt;联系我&lt;/a&gt;&lt;/li&gt;                 &lt;li&gt;&lt;a href=&quot;http://flask.pocoo.org&quot; target=&quot;_blank&quot;&gt;Flask官网&lt;/a&gt;&lt;/li&gt;                 &lt;li&gt;&lt;a href=&quot;https://www.python.org/&quot;&gt;Python官网&lt;/a&gt;&lt;/li&gt;                 &lt;li role=&quot;separator&quot; class=&quot;pider&quot;&gt;&lt;/li&gt;                 &lt;li&gt;&lt;a href=&quot;https://www.baidu.com&quot; target=&quot;_blank&quot;&gt;百度搜索&lt;/a&gt;&lt;/li&gt;                 &lt;li role=&quot;separator&quot; class=&quot;pider&quot;&gt;&lt;/li&gt;                 &lt;li&gt;&lt;a href=&quot;https://www.google.com.hk&quot; target=&quot;_blank&quot;&gt;Google Search&lt;/a&gt;&lt;/li&gt;               &lt;/ul&gt;             &lt;/li&gt;           &lt;/ul&gt;         &lt;/p&gt;&lt;!-- /.navbar-collapse --&gt;       &lt;/p&gt;&lt;!-- /.container-fluid --&gt; &lt;/nav&gt; {% block body_part %} {% endblock %} &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">Copy after login</div></div>Please note the references to

base.css

and logo images, we also use url_for function, the first parameter is static, which represents the static folder under the project folder, and the second parameter is staticThe folder is the relative path of the benchmark static file. We put js files/css files/image files, etc. under this folder, so this usage will be used frequently in the future. When we bookmark a web page, the web page has a small icon. We can also use this line of html code in header to achieve this: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;link rel=&quot;shortcut icon&quot; href=&quot;{{ url_for(&amp;#39;static&amp;#39;, filename=&amp;#39;images/favicon.ico&amp;#39;) }}&quot;&gt;</pre><div class="contentsignin">Copy after login</div></div>Put

favicon.ico

The file can be placed in the static/images folder. We used the Flask icon, and the effect is as follows:

##base.css

The code is as follows:

body{
    background: #F3F3F3;
}

.navbar-brand{
    padding: 0 5px;
    padding-right: 10px;
}

.logo{
    height: 50px;
}

Related recommendations:

How to implement the fixed positioning effect of jQuery navigation bar

htmlNavigation bar production graphic code sharing

How does JavaScript achieve the effect of highlighting the current menu of the navigation bar after selecting it?

The above is the detailed content of Detailed explanation of navigation bar implementation examples in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!