Basic use of bootstrap 01 front-end framework

I III. WWW


      1.  What?


            ①. Born in 2011, from Twitter, it is currently the most popular front-end framework
            ②. Is a front-end framework for rapid development of Web applications and websites
            ③. Bootstrap is based on HTML, CSS and JS. It is simple and flexible, making Web development faster
Overview: Bootstrap is a responsive front-end framework that can be perfectly displayed on three terminals (PC, tablet and mobile phone) by establishing a page


       2. Why?


            ①. Responsive design (Bootstrap's responsive CSS can adapt to desktops, tablets and mobile phones)
            ②. Mobile device priority
            ③. Browser support
            ④. Easy to use


       3. Where?


Corporate website, blog, website background and other websites
E-commerce (there are too many categories of e-commerce websites)


       
II Environmental installation


        ①. Download Bootstrap Library


            https://v4.bootcss.com/


        ②. Import and stock in on page


            bootstrap.css: Bootstrap core style [add to head tag]
            jquery-3.3.1. Before importing jQuery: JSP core library
            bootstrap.js: Bootstrap core library
[add before < / body >]
Add in head:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Width = device width: rendered on different devices
Initial scale = 1.0: rendered at a scale of 1:1 without any scaling
User scalable = No: disable page scaling
Maximum scale = 1.0: page magnifier, 1.0 will prevent users from enlarging the actual size

III case


Case 3: home page navigation & Original Ecological Realization of search area (div+css)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Case 3: home page navigation&Search area original ecological realization( div+css)</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#container {
				/* background-color: aqua; */
				height: 800px;
			}

			.nav {
				background-color: aqua;
				height: 70px;
				line-height: 70px;
			}

			.nav_logo {
				float: left;
				margin-left: 30px;
			}

			.nav_title {
				float: right;
				margin-right: 40px;
			}

			.nav_title a {
				text-decoration: none;
				display: inline-block;
				width: 50px;
				color: black;
			}

			.nav_title a:hover {
				color: white;
			}

			.search {
				height: 250px;
				background-color: blueviolet;
				margin-top: 5px;
				text-align: center;
				line-height: 250px;
			}

			.search input {
				width: 500px;
				height: 40px;
				/* alignment */
				vertical-align: middle;
				/* arc */
				border-radius: 10px;
				border: 0;
				font-size: 20px;
			}

			.search button {
				height: 40px;
				width: 60px;
				/* alignment */
				vertical-align: middle;
				/* arc */
				border-radius: 10px;
				border: 0;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<!-- Navigation area START -->
			<div class="nav">
				<div class="nav_logo">Hello! welcome</div>
				<div class="nav_title">
					<a href="">home page</a>
					<a href="">Sign in</a>
					<a href="">register</a>
					<a href="">sign out</a>
				</div>
			</div>
			<!-- Navigation area END -->
			<!-- Search area START -->
			<div class="search">
				<input type="text">
				<button><img width="20" height="20" src="img/search.png" alt=""></button>
			</div>
			<!-- Search area END -->
		</div>
	</body>
</html>


Case 4: home page navigation & Bootstrap implementation of search area & building home page framework
            ①. Use of navigation bar components - Navbar
            ②. Layout container
Fixed container [class="container"]
Large screen (large desktop display, greater than or equal to 1200px)
                        lg( large)
Medium screen (desktop display, greater than or equal to 992px)
                        md(middle)
Small screen (flat panel, 768px or more)
                        sm(small)
Ultra small screen (mobile phone, less than 768px)
                        xs(extra small)
            ③. Form - Forms + input box group component - Input group
            ④. Grid system
Concept: Bootstrap provides a responsive, mobile device first streaming grid system
Features: with the increase of screen or viewport size, the system will be automatically divided into up to 12 columns
Grid system strategy diagram
Realize the overall general layout of the home page

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- introduce CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<!-- introduce Jquery -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- introduce bootstrap -->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.navbar-collapse{
				flex-grow: 0;
				
			}
			
			.input-group{
				margin: 0 auto;
				width: 400px;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
		  <div class="container">
		    <a class="navbar-brand" href="#"> welcome to</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			  <span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNav">
			  <ul class="navbar-nav">
			    <li class="nav-item active">
			      <a class="nav-link" href="#"> login < span class =" SR only "> (current) < / span ></a>
			    </li>
			    <li class="nav-item">
			      <a class="nav-link" href="#"> registration</a>
			    </li>
			    <li class="nav-item">
			      <a class="nav-link" href="#"> shopping cart</a>
			    </li>
			    <li class="nav-item">
			      <a class="nav-link disabled">sign out</a>
			    </li>
			  </ul>
			</div>
		  </div>
		</nav>
		
		
			
			<div class="container" style="margin-top: 40px;">
				
				<div class="input-group mb-3">
				  <input type="text" class="form-control" placeholder="Please enter what you want to enter" aria-label="Recipient's username" aria-describedby="button-addon2">
				  <div class="input-group-append">
				    <button class="btn btn-outline-secondary" type="button" id="button-addon2">search</button>
				  </div>
				</div>
				
			</div>
			
			<div class="container">
			  <div class="row">
			    <div class="col-sm-3" style="background-color: oldlace;">
					
					<div class="accordion" id="accordionExample">
					  <div class="card">
					    <div class="card-header" id="headingOne">
					      <h2 class="mb-0">
					        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					         Book classification
					        </button>
					      </h2>
					    </div>
					
					    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
					      
					      
					      <ul class="list-group">
					        <li class="list-group-item">literature</li>
					        <li class="list-group-item">novel</li>
					        <li class="list-group-item">youth</li>
					        <li class="list-group-item active">education</li>
					        <li class="list-group-item">fairy tale</li>
							<li class="list-group-item">life</li>
							<li class="list-group-item">social science </li>
							<li class="list-group-item">Self-Improvement</li>
							
					      </ul>
						  
					    </div>
					  </div>
					  
					</div>
					
			    </div>
				
				
				
			    <div class="col-9" style="background-color: #007BFF;">
					
					    
					
							</div>
							
							<div class="row" style="background-color: #0056B3;">
								
								<div id="" style="height: 400px;">
									
								</div>
								
							</div>
						 
					    </div>
					   
				

			</div>	
		
		
	</body>
</html>

Tags: Front-end html bootstrap

Posted by senorpuerco on Fri, 06 May 2022 05:02:49 +0300