bootstrap 学习（一）

合集 - 前端(1)

1.bootstrap 学习（一）2023-05-17

收起

一、Bootstrap 简介

1、什么是 Bootstrap

　　Bootstrap 是一个用于快速开发 web 应用程序和网站的开源的 UI 前端框架。Bootstrp是基于HTML、CSS、JS 的。

2、Bootstrap 的好处

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

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

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

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

它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。

3、Bootstrap 包含的内容

1、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

2、组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

3、JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

4、获取 bootstrap

官网：http://getbootstrap.com/

中文网：http://www.bootcss.com/

二、全局Css

1、容器

1、固定宽度

用法：bootstrap已经为我们定义好了一个css的类container，使用container类来定义固定宽度并支持响应式布局的容器.

在一定的设备尺寸下面宽度固定，在不同的设备尺寸能自适应。

 

三、栅格系统

1、什么是栅格系统

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

 

四、组件与插件

 1、为什么要使用组件和插件

　　组件和插件是bootstrap为方便使用者调用一些常用的样式组合而设计的一套直接可使用的标签组合和js插件。