How to write bootstrap five column layout-Bootstrap Tutorial-php.cn

Home

Web Front-end

Bootstrap Tutorial

How to write bootstrap five column layout

尚

Jul 30, 2019 pm 05:55 PM

bootstrap

How to write bootstrap five column layout

We know that when using Bootstrap grid, we can easily divide the web page into modules. Bootstrap includes a responsive, mobile-first, fluid grid system that scales up to 12 columns appropriately as the device or viewport size increases.

It contains predefined classes for simple layout options, as well as powerful mixin classes for generating more semantic layouts. If we want to divide it into 2 equal parts, use col-md-6; if we want to divide it into 3 equal parts, use col-md-4; but what if we want to divide it into 5 or 8 equal parts? The following example is the fifth-level distribution layout of bootstrap:

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <!--视口的设置，让网页能等比例的缩放到对应设备中-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!--告诉ie浏览器用最新内核去渲染网页-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 
        <style type="text/css">
            .col-xs-1-5,
            .col-sm-1-5,
            .col-md-1-5,
            .col-lg-1-5 {
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            
            .col-xs-1-5 {
                width: 20%;
                float: left;
            }
            
            @media (min-width: 768px) {
                .col-sm-1-5 {
                    width: 20%;
                    float: left;
                }
            }
            
            @media (min-width: 992px) {
                .col-md-1-5 {
                    width: 20%;
                    float: left;
                }
            }
            
            @media (min-width: 1200px) {
                .col-lg-1-5 {
                    width: 20%;
                    float: left;
                }
            }
        </style>
 
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
        <body>
 
            <div>
                <div>
                    <div>
                        <div class="items text-center">
                            <img  src="/static/imghwm/default1.png"  data-src="../img/my.jpg"  class="lazy"   / alt="How to write bootstrap five column layout" >
 
                            <div>
                                <div id="">姓名:<span>王婷</span></div>
                            </div>
 
                            <div>
                                <div id="">性别:<span>女</span></div>
                            </div>
 
                            <div>
                                <div id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="items text-center">
                            <img  src="/static/imghwm/default1.png"  data-src="../img/my.jpg"  class="lazy"   / alt="How to write bootstrap five column layout" >
 
                            <div>
                                <div id="">姓名:<span>王婷</span></div>
                            </div>
 
                            <div>
                                <div id="">性别:<span>女</span></div>
                            </div>
 
                            <div>
                                <div id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="items text-center">
                            <img  src="/static/imghwm/default1.png"  data-src="../img/my.jpg"  class="lazy"   / alt="How to write bootstrap five column layout" >
 
                            <div>
                                <div id="">姓名:<span>王婷</span></div>
                            </div>
 
                            <div>
                                <div id="">性别:<span>女</span></div>
                            </div>
 
                            <div>
                                <div id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="items text-center">
                            <img  src="/static/imghwm/default1.png"  data-src="../img/my.jpg"  class="lazy"   / alt="How to write bootstrap five column layout" >
 
                            <div>
                                <div id="">姓名:<span>王婷</span></div>
                            </div>
 
                            <div>
                                <div id="">性别:<span>女</span></div>
                            </div>
 
                            <div>
                                <div id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
 
                    <div>
                        <div class="items text-center">
                            <img  src="/static/imghwm/default1.png"  data-src="../img/my.jpg"  class="lazy"   / alt="How to write bootstrap five column layout" >
 
                            <div>
                                <div id="">姓名:<span>王婷</span></div>
                            </div>
 
                            <div>
                                <div id="">性别:<span>女</span></div>
                            </div>
 
                            <div>
                                <div id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
 
</html>

The above is the detailed content of How to write bootstrap five column layout. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Understanding the Bootstrap Grid System for Responsive Web DesignMay 14, 2025 am 12:07 AM

Bootstrap'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 PM

BootstrapGridSystemisessentialforcreatingresponsivelayouts.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 AM

Bootstrap 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 AM

Bootstrap 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 AM

Bootstrap 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 AM

Bootstrap 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 AM

Bootstrap 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 AM

There 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

See all articles