Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation

Introduction to bootstrap and its related content

Grid system

Nested columns
Column Offset
Column sorting

Navigation Bar

Carousel

Summarize

Introduction to bootstrap and its related content

Bootstrap is a front-end framework for rapid development of web applications and websites. When quoting it, you need to have certain basic templates:

    <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 3 meta tags *must* be placed first, and any other content *must* follow them! -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js are to make IE8 support HTML5 elements and media queries -->
    <!-- Warning: Respond.js does not work when accessing the page via the file:// protocol (that is, directly dragging the html page into the browser) -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

Grid system

Bootstrap divides the page or container into 12 equal parts horizontally. Rows must be placed within the .container class in order to get proper alignment and padding. Use col-lg-("number") to distribute it into 12 equal parts horizontally.

<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-3">4</div>
</div>

insert image description here

Nested columns

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <!-- col-md-6 by default separates two boxes horizontally. If it is just a simple div, it will be displayed as a vertical distribution-->
            <div class="col-md-6">a</div>
            <div class="col-md-6">b</div>
        </div>
    </div>
</div>

Column Offset

Use .col-md-offset-* to offset the column to the right

<div class="container">
    <div class="row">
            <div class="col-md-4">Toilet</div>
             <!-- There are twelve equal parts in total. The two boxes originally only occupied eight columns, and four columns were not used.
            So col-md-offset-4, so the box on the right will continue to shift 4 columns to the right -->
            <div class="col-md-4 col-md-offset-4">Right</div>
        </div>
    </div>
</div>

Column sorting

Generally used to change the order of boxes

 <div class="container">
    <div class="row">
        <!-- Use push and pull elements on both the left and right boxes so that the boxes will not be pressed down-->
            <div class="col-md-4 col-md-push-8">Toilet</div>
            <div class="col-md-8 col-md-pull-4">Right</div>
        </div>
    </div>
</div>

insert image description here

Navigation Bar

Add class .navbar , navbar-default to the <nav> tag.
Adding role="navigation" to the above element can help increase accessibility.
The <div> element adds a header class .navbar-header and contains an <a> element with class navbar-brand . This will make the text appear larger.
To add links to the navbar, simply add an unordered list with class .nav , .navbar-nav .

The demonstration is as follows:

<!doctype html>
<html lang="en">
<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 3 meta tags *must* be placed first, and any other content *must* follow them! -->
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Both scripts must be written, otherwise the drop-down menu will not appear-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
    <!-- This is a responsive layout. The layout is different when the screen is maximized than when it is reduced. -->
<body>
    <!-- role="navigation" helps increase accessibility -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- "navbar-header", which contains an <a> element with classnav-brand, will make the text appear larger -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                    <!-- data-toggle is used to tell JavaScript what to do with the button, icon-target indicates which element to switch to, and the three icons represent the so-called hamburger button -->
                    <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="#">Novice Tutorial</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Java
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper Report</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Detached Links</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Another detached link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Global interface

insert image description here

Small window interface

insert image description here

Carousel

The Bootstrap Carousel plugin is a flexible and responsive way to add sliders to your site. Besides that, the content is also flexible enough and can be images, iframes, videos or any other type of content you want to place.

Example demonstration:

 <body>
	<div id="myCarousel" class="carousel slide">
		<!-- Carousel indicators-->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<!-- Carousel Project-->
		<div class="carousel-inner">
			<div class="item active">
		<!-- The image references the absolute path, the relative path will be wrong-->
				<img src="1.jpg" alt="First slide" style="width: 100%;height: 200px;">
			</div>
			<div class="item">
				<img src="2.jpg" alt="Second slide" style="width: 100%;height: 200px;">
			</div>
			<div class="item">
				<img src="3.jpg" alt="Third slide" style="width: 100%;height: 200px;">
			</div>
		</div>
		<!-- Up and down jump control, jump control can go forward, forward and backward -->
		<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
</body>

insert image description here