python_fullstack前端(六)-Bootstrap

前端初识

六、前端初识——Bootstrap

1、Bootstrap 简介

①什么是Bootstrap
  • Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
  • 它是为实现快速开发Web应用程序而设计的一套前端工具包。
  • 它支持响应式布局,并且在V3版本之后坚持移动设备优先。
②为什么使用Bootstrap
  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。
  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
  • 响应式设计
    • 它为开发人员创建接口提供了一个简洁统一的解决方案
    • 它包含了功能强大的内置组件,易于定制
    • 它还提供了基于 Web 的定制
    • 它是开源的
③Bootstrap包的内容
  • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
  • CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  • 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
  • JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
  • 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
④Bootstrap下载
⑤Bootstrap包的目录结构 & 依赖处理
  • 目录结构
bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS压缩文件
    └── npm.js
  • 依赖处理
    由于Bootstrap的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证Bootstrap相关组件运行正常。

2、Bootstrap CSS 概览

①Bootstrap CSS作用

排版、按钮、表格、表单、图片等我们常用的HTML元素,Bootstrap中都提供了全局样式。我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式,从而使我们的页面更美观和谐。

②标题相关
//标题
<h1>一级标题36px</h1>
<h2>二级标题30px</h2>
<h3>三级标题24px</h3>
<h4>四级标题18px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>
<!--除了使用h标签,Bootstrap内置了相应的全局样式-->
<!--内联标签应用标题样式-->
<span class="h1">一级标题36px</span>
<span class="h2">二级标题30px</span>
<span class="h3">三级标题24px</span>
<span class="h4">四级标题18px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>

//副标题
<h1>一级标题<small>一级标题的副标题</small></h1>
③文本对齐
//文本对齐
<p class="text-left">文本左对齐</p>
<p class="text-right">文本右对齐</p>
<p class="text-center">文本居中对齐</p>
④文本大小写
//文本大小写
<p class="text-lowercase">文本全部小写</p>
<p class="text-uppercase">文本全部大写</p>
<p class="text-capitalize">文本首字母大写</p>
⑤表格
Class描述
.table-striped条纹状表格
.table-bordered带边框的表格
.table-hover鼠标悬停变色的表格
.table-condensed紧缩型表格
.table-responsive响应式表格(可根据浏览器窗口大小显示表格滚动条)
⑥状态类
Class描述
.active鼠标悬停在行或单元格上时所设置的颜色
.success标识成功或积极的动作
.info标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作
⑦表单
  • 内联表单
  • 表单状态
  • 带图标的表单
⑧按钮
  • 按钮种类
<a class="btn btn-default" href="http://www.baidu.com" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
  • 按钮样式
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
  • 按钮大小
<p>
  <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
  <button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
  <button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
  <button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
⑨图片
  • 交互式图片
    <img src="..." class="img-responsive" alt="Responsive image">

  • 图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
⑩辅助类
  • 文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
  • 背景颜色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
  • 关闭按钮
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  • 下拉三角
    <span class="caret"></span>
  • 快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
  • 内容块居中
    <div class="center-block">...</div>
  • 清除浮动
<!-- Usage as a class -->
<div class="clearfix">...</div>
  • 显示与隐藏
<div class="show">...</div>
<div class="hidden">...</div>

3、常用Bootstrap组件

  • Glyphicons 字体图标、下拉菜单、按钮组、按钮式下拉菜单、输入框组、导航、导航条、路径导航、分页、标签、徽章、巨幕、页头、缩略图、警告框、进度条、媒体对象、列表组、面板、具有响应式特性的嵌入内容

4、响应式开发

①为什么要进行响应式开发?

随着移动设备的流行,网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发。

②什么是响应式?

利用媒体查询,让同一个网站兼容不同的终端(PC端、移动端)呈现不同的页面布局。

③CSS3@media查询
  • 用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
  • 常见属性
device-width, device-height 屏幕宽、高
width,height 渲染窗口宽、高
orientation 设备方向
resolution 设备分辨率
  • 语法
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
  • 不同的媒体使用不同的stylesheet
    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
④viewport
  • 手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
  • 设置viewport
    • 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。

5、Bootstrap 栅格系统

①栅格

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

②什么是网格(Grid)

简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。

③什么是 Bootstrap 网格系统(Grid System)
  • Bootstrap 官方文档中有关网格系统的描述:Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
  • 简单理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。
④移动设备优先策略
  • 内容:决定什么是最重要的。
  • 布局:
    • 优先设计更小的宽度。
    • 基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。
  • 渐进增强:随着屏幕大小的增加而添加元素。
  • 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
⑤Bootstrap 网格系统(Grid System)的工作原理
  • 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
  • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
  • 使用行来创建列的水平组。
    • 内容应该放置在列内,且唯有列可以是行的直接子元素。
    • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
    • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
    • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
⑥媒体查询
  • 媒体查询是非常别致的”有条件的 CSS 规则”。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。
  • Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值。
/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }
  • 我们有时候也会在媒体查询代码中包含 max-width,从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }  
  • 媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。在上面的案例中,设置了下列的规则:
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。
⑦网格选项
  • 下表总结了 Bootstrap 网格系统如何跨多个设备工作:
    这里写图片描述

  • 基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....
⑧响应式的列重置
⑨偏移列
  • 偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
⑩嵌套列
  • 为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。
⑪列排序
  • Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。

①Glyphicons 字体图标(可以用fontawesome代替Bootstrap的字体图标 https://fontawesome.com/
  • 所有可用的图标
  • 如何使用
  • 实例
②下拉菜单
  • 实例
  • 对齐
  • 标题
  • 分割线
  • 禁用的菜单项
③按钮组
  • 基本实例
  • 按钮工具栏
  • 尺寸
  • 嵌套
  • 垂直排列
  • 两端对齐排列的按钮组
④按钮式下拉菜单
  • 单按钮下拉菜单
  • 分裂式按钮下拉菜单
  • 尺寸
  • 向上弹出式菜单
⑤输入框组
  • 基本实例
  • 尺寸
  • 作为额外元素的多选框和单选框
  • 作为额外元素的按钮
  • 作为额外元素的按钮式下拉菜单
  • 作为额外元素的分裂式按钮下拉菜单
  • Multiple buttons
⑥导航
  • 标签页
  • 胶囊式标签页
  • 两端对齐
  • 禁用的链接
  • 添加下拉菜单
⑦导航条
  • 默认样式的导航条
  • 品牌图标
  • 表单
  • 按钮
  • 文本
  • 非导航的链接
  • 组件排列
  • 固定在顶部
  • 固定在底部
  • 静止在顶部
  • 反色的导航条
⑧路径导航(面包屑)
⑨分页
  • 默认分页
⑩标签、徽章、巨幕
⑪页头
⑫缩略图
  • 默认样式的实例
  • 自定义内容
⑬警告框
  • 实例
  • 可关闭的警告框
  • 警告框中的链接
⑭进度条
  • 基本实例
  • 带有提示标签的进度条
  • 根据情境变化效果
  • 条纹效果
  • 动画效果
  • 堆叠效果
⑮媒体对象
  • 默认样式
  • 媒体对象列表
⑯列表组
  • 基本实例
  • 徽章
  • 链接
  • Button items
  • 被禁用的条目
  • 情境类
  • 定制内容
⑰面版
  • 基本实例
  • 带标题的面版
  • 带注脚的面板
  • 情境效果
  • 带表格的面版
  • 带列表组的面版
⑱具有响应式特性的嵌入内容
⑲Well
  • 默认效果
  • 可选类/样式

7、前端插件合集

①FontAwesome字体
②SweetAlert系列
③Toastr
④jQueryLazyload懒加载
  • 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>懒加载示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>
⑤后台管理模板

8、Bootstrap实例精选

①封面图
②Carousel
③博客页面
④控制台
⑤登录页
⑥Offcanvas
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值