bootstrap栅格系统简介，CSS库的引用

最新推荐文章于 2023-05-05 22:23:24 发布

Sudley.su

最新推荐文章于 2023-05-05 22:23:24 发布

阅读量366

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Sudley/article/details/111139381

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

官网：https://getbootstrap.com/
开始引用：
在bootstrap官网点击getstarted找到CSS样式的link
在这里插入图片描述
copy此link到html的head标签中即可开始引用bootstrap模块里面的组件；
可在Components里面查找自己需要的组件，比如下面的alert组件，找到Examples

<!DOCTYPE html>
<html>
	<head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	</head>
	<body>
    	<div class="alert alert-primary" role="alert">
  			primary alert—check it out!
		</div>
	</body>
</html>

在这里插入图片描述

栅格系统和响应机制
将页面分为12等分，每个元素可以配置占用的比例，比如下面的div会根据页面大小动态调整大小，但是在页面上所占的比例始终是一样的
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <style>
        	.row > div {
            	padding:20 px;
            	border: 2px solid black;
            }
        </style>
	</head>
	<body>
    	<div class="container">
  			<div class="row">
  				<div class="col-3">
  					朝辞白帝彩云间，
				</div>
                <div class="col-3">
  					千里江陵一日还。
				</div>
                <div class="col-3">
  					两岸猿声啼不住，
				</div>
                <div class="col-3">
  					轻舟已过万重山。
				</div>
			</div>
		</div>
	</body>
</html>

还可以配置为页面大小不一时显示不同的效果，页面比较大时在一行上显示；当页面缩小到一点尺寸时一个div占一行
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <style>
        	.row > div {
            	padding:20 px;
            	border: 2px solid black;
            }
        </style>
	</head>
	<body>
    	<div class="container">
  			<div class="row">
  				<div class="col-lg-3 col-sm-12">
  					朝辞白帝彩云间，
				</div>
                <div class="col-lg-3 col-sm-12">
  					千里江陵一日还。
				</div>
                <div class="col-lg-3 col-sm-12">
  					两岸猿声啼不住，
				</div>
                <div class="col-lg-3 col-sm-12">
  					轻舟已过万重山。
				</div>
			</div>
		</div>
	</body>
</html>