flex容器和BootStrap框架

响应式Flex弹性布局

Flex弹性布局是一种CSS布局模式，它使用flex容器（flex container）和flex项目（flex items）来管理元素的排列和对齐。下面是一些关于flex弹性布局的容器属性和项目属性的笔记，使用表格和注释标题以便于理解。

容器属性：

属性名	说明
display	指定元素是否为flex容器，值为flex或inline-flex。
flex-direction	定义flex项目的排列方向，可选值为row（默认值，水平方向）、row-reverse（水平方向，反向排列）、column（垂直方向）和column-reverse（垂直方向，反向排列）。
flex-wrap	控制flex项目是否换行，可选值为nowrap（默认值，不换行）、wrap（换行）和wrap-reverse（反向换行）。
justify-content	对齐flex容器中的项目，可选值为flex-start（默认值，起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间距相等）、space-around（项目两侧的间距相等）和space-evenly（项目之间的间距和两端的间距相等）。
align-items	对齐flex容器中的垂直方向上的项目，可选值为stretch（默认值，项目沿主轴方向拉伸以填满容器）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）和baseline（基线对齐）。
align-content	当项目换行时，对齐各行项目的垂直方向，可选值为与align-items相同。

项目属性：

属性名	说明
flex-grow	指定项目的放大比例，默认为0，值越大占据的空间越多。
flex-shrink	指定项目的缩小比例，默认为1，表示可以缩小到0，值越小缩小越多。
flex-basis	指定项目在主轴方向上的初始尺寸，默认为0，值越大占据的空间越多。它可以设置为具体的长度或百分比。
flex	简写属性，将上述三个属性合并为一个值，格式为：flex: flex-grow flex-shrink flex-basis;。
order	指定项目的排列顺序，默认为0，值越大排列越靠前。可以为负数。

这些属性可以让你轻松地创建灵活的布局，并实现元素的自动分布和对齐。请注意，还有一些其他属性和值可以用于更高级的布局控制和样式设置，这些属性和值可以在官方文档或其他资源中找到。

圣杯布局

圣杯布局是一种常见的网页布局方式，它能够适应多种屏幕大小和设备，并且可以灵活地调整布局以适应不同的设计需求。

圣杯布局通常包括一个父元素（也称为“圣杯”），以及三个子元素（通常称为“左栏”、“中间栏”和“右栏”）。这些元素可以通过CSS来设置位置和大小，以达到所需的布局效果。

使用Flexbox实现圣杯布局的主要步骤如下：

1. 首先需要准备好HTML结构。在HTML文件中，创建一个包含三个子元素的父元素：头部（header）、中间部分（content）和底部（footer）。在中间部分，创建三个子元素：左栏（left）、中间栏（middle）和右栏（right）。

<div class="container">
<div class="header">...</div>
<div class="left">...</div>
<div class="middle">...</div>
<div class="right">...</div>
<div class="footer">...</div>
</div>

1. 使用CSS来设置圣杯布局的样式。在CSS文件中，首先设置父元素的属性。这里，我们将父元素设置为flex容器（flex container），并使用display: flex;属性。然后设置父元素的排列方向（flex-direction），这里我们选择默认的“row”。

.container {
display: flex;
flex-direction: row;
}

1. 接下来，设置中间部分的子元素的属性。将中间部分的宽度设置为100%，并使用flex: 1;属性来让中间部分自动填充剩余空间。这里，我们将中间部分的背景颜色设置为红色（red）以便于观察效果。

.content {
flex: 1;
background-color: red;
}

1. 最后，设置左、中、右三个子元素的属性。将它们的宽度设置为固定的像素值（比如200px），并使用flex-shrink: 0;属性来防止它们被缩小。同时，设置左、右两个子元素的背景颜色为蓝色（blue）和绿色（green），以便于观察效果。

.left, .right {
width: 200px;
flex-shrink: 0;
background-color: blue;
}
.middle {
flex-grow: 1;
background-color: green;
}

这样，我们就得到了一个简单的圣杯布局。当屏幕宽度变化时，中间部分会自适应填充剩余空间，而左、中、右三个子元素的高度会自适应变化以保持整体布局的稳定。

Flex布局子项属

下面是一个关于Flex布局子项属性的介绍表格，包括常见的属性及其功能，方便初学者快速理解：

属性名	功能描述
flex-grow	指定子项的放大比例，用于分配主轴空间
flex-shrink	指定子项的缩小比例，用于应对主轴空间不足的情况
flex-basis	指定子项在主轴方向上的初始尺寸，可理解为“基准尺寸”
flex	简写属性，合并了上述三个属性
order	指定子项在主轴上的排列顺序，数值越小排列越靠前
align-self	用于设置子项在侧轴上的对齐方式，可覆盖主轴对齐方式
justify-self	用于设置子项在主轴上的对齐方式，可覆盖主轴对齐方式
align-content	当子项换行时，对齐各行子项在侧轴上的排列方式
align-items	设置子项在侧轴上的排列方式（单行），可覆盖主轴对齐方式
flex-wrap	控制子项是否换行，有“nowrap”（默认）、“wrap”和“wrap-reverse”三个选项
flex-direction	设置主轴的方向，决定了子项的排列顺序，有“row”（默认）、“row-reverse”、“column”和“column-reverse”四个选项
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap两个属性

以上是Flex布局中常用的子项属性，可以帮助您快速理解和使用Flex布局。但请注意，除了这些属性之外，还有很多其他的CSS属性和值可以用于控制元素的样式和布局。

响应式布局

概念: 响应式布局是一种设计网页的方法，使网页能够自动适应不同设备和屏幕尺寸，以提供更好的用户体验。

属性:

• 流式布局：使用百分比或相对单位（如em）来设置宽度，使元素根据屏幕大小自动伸缩。
• 媒体查询：通过CSS媒体查询，根据屏幕特性应用不同的样式。

媒体查询

概念: 媒体查询是CSS中的一种技术，允许根据设备的特性（如屏幕宽度、分辨率、方向等）应用不同的样式。

使用方法:

css复制代码/\* 基本媒体查询语法 \*/
@media (条件) {
/\* 样式规则 \*/
}
/\* 例子：根据屏幕宽度应用不同的样式 \*/
@media (max-width: 768px) {
body {
font-size: 16px; /\* 在小屏幕下增大字体 \*/
}
}
/\* 例子：根据屏幕方向应用不同的样式 \*/
@media (orientation: landscape) {
.header {
display: none; /\* 在横向屏幕方向下隐藏标题 \*/
}
}
/\* 例子：组合多个条件 \*/
@media (min-width: 600px) and (max-width: 1024px) {
.sidebar {
width: 30%; /\* 在特定屏幕宽度范围内设置侧边栏宽度 \*/
}
}

Bootstrap框架

Bootstrap是一个流行的前端框架，可以帮助你快速搭建响应式网页。以下是一些Bootstrap中常用的概念：

行和列

在Bootstrap中，网页内容通常被划分成”行”和”列”的网格系统。每一行可以包含若干列，这有助于将内容灵活地布局在页面上。

行 (row)

row是Bootstrap中的一个CSS类，用于创建一行网格。它可以包含一组列，以便将内容在水平方向上对齐。

列 (col-*-*)

col类用于定义列，*部分可以是屏幕尺寸，例如sm代表小屏幕，lg代表大屏幕。第二个*部分通常是一个数字，表示占据多少份的宽度，总宽度默认为12份。例如，col-sm-4表示在小屏幕上该列占据4份宽度，总宽度为12份。

列偏移 (col-*-offset-*)

col-offset类可以用于创建列的偏移。例如，col-sm-offset-2表示在小屏幕上将该列向右偏移2份宽度。

列排序 (col-*-push-* 和 col-*-pull-*)

你还可以使用col-push和col-pull类来调整列的排序。例如，col-sm-push-4可以将该列推到右侧，占据4份宽度，而col-lg-pull-8可以将该列推回来，占据8份宽度。

以上是Bootstrap中用于构建响应式布局的一些基本概念，可以帮助你更好地设计网页并确保在不同设备上都有良好的表现。如果需要更多详细信息或示例，可以提出具体问题

响应式栅格

类前缀	栅格系统行为	最大宽度	列数	最大列宽	解释
col-xs	在所有屏幕大小下都生效	无限制	自适应	无限制	col-xs 类前缀用于定义基本的栅格样式，适用于所有屏幕大小，列数自适应。
col-sm	中小屏幕及以上生效	576px	自适应	无限制	col-sm 类前缀适用于中等屏幕及以上，列数自适应，最大宽度为576px。
col-md	中等屏幕及以上生效	768px	自适应	无限制	col-md 类前缀适用于中等屏幕及以上，列数自适应，最大宽度为768px。
col-lg	大屏幕及以上生效	992px	自适应	无限制	col-lg 类前缀适用于大屏幕及以上，列数自适应，最大宽度为992px。
col-xl	超大屏幕生效	1200px	自适应	无限制	col-xl 类前缀适用于超大屏幕，列数自适应，最大宽度为1200px。
col-xxl	超大屏幕生效	1400px	自适应	无限制	col-xxl 类前缀适用于超大屏幕，列数自适应，最大宽度为1400px。
col-1	所有屏幕大小下生效	无限制	1	无限制	col-1 类前缀用于创建具有1列的栅格，适用于所有屏幕大小。
col-2	所有屏幕大小下生效	无限制	2	无限制	col-2 类前缀用于创建具有2列的栅格，适用于所有屏幕大小。
col-3	所有屏幕大小下生效	无限制	3	无限制	col-3 类前缀用于创建具有3列的栅格，适用于所有屏幕大小。
col-4	所有屏幕大小下生效	无限制	4	无限制	col-4 类前缀用于创建具有4列的栅格，适用于所有屏幕大小。
col-6	所有屏幕大小下生效	无限制	6	无限制	col-6 类前缀用于创建具有6列的栅格，适用于所有屏幕大小。
col-12	所有屏幕大小下生效	无限制	12	无限制	col-12 类前缀用于创建具有12列的栅格，适用于所有屏幕大小。

这个表格总结了响应式栅格系统中的常见类前缀和它们的属性。类前缀定义了在不同屏幕大小下如何布局栅格元素。例如，col-md-6 表示在中等屏幕及以上大小下，该栅格元素占据6列，而在小屏幕下，列数会自动调整。这有助于开发人员创建适应不同设备的网页布局。

使用方式

这些框架的使用方式是直接在你需要修改的元素和盒子上使用class命名 可以通过空格隔开以便多次命名来达到自己想要的效果

快速搭建

通过在网页

中粘贴你想要的模块组件和CSS样式，可以快速搭建一个网页。

在此基础上你需要一个容器 和栅格框架，然后在框架里CV你的组件，不断堆叠出一个网页。

具体可以参考s3/前端开发之Bootstrap+Vue框架里的部分作业和案例。

快速搭建Bootstrap框架的Html

请参考案例，主要需要导入三个url

两个Js 和一个 css 完成框架的搭建后，进入网页根据要求进行搭建

基本步骤

首先搭建基础格式，用栅格系统，创建不论如何改变尺寸已然能正常使用的网页框架，基本采用圣杯布局，即两边有空隙，中间内容

然后复制相关组件完成导航栏，左栏，右栏，内容的基础框架。

在此基础上可以继续使用栅格系统布局，然后复制组件，不断精进网页。

其中的重点我认为是栅格系统，熟练掌握栅格系统，可以让组件出现在你想要出现的位置，用到不同尺寸对一个框内的分布会产生不同的适应，比如col-md-3代表这个框在整体（12）格的基础上只会占3格。这一行则在row里生效。

比如下方实例、

row

col-md-3

col-md-6

col-md-3

当实现这样的格式的时候，在一行（row）中，左边的会占用3格中间占用6格右边占用3格最终沾满12格。

超出格的时候会自动取消，没有用满格的情况下也能正常运行会多余空出。