Day-6 image shape, giant screen, information prompt box
Image shape, giant screen, information prompt box
1. Rounded image ( .rounded )
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<img src="img/1.jpg" class="rounded" alt="girl" width="300" height="280">
</div>
</body>
</html>
operation result:
2. Ellipse image ( .rounded-circle )
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<img src="img/1.jpg" class="rounded-circle" alt="girl" width="300" height="280">
</div>
</body>
</html>
operation result:
3. Thumbnail – image with border ( .img-thumbnail )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<img src="img/1.jpg" class="img-thumbnail" alt="girl" width="300" height="280">
</div>
</body>
</html>
operation result:
4. Image alignment ( .float-left left alignment .float-right right alignment)
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<img src="img/1.jpg" class="float-left" width="300" height="280">
<img src="img/2.jpg" class="float-right" width="400" height="280">
</div>
</body>
</html>
operation result:
5. Responsive images ( .img-fluid )
Images come in various sizes and we need to automatically adapt to the size of the screen. We can set responsive images by adding the .img-fluid class to the <img> tag. The .img-fluid class sets max-width: 100%; height: auto;
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<img src="img/2.jpg" class="img-fluid">
</div>
</body>
</html>
operation result:
When the browser is maximized, the display effect:
when the screen width is 528px, the display effect:
when the screen width is 351px, the display effect:
giant screen
1. Jumbotron (jumbo screen)
Jumbotron will create a large gray background box, which can be set some special content and information. Tips: You can put some HTML tags in Jumbotron, and it can also be Bootstrap elements.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>北京志愿者之家</h1>
<p>垃圾分类--我先行</p>
</div>
</div>
</body>
</html>
operation result:
2. Full screen Jumbotron
To create a full screen without rounded corners, you can add the .container or .container-fluid class to the div inside the .jumbotron-fluid class
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>北京志愿者之家</h1>
<p>垃圾分类--我先行</p>
</div>
</div>
</body>
</html>
Running results:
Note: Adding the .container-fluid class to the div outside the .jumbotron-fluid class will not realize the full screen of Jumbotron, and there is a default outer margin.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid">
<h1>北京志愿者之家</h1>
<p>垃圾分类--我先行</p>
</div>
</div>
</body>
</html>
operation result:
Information prompt box
1. Alert box color ( .alert-color )
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info">
<strong>信息!</strong> 请注意这个信息。
</div>
<div class="alert alert-warning">
<strong>警告!</strong> 设置警告信息。
</div>
<div class="alert alert-danger">
<strong>错误!</strong> 失败的操作
</div>
<div class="alert alert-primary">
<strong>首选!</strong> 这是一个重要的操作信息。
</div>
<div class="alert alert-secondary">
<strong>次要的!</strong> 显示一些不重要的信息。
</div>
<div class="alert alert-dark">
<strong>深灰色!</strong> 深灰色提示框。
</div>
<div class="alert alert-light">
<strong>浅灰色!</strong>浅灰色提示框。
</div>
</div>
</body>
</html>
operation result:
2. Prompt box to add link ( .alert-link )
In the prompt box, add the alert-link class to the label of the link to set the link that matches the color of the prompt box
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success">
<strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>
</div>
</body>
</html>
operation result:
2. Close the prompt box ( .alert-dismissible )
Add the .alert-dismissible class to the div in the prompt box , and then add class="close" and data-dismiss="alert" to the link of the close button to set the close operation of the prompt box.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>成功！</strong>
</div>
</div>
</body>
</html>
operation result:
3. Prompt box animation ( .fade fades in. show fades out )
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>成功！</strong>
</div>
</div>
</body>
</html>
Running result: Click the close button, the color of the prompt box will change from dark to light until it disappears.
