Bootstrap教程

Bootstrap教程

一、简介

概述

Bootstrap 是一套现成的 CSS 样式集合（做得还是很友好的）。是两个推特的员工干出来的。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。2011年，twitter 的"一小撮"工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集 -- BootStrap。Bootstrap 由 MARK OTTO 和 Jacob Thornton 所设计和建立，在 github上开源之后，迅速成为该站上最多人 watch&fork 的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap 建设的网站：界面清新、简洁;要素排版利落大方。Bootstrap特别适合那种没有设计师的团队（甚至说没有前端的团队），可以快速的出一个网页。

特点

  1. 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。
  2. 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设
    计，12列格网，样式向导文档。
  3. 自定义 JQuery 插件，完整的类库，bootstrap3 基于Less，bootstrap4 基于 Sass 的 CSS 预处理
    技术
  4. Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，
    给用户提供更好的视觉使用体验。
  5. 丰富的组件

二、下载与使用

下载地址： http://getbootstrap.com/
引入文件：

  • 拷贝 jquery.js到项目 js 中
  • 拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中
  • 拷贝 dist/js 中的 bootstrap.min.js 到项目的 js 中

在HTML中的模板为：









Bootstrap的HTML标准模板



Hello, world!







三、布局容器和栅格网格系统

布局容器：

  • .container 类：用于固定宽度并支持响应式布局的容器。
  • .container-fluid类：用于100% 宽度，占据全部视口（viewport）的容器

栅格网格系统

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

注意：列总和数不能超12，大于12，则自动换到下一行。

四、栅格参数

超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px (一个列的每边分别 15px） 30px（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

//栅格基本结构






...


....

五、列偏移

语法：在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)

实例：



居第1列

居第2列

//向右偏移8个格子
居第11列

居第12列


六、列排序

语法：

  • 添加类名 col-md-push-* (其中星号代表移动的列组合数）
  • 添加类名 col-md-pull-* (其中星号代表移动的列组合数）

注意：pull往左、push往右

实例：



1列

1列


七、列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然
后在这个行容器中插入列.

实例：



我的里面嵌套了一个网格

9

3



我的里面嵌套了一个网格

10

2




八、表格

在使用Bootstrap的表格过程中，只需要 添加对应的类名就可以得到不同的表格风格。

基础样式：

  • table：基础表格

附加样式：

  • table-striped：斑马线表格
  • table-bordered：带边框的表格
  • table-hover：鼠标悬停高亮的表格
  • table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

针对tr、th、td样式 提供了五种不同的类名，每种类名控制了行的不同背景颜色

类 描述 实例
.active 将悬停的颜色应用在行或者单元格上 #f5f5f5
.success 表示成功的操作 #dff0d8
.info 表示信息变化的操作 #d9edf7
.warning 表示一个警告的操作 #fcf8e3
.danger 表示一个危险的操作 #f2dede

实例：

















JavaSE 数据库 JavaScript
面向对象 oracle json
数组 mysql ajax

九、表单

表单中常见的元素主 要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

文本输入框

表单控件： .form-control .input-lg（较大） .input-sm（较小）





下拉选择框

多行选择设置：multiple="multiple"




单选按钮

  • 垂直显示： .radio

  • 水平显示： .radio-inline














复选按钮

  • 垂直显示： .checkbox

  • 水平显示： .checkbox-inline














按钮

  • 基础样式：.btn

  • 附加样式：.btn-primary .btn-info .btn-success .btn-warning .btn-danger .btn-link .btn-default

  • 按钮禁用：.disabled

  • 按钮大小：.btn-lg、.btn-sm 或 .btn-xs








十、表单布局

Bootstrap 提供了下列类型的表单布局：

  • 垂直表单（默认）
  • 内联表单
  • 水平表单

垂直表单

创建基本表单的步骤：

  1. 向父<form>元素添加 role="form"。
  2. 把标签和控件放在一个带有 class .form-group 的<div>中。这是获取最佳间距所必需的。
  3. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

实例：









这里是块级帮助文本的实例。







内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向<form> 标签添加class .form-inline。














水平表单

如需创建一个水平布局的表单，请按下面的几个步骤进行：

  1. 向父 <form> 元素添加 class .form-horizontal。

  2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。

  3. 向标签添加 class .control-label。


























十一、布局组件

图标可查阅阿里巴巴矢量图库：https://www.iconfont.cn/

注：其余组件可参照官方文档

十二、插件

Bootstrap 自带 12 种 jQuery 插件，扩展了功能。所有的插件依赖于 jQuery，必须在插件文件之前引用 jQuery。
注：需要使用插件时查阅文档即可很快实现

posted @ 2023-03-19 15:39  Destiny!  阅读(76)  评论(0)    收藏  举报