Java JavaScript advanced bootstrap

Content today

1. Bootstrap

Bootstrap:

1. Concept: a front-end development framework, bootstrap, from Twitter, is currently a very popular front-end framework. Bootstrap is based on HTML, CSS and JavaScript. It is simple and flexible, making Web development faster.
	*Framework: a semi-finished software, developers can develop on the basis of the framework, simplify coding.
	* benefits:
		1. Many css styles and js plug-ins are defined. Our developers can directly use these styles and plug-ins to get rich page effects.
		2. Responsive layout.
			*The same set of pages can be compatible with different resolution devices.


2. Quick start
	1. Download Bootstrap
	2. Copy these three folders in the project
	3. Create html page and import necessary resource files


	<!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">
	    <! -- the above three meta tags * must * be placed at the front, and any other content * must * follow! >
	    <title>Bootstrap HelloWorld</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
	
	
	    <! -- jQuery (all JavaScript plug-ins of bootstrap rely on jQuery, so it must be put in the front) ->
	    <script src="js/jquery-3.2.1.min.js"></script>
	    <! -- load all JavaScript plug-ins for Bootstrap. You can also load only a single plug-in as needed. >
	    <script src="js/bootstrap.min.js"></script>
	</head>
	<body>
	<h1>Hello, the world! </h1>
	
	</body>
	</html>

Responsive layout

*The same set of pages can be compatible with different resolution devices.
*Implementation: depending on grid system: divide a row into 12 grids on average, and specify how many grids the elements occupy
 * steps:
	1. Define the container. Equivalent to the previous table
		*Container classification:
			1. container: left blank on both sides
			2. Container fluid: each device is 100% wide
	2. Define lines. Equivalent to the previous tr style: row
	3. Define elements. Specifies the number of cells the element occupies on different devices. Style: col equipment code number of cells
		*Equipment code:
			1. xs: ultra small screen mobile phone (< 768px): col-xs-12
			2. sm: small screen panel (≥ 768px)
			3. md: medium screen desktop display (≥ 992px)
			4. lg: large screen large desktop display (≥ 1200px)

	* Note:
		1. If the number of cells in a row exceeds 12, the exceeding part will wrap automatically.
		2. Grid class attributes can be upward compatible. The grid class is applicable to devices with screen width greater than or equal to the size of the boundary point.
		3. If the real device width is less than the minimum value of the device code for setting grid class attributes, an element will be filled with a whole line.

CSS styles and JS plug-ins

1. Global CSS Style:
	*Button: class = "BTN BTN default"
	* picture:
		*Class = "img responsive": pictures account for 100% of any size
		*Picture shape
			*< img SRC = "..." ALT = "..." class = "img rounded" >: Square
			*<img src= "..." alt= "..." class= "img-circle" >: circle
			*< img SRC = "..." ALT = "..." class = "img thumbnail" >: picture frame
	* form
		* table
		* table-bordered
		* table-hover
	* form
		*Add: class = "form control" to form item 
2. components:
	* navigation bar
	* paging bar
 3. plug-in:
	* rotation chart

case

<!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">
    <!-- The 3 above meta Label*Must*Put it first, anything else*Must*Follow! -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap All JavaScript Plug ins all depend on jQuery,So it has to be in the front) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Load Bootstrap All JavaScript Plug-in unit. You can also load only a single plug-in as needed. -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .paddtop{
            padding-top: 10px;
        }
        .search-btn{
            float: left;
            border:1px solid #ffc900;
            width: 90px;
            height: 35px;
            background-color:#ffc900 ;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
        }

        .search-input{
            float: left;
            border:2px solid #ffc900;
            width: 400px;
            height: 35px;
            padding-left: 5px;
            margin-top: 15px;
        }
        .jx{
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
        .company{
            height: 40px;
            background-color: #ffc900;
            text-align: center;
            line-height:40px ;
            font-size: 8px;
        }
    </style>
</head>
<body>

   <!-- 1.Header part-->
   <header class="container-fluid">
       <div class="row">
           <img src="img/top_banner.jpg" class="img-responsive">
       </div>
       <div class="row paddtop">
           <div class="col-md-3">
               <img src="img/logo.jpg" class="img-responsive">
           </div>
           <div class="col-md-5">
               <input class="search-input" placeholder="Please enter the line name">
               <a class="search-btn" href="#> search </a>
           </div>
           <div class="col-md-4">
               <img src="img/hotel_tel.png" class="img-responsive">
           </div>

       </div>
       <!--Navigation bar-->
       <div class="row">
           <nav class="navbar navbar-default">
               <div class="container-fluid">
                   <!-- Brand and toggle get grouped for better mobile display -->
                   <div class="navbar-header">
                       <!-- Define 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="#> > home page </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="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>

                       </ul>
                   </div><!-- /.navbar-collapse -->
               </div><!-- /.container-fluid -->
           </nav>

       </div>

       <!--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 -->
               <div class="carousel-inner" role="listbox">
                   <div class="item active">
                       <img src="img/banner_1.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_2.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_3.jpg" alt="...">
                   </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>
   <!-- 2.Main part-->
   <div class="container">
        <div class="row jx">
            <img src="img/icon_5.jpg">
            <span>Black horse selection</span>
        </div>

       <div class="row paddtop">
           <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/jiangxuan_3.jpg" alt="">
                    <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                    <font color="red">&yen; 699</font>
                </div>
           </div>
           <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                   <font color="red">&yen; 699</font>
               </div>

           </div>
           <div class="col-md-3">

               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>
           <div class="col-md-3">

               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>


       </div>
       <div class="row jx">
           <img src="img/icon_6.jpg">
           <span>Domestic tourism</span>
       </div>
       <div class="row paddtop">
           <div class="col-md-4">
               <img src="img/guonei_1.jpg">
           </div>
           <div class="col-md-8">
               <div class="row">
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                           <font color="red">&yen; 699</font>
                       </div>

                   </div>
                   <div class="col-md-4">

                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>

               </div>
               <div class="row">
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                           <font color="red">&yen; 699</font>
                       </div>

                   </div>
                   <div class="col-md-4">

                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>Shanghai direct flight Sanya 5 days 4 nights free trip(Spring Festival pre-sale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel optional+Transfer)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>


               </div>

           </div>

       </div>
   </div>
   <!-- 3.Footer section-->
   <footer class="container-fluid">
       <div class="row">
           <img src="img/footer_service.png" class="img-responsive">
       </div>
       <div class="row company">
           //Jiangsu Chuanzhi podcast Education Technology Co., Ltd. Copyright 2006-2018, All Rights Reserved Su ICP prepared 16007882
       </div>

   </footer>


</body>
</html>
Published 3 original articles, won praise 0, visited 536
Private letter follow

Tags: Spring JQuery Javascript IE

Posted on Sat, 08 Feb 2020 00:38:23 -0800 by alexrait1