第51天：Bootstrap框架

Bootstrap的简介和入门

        Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。

        它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。

        它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。

        它提供了响应式布局的支持，使得页面能够自适应不同的设备和屏幕尺寸。

        此外，Bootstrap还提供了丰富的UI组件（如导航栏、按钮、表单、模态框等），使开发人员能够轻松地在项目中使用这些现成的组件。  

        总而言之，Bootstrap是一个强大的开发工具，可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。

        Bootstrap引入

        中文文档查询：Bootstrap中文网

        下载

        BootCDN.cn

        BootCDN.cn 的小伙伴为 Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootCDN.cn 提供的链接即可。

布局容器

        布局容器是指用于组织和排列其他元素的容器或容器类。在前端开发中，常用的布局容器有以下三种：

        块级布局容器（Block-Level Layout Container）

        块级布局容器会生成一个块级框，它可以使用display属性设置为"block"、"flex"或者"grid"。块级容器会独占一行，并通过CSS属性进行自上而下的垂直排列。

        行内布局容器（Inline Layout Container）

        行内布局容器会生成一个行内框，它可以使用display属性设置为"inline"或者"inline-block"。行内容器会水平地从左到右排列，直到行的边缘，然后自动换行。   

        弹性布局容器（Flexbox Layout Container）

        弹性布局容器是CSS3中的一种新型布局技术，通过定义父元素作为弹性容器，将其子元素称为弹性项。弹性容器通过一系列的属性灵活地控制和调整弹性项的尺寸和位置。常见的属性包括：flex-direction、justify-content、align-items等。弹性布局容器的主要好处是可以实现响应式布局和灵活的排列方式。

        

栅格系统

        例：

        知识点： 

// 写一个 row 就是将所在区域划分成 12 份

// 写一个 col-md-6 获取想要的份数

栅格化参数

超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

  

按钮与图片

        按钮颜色

（默认样式）Default


（首选项）Primary


（成功）Success


（一般信息）Info


（警告）Warning


（危险）Danger


（链接）Link

        按钮大小

  （大按钮）Large button
  （大按钮）Large button


  （默认尺寸）Default button
  （默认尺寸）Default button


  （小按钮）Small button
  （小按钮）Small button


  （超小尺寸）Extra small button
  （超小尺寸）Extra small button

        图片形状

        图片颜色

...
...
...
...
...