bootstrap layout instance

1. Path navigation

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Path navigation</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>

<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#"> Home Page</a></li>
            <li><a href="#"> Products</a></li>
            <li class="active">After sale</li>
        </ol>
    </div>
</div>

</body>
</html>

2.bootstrap drop-down menu

(1)dropdown-toggle
(2)dropdown-menu

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Path navigation</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>

<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#"> Home Page</a></li>
            <li><a href="#"> Products</a></li>
            <li class="active">After sale</li>
        </ol>
    </div>
</div>
<br>
<br>
<!--Put it in a row-->
<div class="row">
<!--Association class-->
    <div class="dropdown">
    <!--Do not write data-target-->
    <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Menu directory
        <!--Drop-down arrow-->
        <span class="caret"></span>
    </div>
        <!--drop-down menu-->
        <ul class="dropdown-menu">
            <li><a href="#"> menu 1</a></li>  
            <li><a href="#"> menu 2</a></li>
            <li><a href="#"> menu 3</a></li>
        </ul>
</div>
</div>

</body>
</html>

Example: Fruit Festival

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fruit Festival</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>

<!--navbar Navigation bar class, navbar-inverse Black navigation bar, navbar-static-top Elimination of fillet-->
<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <!--Definition logo，navbar-header statement logo container-->
        <div class="navbar-header">
            <!--Folding button,data-toggle Class, data-target Target, id To add#-->
            <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                <!--icon-bar Horizontal bar-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--navbar-brand，logo style-->
            <a href="" class="navbar-brand"><img src="images/logo.png" alt="logo"></a>
        </div>
        <!--navbar-collapse Folding style-->
        <div class="collapse navbar-collapse" id="mymenu">

            <!--define menus nav,navbar-nav Define navigation bar menu-->
            <ul class="nav navbar-nav">
                <!--active Selected state-->
                <li class="active"><a href="#"> recommended products</a></li>
                <li><a href="#"> fresh mobile phone</a></li>
                <li><a href="#"> Draw</a></li>
            </ul>
            <!--Define the form in the menu, navbar-form The form that defines the navigation bar, navbar-right Menu to right-->
            <form action="" class="navbar-form navbar-right">
                <!--form-group Form group-->
                <div class="form-group">
                    <!--Button group-->
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <!--span Next use bootstrap Components-->
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<!--jumbotron Giant screen-->
<div class="jumbotron">
    <div class="container">

        <div class="row">
            <!--Grid design for browser scaling-->
            <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
            <!--img-responsive Image scaling-->
                <img src="images/banner_title.png" alt="Title" class="banner_title img-responsive">
                <h2 class="banner_detail_title">Fruit introduction</h2>
                <P class="banner_detail">For performance reasons, all icons need a base class and a class for each icon. You can use the following code anywhere. Note that in order to set the correct internal compensation( padding)，Be sure to add a space between the icon and the text.</P>
            </div>
            <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">

                <img src="images/basket.png" alt="fruit1" class="img-responsive">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row innersty">

        <h3 class="text-center">Active pictures</h3>
        <p class="text-center">Modern assistive technology can recognize and read the CSS Generated content and specific Unicode Character. In order to prevent the screen reading device from grabbing unintended and possibly confusing output content (especially when the icons are purely for decorative purposes), we set these icons aria-hidden="true" Attribute.</p>
    <!--row 15 of balancing vessel px Margin. It's negative padding--> 
    <div class="row  active_list">

        <div class="col-lg-3 col-md-3 col-sm-6">
            <!--thumbnail A style of picture-->
            <div class="thumbnail">
                <img src="images/active01.jpg" alt="Activity 1">
                <h4>On site picking activities</h4>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active02.jpg" alt="Activity 1">
                <h4>On site picking activities</h4>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active03.jpg" alt="Activity 1">
                <h4>On site picking activities</h4>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active04.jpg" alt="Activity 1">
                <h4>On site picking activities</h4>
            </div>
        </div>
    </div>
    </div>
</div>
<div class="container">
    <div class="row goods_list">

        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="commodity" class="img-responsive">
                <h4>Trade name</h4>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="commodity" class="img-responsive">
                <h4>Trade name</h4>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="commodity" class="img-responsive">
                <h4>Trade name</h4>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="commodity" class="img-responsive">
                <h4>Trade name</h4>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="commodity" class="img-responsive">
                <h4>Trade name</h4>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

CSS file:

/ CSS Document /
/Adjust logo position/
.navbar-brand{
padding: 7px 15px;
}
/Navigation bar background color, border color/
.navbar-inverse{
background-color: #ff722b;
border-color: #FF722B;
}
/Navigation bar list text color/
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
/The first page of the list is selected/
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #C45923;
}
/Collapse button border/
.navbar-inverse .navbar-toggle {
border-color: #FFFFFF;
}
/Check the background color of the fold button/
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
background-color: #C45923;
}
/The border color of the navigation bar drop-down list form/
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #FFFFFF;
}
/Bottom margin of navigation bar/
.navbar{
margin-bottom: 0;
}
Huge curtain /
.jumbotron{
background: url("../images/banner_bg.jpg") center center no-repeat;
padding: 25px 0;
}
/Title Position/
.banner_title{
margin-top: 47px;

}
/Title position adjusts with browser zoom/
@media (max-width:1200px){
.banner_title{
margin-top: 30px;
}
}

@media (max-width:992px){
.banner_title{
margin-top: 15px;
}
}
/Secondary title text size, color/
.banner_detail_title{
font-size: 18px;
color: #FFFF00;
}
/Text content, size, color, line height/
.jumbotron .banner_detail{
font-size: 14px;
color: #FFFFFF;
line-height: 28px;
}
/Part III Title position, size, color/
.innersty h3{
margin-top: 0px;
font-size: 30px;
color: #333;
}
/Part III content size and color/
.innersty p{
font-size: 14px;
color: #333;
}
/The third part is picture style, maximum picture width, suitable for browser zoom, position adjustment/
.active_list .thumbnail{
max-width: 260px;
margin: 0 auto 20px;
}
/Center text under picture/
.active_list .thumbnail h4{
text-align: center;
}
/Part IV frame of each picture, maximum width, position/
.goods_con{
border: 1px solid #ddd;
max-width: 260px;
margin: 0 auto 20px;
}
/Picture as a percentage of box/
.goods_con img{
width: 100%;
}
/Grid proportion/
.goods_list .col-lg-2{
width: 20%;
}
/Browser scale, flow alignment/
@media (max-width:1200px){
.goods_list .col-lg-2{
width: 20%;
float: left;
}

}
@media (max-width:992px){
.goods_list .col-lg-2{
width: 33.33%;
float: left;
}

}
@media (max-width:768px){
.goods_list .col-lg-2{
width: 100%;
float: left;
}

}


Keywords: Javascript JQuery Mobile Attribute

Added by Tracer on Sat, 07 Dec 2019 20:20:20 +0200

Popular Keywords

©2024 Programming VIP