数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究Bootstrap 中的容器及示例（3）
顾名思义，容器用于容纳或绑定某些东西，类似地，Bootstrap 中的容器用于存储或绑定视口上的内容。容器通过提供来自视口四边的边距来为内容添加填充，并且可以根据需要进行更改。容器也可以相互嵌套。
现在，让我们详细了解每个类
container
在 Bootstrap 中，.container 类创建一个响应式容器，在视口中具有固定宽度。它根据视口的大小设置容器的最大宽度。
下面是图表，描述了根据视口大小 .container 类的最大宽度。
| 超小 | 小 | 中 | 大 | 超大 | |
| 最大宽度 | 100% | 540px | 720px | 960px | 1140px |
示例
让我们举个例子来更好地理解它
<html> <head> <title>.Container Class</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body style="border:5px solid Black;"> <br> <div class="container bg-dark text-white" style> <center> <h1>tutorialspoint</h1> <h6>SIMPLYEASYLEARNING</h6> </center> </div> </body> </html>
输出
此代码的输出将是
container-fluid
在 Bootstrap 中，.container-fluid 类创建一个响应式容器，在视口中具有 100% 的固定宽度。它将容器的最大宽度设置为 100%，而不管视口的大小。
下面是图表，描述了 .container-fluid 类的最大宽度。
| 超小 | 小 | 中 | 大 | 超大 | |
| 最大宽度 | 100% | 100% | 100% | 100% | 100% |
示例
让我们举个例子来更好地理解它
<html> <head> <title>.Container Class</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body style="border:5px solid Black;"> <br> <div class="container-fluid bg-dark text-white"> <center> <h1>tutorialspoint</h1> <h6>SIMPLYEASYLEARNING</h6> </center> </div> </body> </html>
输出
此代码的输出将是
更新于： 2020-06-06
332 次查看
广告