The front end uses bootstrap to implement a simple small case, focusing on responsive layout

1. Case effect display

We use a responsive layout, which can make the same set of pages compatible with devices with different resolutions. You can see Apple's official website. When you put the serial port of the browser very small, the layout of the website will also change with the page size. When we visit the website on the mobile phone or pad, we will still have a good experience.




When the browser page becomes smaller, the first thing you can see is that the navigation bar is folded, and these pictures can still be fully displayed, which is an obvious effect of responsive layout

2 main knowledge points

I used a nested table in the table when I made this web page. Although it can achieve the effect, I didn't use a responsive layout. When the size of the browser page changes, the experience is particularly poor,
Moreover, the style is very poor. Here I use the grid to replace the table for an overall layout, which is an important technology of responsive layout, so the knowledge points used are:
1. Grille in bootstrap
2. Use of bootstrap
3. How does bootstrap implement case layout
4. Navigation bar in bootstrap
Carousel map in 5 bootstrap

2.1 grating (responsive layout)

Grid is to divide the current browser page, whether pc browser or mobile browser, into 12 parts. We can specify that one control or div occupies several grids
When using grids, we can specify the number of grids occupied by div on different devices
*Equipment code:
1. xs: ultra small screen mobile phone (< 768px): col-xs-12
2. sm: small screen flat panel (≥ 768px)
3. md: medium screen desktop display (≥ 992px)
4. lg: large screen large desktop display (≥ 1200px)

2.2 how do we use the bootstrap framework

First, go to the official website to download several bootstrap folders and put the js, css and fonts folders under your web project. In addition, bootstrap needs to rely on a jQuery file, so we also need to put a jQuery file under the js folder
bootstrap website: https://v3.bootcss.com/

Directory structure of my project

After downloading the files, we put the three folders into the project. We also need to reference the bootstrap style in our front-end xml file and import it in our own xml file,
The code is as follows
I put the referenced code in the head of the front-end code
code:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Above 3 meta label*must*Put it first, anything else*must*Follow! -->
    <title>Button</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" >
    <!-- jQuery (Bootstrap All of JavaScript All plug-ins depend on jQuery,So it must be put in front) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- load Bootstrap All of JavaScript plug-in unit. You can also load only a single plug-in as needed. -->
    <script src="../js/bootstrap.min.js" ></script>

    <!-- HTML5 shim and Respond.js To make IE8 support HTML5 Element and media query( media queries)function -->
    <!-- Warning: Pass file:// Response.js does not work when the protocol (that is, directly drag the html page into the browser) accesses the page -- >
    <!--[if lt IE 9]>

    <![endif]-->
    </head>

2.3 overall idea of small case realization

1. The first is that we should use the container, and use the div class name class = "container" or clas = "container fluid" to automatically use the class selector in the bootstrap. 1. container: leave blank on both sides. 2. Container fluid: each device is 100% wide

2. We need to use containers instead of tables

**It can be said that the most important thing in the bootstrap framework is to use this grid for layout

Use the grid instead of the table we used before
The previous table was replaced by a div whose class name is class = "container fluid" or class = "container"

The tr in table is also replaced by a div, but the div class name is class = "row"
td in table is also replaced by div, but the div class name of this element should indicate the number of grids occupied by the element. The range of class = "col-md-x" or class = "col-sm-x" or class = "col-lg-x" x is 1-12**

2.4 in a small case, I used a title bar,

The label in the title bar will automatically fold into a hamburger button when the browser window is reduced,
Of course, this title bar can be pasted directly on the bootstrap website and modified by yourself

2.5 there is also a rotation chart in the case

The rotation chart is also pasted directly on the official website of bootstrap. You can use it after modification

A complete code

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Above 3 meta label*must*Put it first, anything else*must*Follow! -->
    <title>Button</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" >
    <!-- jQuery (Bootstrap All of JavaScript All plug-ins depend on jQuery,So it must be put in front) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- load Bootstrap All of JavaScript Plug ins. You can also load only a single plug-in as needed. -->
    <script src="../js/bootstrap.min.js" ></script>

    <!-- HTML5 shim and Respond.js To make IE8 support HTML5 Element and media query( media queries)function -->
    <!-- Warning: Pass file:// Response.js does not work when the protocol (that is, directly drag the html page into the browser) accesses the page -- >
    <!--[if lt IE 9]>

    <![endif]-->

    <style>
        .row1{
            margin-top: 10px;
        }

        /*Color of input box*/
        .seach{
            border: 3px solid #ffc900;
            width: 400px;
            height: 40px;
            float: left;
            /*Let the input box and search button float to the left to make them closely connected*/
            margin-top: 15px;
            margin-left: 170px;
        }
        /*Button size*/
        .bt_search{
            width: 100px;
            background-color: #ffc900;
            height: 40px;
            border: 2px solid #ffc900;
            float: left;
            margin-top: 15px;
            font-size: 15px;

        }

        .img1{
            margin-left: 150px;
        }
        .img2{
            margin-left: 150px;
        }
        .jx{
        /*   Set a lower border for the dark horse selection*/
            border-bottom: 2px solid #ffc900;
            margin-top: 20px;

        }

        span{
            font-size: 18px;
        }

        .jximg{
            padding-top: 15px;
        }
        .gn{
            padding-top: 15px;
        }
        .text{
            height: 50px;
            background-color: #ffc900;
            font-size: 16px;
            text-align: center;
            line-height: 50px;  /*Let line height equal to height to center the text vertically*/
        }
    </style>
</head>
<body>

<!--Header to increase readability, we use a header Let's mark it  header Labels also have no style-->
<!--The header part is divided into four lines, so we're here header There are four in it div-->
<header class="container-fluid">
<!--    this container-fluid The responsive layout has been realized -->
    <div class="row">
        <img width="100%" src="../img/top_banner.jpg" alt="">
    </div>
<!--    Search box picture search box picture -->
    <div class="row row1" >
<!--            Element note that we use the same when setting the element div Label each element, we set the size of the grid-->
        <div class="col-md-3">
            <img src="../img/logo.jpg" alt="" class="img1">
        </div>
        <div class="col-md-5 " >
            <input type="text" width="350px" height="20px" class="seach">
            <input type="button" value="search" class="bt_search">
        </div>
        <div class="col-md-4">
            <img src="../img/hotel_tel.png" alt="" class="img2">
        </div>
    </div>
<!--    navigation bar-->
    <div class="row">
        <nav class="navbar navbar-default">
            <!--    <nav class="navbar navbar-inverse">-->
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!--            This button defines a hamburger button. When the page is too small, the navigation bar will collapse into a hamburger button-->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#"> Henan</a></li>
                        <li><a href="#"> Jiaxian County</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"> the rightmost link</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
<!--    This line is a rotation chart-->
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img width="100%" src="../img/banner_1.jpg" alt="...">
                    <div class="carousel-caption">
                        Picture 1
                    </div>
                </div>
                <div class="item">
                    <img width="100%" src="../img/banner_2.jpg" alt="...">
                    <div class="carousel-caption">
                        Picture 1
                    </div>
                </div>

                <div class="item">
                    <img width="100%" src="../img/banner_3.jpg" alt="...">
                    <div class="carousel-caption">
                        Picture 1
                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

</header>



<!--    Theme section-->
<div class="container">
    <div class="row jx">
        <img src="../img/icon_5.jpg" alt="">
        <span>Dark horse selection</span>
    </div>
    <div class="row jximg">
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
    </div>


</div>

<!--The second part of the body is divided into two lines, one of which is icon Add a text and divide the other line into two elements-->
<div class="container">
<!--    first line-->
    <div class="row jx">
        <img src="../img/icon_6.jpg" alt="">
        <span>Travel abroad</span>
    </div>
    
<!--    The second line is divided into two elements-->
    <div class="row">
<!--        First element-->
       <div class="col-md-4 gn">
           <img src="../img/guonei_1.jpg" alt="">
       </div>
<!--        The second element is divided into two lines-->
        <div class="col-md-8 gn">
            <div class="row">
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
            </div>
<!--            Second line-->
            <div class="row">
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>Free flight from Shanghai to Sanya for five days and four nights(Spring Festival pre-sale+personally/honeymoon/First choice for leisure travel+Stay at any luxury hotel+Transfer )</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
            </div>

        </div>
    </div>

</div>

<footer>
<!--    Divided into two lines-->
    <div class="row">
        <img src="../img/footer_service.png" alt="" width="100%">
    </div>
    <div class="row text">
        Jiangsu Chuanzhi podcast Education Technology Co., Ltd. all rights reserved Copyright 2006-2018, All Rights Reserved Soviet ICP Standby 16007882
    </div>
</footer>



</body>
</html>

This case is a simple record of life. Don't spray it~~

Tags: Java Javascript Front-end

Posted on Wed, 24 Nov 2021 16:58:09 -0500 by dave914