BootStrap前端框架

---

目录

BootStrap前端框架

一、Bootstrap是什么？

二、如何使用

1.环境配置

1.1 下载引用

 1.2 直接使用网上的资源

2.常用的css样式

2.1布局容器

​编辑 2.2栅格系统

 2.3 排版

2.4 代码

2.5 表单

2.6 按钮

​编辑

3.组件 

3.1 字体图标

---

一、Bootstrap是什么？

将在网页中常用的组件全部封装，我们可以直接使用。 让后端人员不用专注于页面的设计，专注于业务的开发。

Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton合作基于 HTML 、 CSS 、 JavaScript 开发的简洁、直观、强悍的 前端 开发框架，使得 Web 开发更加快捷。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它 即是由动态CSS 语言 Less 写成。

即只要我们学会了html、css、javascript即可进行快速的入门

Bootstrap的中文官网：Bootstrap中文网

 Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

但是中文文档的案例，有的时候无法显示，因此我们要中英文文档对应使用

Bootstrap的英文官网：Bootstrap · The world's most popular mobile-first and responsive front-end framework.

二、如何使用

1.环境配置

1.1 下载引用

 解压完毕后出现如下目录

 一般fonts不用

直接在html或者jsp中引入  bootstrap.css 和bootstrap.js

值得注意的是bootstrap的js前要提前引入jquery的依赖  否则可能会有些样式无法实现

 1.2 直接使用网上的资源

!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>

注意网上的也要引入jquery的js

2.常用的css样式

2.1布局容器

.container

container-fluid 

 2.2栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

 

栅格参数：

一般电脑就使用col-md 即可 

 

案例

 即列必须在行的包裹下  

 列偏移

其实就是添加了margin的样式

 2.3 排版

一般包含

如果需要使用拷贝即可

2.4 代码

 

表格我们不用这个，我们后面使用Bootstrap table 专门生成表格的

2.5 表单

主要是一些样式 

内联表单

即在一行上

水平表单 

2.6 按钮

提供了一些好看的表单样式 

还可以设置按钮的大小

3.组件 

3.1 字体图标

通过    class是对应图标的名称

一般都是与按钮进行使用或者是表单

案例

<button type="button" class="btn btn-default" >
  <span class="glyphicon glyphicon-align-left" >span>WWWT
button>
 
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" >span> Star
button>

 

 其他的按照官网文档进行使用即可