Bootstrap栅格系统与常用组件
目录
一、Bootstrap栅格系统
1、BootStrap框架
使用方式
A、下载编译包,在页面中导入其核心的css文件和JavaScript文件
<link href="bootstrap.min.css" ref="stylesheet"/>
<script src="../js/jquery-3.4.1.js"></script>
<script src="bootstrap.min.js" type="text/javascript></script>
B、使用CDN提供的文件地址(必须联网)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
(一)栅格系统基本描述
1、栅格系统(Grid Systems)
即网格系统,它是一种清晰、工整的设计风格,用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上,一个印刷版面上划分了若干个格子,非常方便排版,后来,栅格系统被应用于网页布局中,使用响应式栅格系统进行页面布局时,可以让一个网页在不同大小的屏幕上,呈现出不同的结构。例如,在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏
2、简单版栅格系统
代码如下
编写HTML结构
<body>
<div class="row"><header>页头</header></div>
<div class="row">
<nav class="col1">导航</nav>
<div class="col2">主要内容</div>
<aside class="col1">侧边栏</aside>
</div>
<div class="row"><footer>页尾</footer></div>
</body>
编写CSS样式代码
<style>
.row {
width: 100%; }
.row :after {
/* 通过伪元素:after清除浮动 */
clear: left; /* 清除左浮动 */
content: '';
display: table; /* 该元素会作为块级表格来显示(类似 <table>) */