Detailed explanation of how Bootstrap implements basic layout
Mar 20, 2017 pm 02:02 PM
I saw an article about building a Bootstrap site in 20 minutes. The content is a bit old. I reused Bootstrap3 to implement it and explained the content involved in as much detail as possible.
1. Create a basic page
We first create a basic HTML template page. This page can be created directly using sublime + emmet.
1.1 Create a new file, Ctrl + N
1.2 Save it to the page file, Ctrl + S, name it index.html
1.3 In this blank page, enter html:5, and then directly press the tab key, You should see a basic HTML5 template page.
1.4 Save again and press Ctrl + S.
The page content should be as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2. Add Bootstrap file reference
In the folder where the index.html file is located, create a css folder for Save all style files and create a folder named bootstrap in the css subfolder to save our bootstrap files.
You can download the bootstrap package from the bootstrap official website, which has a dist folder, which contains three subfolders: css, font and js. Copy these three subfolders into your css/bootstrap folder.
There are two parts of content involved in the page, styles and scripts.
2.1 Add style reference
Add bootstrap style reference in header. Pay attention to the path.
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
bootstrap.min.css is the style file of bootstrap, which contains all bootstrap style definitions, and bootstrap-theme.min.css is the theme definition.
2.2 Add script reference
Since bootstrap uses jQuery script, you also need to download the jquery script library.
In the directory where your index.html file is located, create a subdirectory named lib to save the script library for future use, and copy the downloaded jquery.min.js to this directory.
Add jquery and bootstrap script library references immediately between your .
<script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body>
3. Add bootstrap container
bootstrap’s .container class is very useful. It can create a centered area in the page, and then we can put content from other locations inside. The container class is equivalent to creating a centered p box with a static width and a magin value of auto. The advantage of twitter bootstrap's container class is that it is responsive, and it will calculate the optimal width based on the width of the current screen and use it.
.container-fluid is a full-width container, using the entire width.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}In the body tag, create a p using the container class. It will serve as the main outer package for placing other codes on the page.
You can also add a title by the way. Now your page should look like this.
Twitter Bootstrap Tutorial - A responsive layout tutorial <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body>
Although you can’t see much content in the browser yet, the foundation for subsequent operations has been laid.
4. Title and Navigation
Now we can add some visible content to the page.
4.1 Title
Adding a title is very simple, just add an h1 element.
<p class="container"> <h1>Twitter bootstrap tutorial</h1> </p>
Refresh the page and you should see an eye-catching title. Next we look at navigation.
4.2 Navigation
Navigation can be created using nav elements, and we want to create a navigation bar to organize navigation items. In bootstrap, the navigation bar is called navbar. Continue to add the navigation bar in the container.
<p class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> </nav> </p>
navbar will help us create the navigation bar. The default background color is white. navbar-inverse is set to inverse, so that the background color will be black and the text will be white, which is more eye-catching. Now refresh the page and you will see a black navigation bar without any navigation content.
Add navigation content as follows
<p class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <p class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </p> </nav> </p>
ul is the actual navigation content, where .nav indicates that this is a set of navigation, and .navbar-nav indicates that it is used for navigation in navbar. li is the actual navigation item, and you can use .active to describe the currently active navigation.
Pay attention to .navbar-collapse, which means that when the width of the viewport is less than 768px, the navigation becomes vertical.
is larger than 768px
is smaller than 768px
4.3 It is not convenient to turn the sandwich menu
into vertical navigation. We hope to become a popular style, like this.
We need to do some extra work. On the one hand, we need to indicate that when the viewport is smaller than a certain width, our specific navigation will be displayed and additional navigation content will be added.
<!-- Brand and toggle get grouped for better mobile display --> <p class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </p>
In fact, it is composed of two parts. The button part looks like a lot, and it is used to draw the sandwich button on the right. The following a element is the navigation on the left.
Normally it doesn't show up.
然后，我們需要制定點擊三明治按鈕的時候，需要顯示我們原來的導航。button 元素中，我們有一個 attribute ，data-target="#navbar-menu" ，就是用來完成這一步工作的，這個 #navbar-menu 就是我們?yōu)樵瓉淼膶Ш剿鸬?id 標識。
這樣，我們的導航就是這樣的了。
<h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <!-- Brand and toggle get grouped for better mobile display --> <p class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </p> <p id="navbar-menu" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </p> </nav> </p>
5. 內(nèi)容和邊欄
主要內(nèi)容部分，我們使用 p 來進行布局。
<p id="content" class="row-fluid"> <p class="col-md-9"> <h2>Main Content Section</h2> </p> <p class="col-md-3"> <h2>Sidebar</h2> </p> </p>
這里使用了 bootstrap 的柵格布局，柵格系統(tǒng)利用了12列的布局，這意味著一個頁面可以被分割成12個相同的列。下面這張從bootstrap官方文檔中拿到的圖片給出了一個很好的展示。
這張表格則給出了詳細的說明。
現(xiàn)在頁面看起來是這樣的。
6. 側邊欄導航
在側邊欄中添加一些導航內(nèi)容。這里就是普通的導航，使用 .nav 進行聲明，.nav-tabs 和 .nav-stacked 是導航的外觀。
<p class="col-md-3"> <h2>Sidebar</h2> <ul class="nav nav-tabs nav-stacked"> <li><a href='#'>Another Link 1</a></li> <li><a href='#'>Another Link 2</a></li> <li><a href='#'>Another Link 3</a></li> </ul> </p>
看看最終的效果，一個基于 bootstrap 的響應式布局頁面就完成了。?
相關文章：
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to get the bootstrap search bar
Apr 07, 2025 pm 03:33 PM
How to use Bootstrap to get the value of the search bar: Determines the ID or name of the search bar. Use JavaScript to get DOM elements. Gets the value of the element. Perform the required actions.
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to verify bootstrap date
Apr 07, 2025 pm 03:06 PM
To verify dates in Bootstrap, follow these steps: Introduce the required scripts and styles; initialize the date selector component; set the data-bv-date attribute to enable verification; configure verification rules (such as date formats, error messages, etc.); integrate the Bootstrap verification framework and automatically verify date input when form is submitted.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
