2021-05-27

Bootstrap概述和布局

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： VS

作者：啵啵

撰写时间：2021年5月27日

注意红色字体

Bootstrap是世界上最受欢迎的响应式、移动设备优先的门户和应用前端框架。

Bootstrap包含了一些供你的项目使用的组件和选项，包括外包裹容器、强大的网格系统、灵活多变的媒体对象和响应式的工具类。

Container容器是窗口布局的最基本元素.

.container, 居中，适配不同的断的 max-width 尺寸。

.container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。

.container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。

Bootstrap概述由JS的代码改变一些页面大小的装换比如页面宽度超出1200像素，它居中对齐，反之展满全屏

如下图：

Bootstrap 推荐全局样式和设置统一, 支持跨浏览器和标准化。

响应式网页设计

    理念：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

    具体的实践方式由多方面组成，包括弹性网格和布局、流式布局、图片、CSS media query的使用等

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

如下图就是一个响应式的布局和效果:

效果前：

 

效果后：

CSS media query 媒体查询

媒体查询，可以针对不同的媒体类型定义不同的样式。

媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

CSS媒体查询的语法是:

效果：

HTML效果

CSS代码：

添加CSS代码后的效果：

第一种

屏幕宽度大于1200px的时候图片和原来一样大小

第二种

屏幕宽度在800px到1200px图片占屏幕的33.33%

第三种

屏幕宽度在567px到768px图片占屏幕的50%

第四种

屏幕宽度在0px到400px的时候图片沾满屏幕的100%

 

以上是我分享bootstrap的一些概念和布局，请多多指教。