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

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

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

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Bootstrap grid system layout detailed explanation
  • Analysis of how to use the bootstrap grid system
  • BootStrap navigation bar problem record
  • Embracing Bootstrap — Navigation Bar
  • Bootstrap realizes the effect of carousel
  • Detailed explanation of how to use the bootstrap carousel template

<<:  MySQL data insertion optimization method concurrent_insert

>>:  Detailed explanation of HTML page header code example

Recommend

Some simple implementation codes of the form element take registration as an example

Code implementation: Copy code The code is as fol...

Analysis of the principles and usage of Linux hard links and soft links

In the Linux system, there is a kind of file call...

Install nodejs and yarn and configure Taobao source process record

Table of contents 1. Download nodejs 2. Double-cl...

MySQL beginners can say goodbye to the troubles of grouping and aggregation queries

Table of contents 1. Schematic diagram of group q...

js method to delete a field in an object

This article mainly introduces the implementation...

MySQL Basic Tutorial: Detailed Explanation of DML Statements

Table of contents DML statements 1. Insert record...

MySQL 5.7.21 Installer Installation Graphic Tutorial under Windows 10

Install MySQL and keep a note. I don’t know if it...

The latest mysql-5.7.21 installation and configuration method

1. Unzip the downloaded MySQL compressed package ...

Summary of solutions to common Linux problems

1. Connect Centos7 under VMware and set a fixed I...

Install and configure ssh in CentOS7

1. Install openssh-server yum install -y openssl ...

Vue sample code for implementing two-column horizontal timeline

Table of contents 1. Implement the component time...

What are the differences between sql and mysql

What is SQL? SQL is a language used to operate da...

Vue+openlayer5 method to get the coordinates of the current mouse slide

Preface: How to get the coordinates of the curren...

Detailed tutorial on customizing the installation path of MySQL 5.7.18 version (binary package installation)

Installation path: /application/mysql-5.7.18 1. P...

ElementUI component el-dropdown (pitfall)

Select and change: click to display the current v...