名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪） 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder）

目录

三、BootStrap1、BootStrap-初体验2、BootStrap-导航3、BootStrap-博客案例①栅格系统②列偏移③面板

4、BootStrap-登录案例5、BootStrap-后台管理案例6、BootStrap-总结①图标②jQuery

7、JavaScript的引入①HTML、CSS和JavaScript都是编程语言吗？②HTML 和 CSS 与编程语言的区别

三、BootStrap

Bootstrap 是一个开源的前端框架，主要用于开发响应式布局、移动设备优先的网页应用。它包含了一套用于网页和应用开发的 HTML、CSS 和 JavaScript 的工具集。Bootstrap 提供了丰富的预设组件，如按钮、表单、导航条、模态框、轮播图等，以及对 JavaScript 插件的支持，这些都可以帮助开发者快速设计和定制现代化的网页界面。

Bootstrap 的主要特点包括：

响应式布局：Bootstrap 使用基于栅格系统的布局，可以自动适应不同屏幕大小的设备，从而确保网页在手机、平板及桌面显示器上均能良好展示。移动设备优先：框架从移动设备优先的角度出发设计，意味着所有的开发都以适应小屏幕为基础，然后逐步增加更多的样式以适应更大屏幕。易于使用：即使没有深入的前端知识，开发者也可以通过使用 Bootstrap 提供的 CSS 类和组件，快速搭建漂亮且功能强大的界面。可定制性：通过定制 Bootstrap 的 LESS 或 SASS 文件，开发者可以创建符合自己品牌风格的独特设计。社区支持：作为一个流行的开源项目，Bootstrap 拥有庞大的社区，提供了大量的文档、教程和第三方插件，可以帮助开发者解决遇到的问题。

1、BootStrap-初体验

Bootstrap是别人已经写好的CSS样式，我们如果想使用它：

下载BootStrap 步骤： 1.BootStrap官网 2.下载 使用

把下载好的Bootstrap放到新建的static中plugins文件夹中 在页面上引用BootStrap

编写HTML时，按照BootStrap的规定来编写 + 自己的需求来修改设计。

案例：使用bootStrap来实现按钮。

2、BootStrap-导航

导航（Navigation）是指使用CSS样式来创建和设计网页上的导航菜单。导航菜单是用户与网站互动的主要方式之一，它提供了一个结构化的链接列表，使用户能够轻松访问网站的不同部分。通过CSS，开发者可以对这些导航链接的布局、颜色、大小、悬停效果等进行定制，以提升用户体验和网站的美观性。

导航的主要目的包括：

布局：确定导航菜单的位置（如顶部、侧边或底部）以及其布局（水平或垂直）。样式：自定义链接的字体、颜色、背景等属性，以及悬停（hover）和激活（active）状态下的样式变化。响应式设计：通过媒体查询等技术，确保导航菜单在不同设备和屏幕尺寸上都能良好显示和功能正常，提升移动设备上的用户体验。交互性：利用CSS伪类和转换（transitions）、动画（animations）等特性，为导航菜单添加动态效果和视觉反馈。

导航栏通常包含指向网页不同部分的链接，可以帮助用户快速找到所需信息，我们可以使用CSS样式来控制网页导航栏的样式和布局。

1.使用CSS控制导航栏样式

可以使用以下CSS属性来控制导航栏的样式：

display: 定义导航栏的布局方式，常见的值包括：

inline-block: 将导航栏中的元素排列成一行，每个元素之间有间隙。block: 将导航栏中的元素排列成一个块，占据整个容器宽度。 width: 定义导航栏的宽度。height: 定义导航栏的高度。margin: 定义导航栏的边距。padding: 定义导航栏的内边距。text-align: 定义导航栏中链接的文本对齐方式。background-color: 定义导航栏的背景颜色。border: 定义导航栏的边框样式。

2.使用CSS控制导航栏布局

可以使用以下CSS属性来控制导航栏的布局：

float: 将导航栏浮动到左侧或右侧。position: 将导航栏定位在页面中的特定位置。flexbox: 使用 flexbox 布局来控制导航栏中元素的排列方式。

案例1 简易导航

案例2 网站菜单

3、BootStrap-博客案例

①栅格系统

在HTML和CSS中，栅格系统是一种用于创建页面布局的方法，它通过将页面分割成多个行和列的网格来实现。这种方法提供了一种快速、灵活且易于使用的方式来创建响应式的页面布局，使得网页能够适应不同大小的屏幕和设备。

栅格系统通常由以下几个核心概念组成：

容器（Containers）：容器是栅格系统的最外层，用于包含和限制内容的宽度，使内容在大屏幕上居中显示。行（Rows）：行是容器内的水平区域，用于包含列。在多数栅格系统中，行用于清除内部列的浮动，确保列能够正确地排列。列（Columns）：列是行内的垂直区域，用于实际放置内容。在栅格系统中，页面被分割成多个列，每一列都有一定的宽度或占比。断点（Breakpoints）：断点是栅格系统中用于响应式设计的关键概念，它指的是在特定的屏幕宽度或设备类型上应用不同的样式规则。通过使用断点，开发者可以为不同大小的屏幕定制布局。

栅格系统可以手工创建，但现在大多数人会使用现成的CSS框架，如Bootstrap、Foundation或Tailwind CSS，这些框架提供了预定义的栅格系统和一系列响应式工具，极大地简化了响应式网页设计的过程。

使用栅格系统的优点包括：

易于使用：只需通过添加预定义的类到HTML元素，就可以创建复杂的布局。 灵活性：可以很容易地调整布局以适应不同的屏幕尺寸。 一致性：通过使用统一的栅格结构，可以在整个项目中保持布局和间距的一致性。 响应式设计：栅格系统天生支持响应式设计，使得网站能够自动适应各种设备。 分类

响应式，根据屏幕宽度不同

.col-sm- 750px

.col-md- 970px

.col-lg- 1170px

非响应式

②列偏移

CSS中的列偏移（Column Offset）是一种常用于响应式网页设计的技术，它允许开发者在布局中创建额外的空间或调整元素的位置，而不需要改变HTML结构。这通过使用特定的类或样式规则来实现，使元素向右移动一定数量的列。列偏移通常与网格系统一起使用，如Bootstrap或其他CSS框架提供的网格系统。

在使用列偏移时，你可以指定一个元素应该向右移动多少列的空间。例如，在Bootstrap中，如果你想要一个元素向右偏移两列，你可以添加一个类似于col-md-offset-2的类（这里的md表示在中等屏幕尺寸下生效）。这样，该元素会留出两列宽的空白，然后才显示它自己的内容，从而实现了偏移效果。

列偏移的主要用途包括：

改善布局的外观：通过在元素间添加空白或调整元素的位置，可以使页面布局看起来更加平衡和美观。创建间距：在不同的元素之间创建额外的空间，而不需要添加额外的空白元素。调整对齐：可以用来调整元素的对齐方式，特别是在复杂的布局中。

使用列偏移时，要注意不要造成内容的重叠或是将元素推出其容器元素的界限，这样页面就达不到之前预期的效果了。

案例：简易博客

1.框架图 2.代码实现

3.实现效果

③面板

4、BootStrap-登录案例

实例：模仿下图，借助BootStrap实现一个类似的登录窗口。

1.实现思路：

宽度 + 居中（区域居中） 内边距 借助BootStrap中的表单，例如：

2.代码实现：

5、BootStrap-后台管理案例

实例：实现一个类似下图的后台管理系统界面。

1.实现思路

导航新建，按钮表格

2.代码实现