您的位置：首页 > Web前端 > BootStrap

BootStrap UI框架基础

2020-07-24 20:14 656 查看

1. HTML结构-Grid System

1.1 container

body中的所有元素被div.cnotainer或者div.container-fluid或者其他container包裹。

container container-fluid
页面两侧有较大外边距，居中显示 流式布局，页面两端没有边距，适合移动设备布局

下表为官网给出的，不同的container在不同屏幕尺寸下所对应的布局宽度。

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px 
.container
 100% 540px 720px 960px 1140px 
.container-sm
 100% 540px 720px 960px 1140px 
.container-md
 100% 100% 720px 960px 1140px 
.container-lg
 100% 100% 100% 960px 1140px 
.container-xl
 100% 100% 100% 100% 1140px 
.container-fluid
 100% 100% 100% 100% 100%

1.2 row

row必须为container的直接子元素，以行的形式逐行布局。

1.3 col

每一个div.row中，有多个列col构成。将一行的宽度十二等分，每一列获得其中的份数。

不同屏幕尺寸下不同列模块所占用的份数由以下表格中的类是书写方法所确定。

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix 
.col-
 
.col-sm-
 
.col-md-
 
.col-lg-
 
.col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

如果只书写div.col类，则平分行的宽度。

行内的列的数量可以由行来预定义，div.row-col-*。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BootStrap Application</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./bootstrap/js/jquery3.5.1.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<style>
.row div:nth-child(2n) {
background-color: #f0f;
}

.row div:nth-child(2n+1) {
background-color: #ff0;
}
</style>
</head>

<body>
<div class="container-fluid">
<div class="row">
<div class="col-xl-3">A</div>
<div class="col-xl-3">B</div>
<div class="col-xl-3">C</div>
<div class="col-xl-3">D</div>
</div>
<div class="row"></div>

</div>
</body>

</html>

2. 对齐方式

通过BootStrap的类名方式对齐，IE10-11不支持。

2.1 Vertical alignment

2.1.1 将类名设置在row标签上

<div class="container">

<!-- 顶端对齐 -->
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>

<!-- 居中对齐 -->
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>

<!-- 底端对齐 -->
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>

</div>

2.1.2 将类名设置在col标签上

<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>

2.2 Horizontal alignment

<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航