Bootstrap简介

什么是Bootstrap？

bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。

Bootstrap官网：Bootstrap 4 概览_Bootstrap中文网

为什么要使用Bootstrap

        移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式

        浏览器支持：所有的主流浏览器都支持Bootstrap

        容易上手：只要你能具备HTML和CSS的基础知识，您就可以开始学习Bootstrap

        响应式设计：Bootstrap的响应式CSS能够自适应与台式机、平板电脑和手机

        他为开发人员创建接口提供了一个简洁统一的解决方案

        它包含了功能强大的内置组件，易于定制

        它还提供了基于Web的定制

        它是开源的：Bootstrap是完全开源的，代码的托管、开发和维护都在GitHub平台上完成

Bootstrap框架的组件

        基本结构

Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构

        Css样式库

Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class。

        布局组件

Bootstrap包含了丰富的组件库，提供了十几个可重用的组件。

        插件

Bootstra提供了一些基于Jquery（一个用于简化javascript编程的库）构建的可选插件。

布局容器

容器时Bootstrap中最基本的布局元素，容器用于在其中容纳，填充一些内容，以及有时需要使内容居中。在实现Bootstrap页面布局容器之前，需要先了解设备屏幕的尺寸。

• .col- 针对所有设备

• .col-sm- 平板 - 屏幕宽度等于或大于 576px

• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

  .container容器

  他在每个响应点处设置了一个max-width最大宽度

  .container-fluid容器

  它在每个相应断点处设置布局容器的宽度为100%

栅格系统的基本使用

栅格系统

按照不同屏幕划分为1~12 等份。

行(row) 必须放到container布局容器里面

我们实现列的平均划分 需要给列添加类前缀

xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；

列(column)大于 12，多余的“列(column)”所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的 padding 。

可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"

栅格系统的基本使用方式

Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。

行必须包含在布局容器中，以便为其赋予合适的排列和内补。

通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。

行使用样式.row，列使用样式.col-，内容应当放置于列内，列大于12时，将会另起一行排列

组件介绍

什么是组件

        组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。

        组件是构成页面中独立结构单元，是对结构的抽象，他主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。

        组件可以有自己的属性和方法，不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。

组件的主要优势

        组件可以复用

        提高开发效率

        组件时模块化的

        降低代码之间的耦合程度

        代码更易维护和管理

        超链接按钮添加disabled属性是不起作用的 ，需要添加disabled类

VsCode中 类名提示插件

扩展名：IntelliSense for CSS class names in HTML

直接安装即可使用