OMG前端之Boostrap的使用
Boostrap介绍
- 是目前很受欢迎的前端框架。
- 基于 HTML、CSS、JavaScript的，在jQuery的基础上进行了更为个性化的完善
- 简洁灵活，使得 Web 开发更加快捷
Bootstrap中文官方网站：http://v3.bootcss.com/
Boostrap的准备
1下载
2引用
将压缩文件解压到常用目录，我们主要引用CSS文件夹中的bootstrap.min.css文件
3Bootstrap基本模板
注意：
- 用到什么文件传什么文件，例如min.css、font字体、min.jss
- 如果浏览器小于IE9的版本，加载以下文件
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
- 首先引用jQuery，再引用Bootstrap，Bootstrap基于jQuery开发的
- Bootstrap版本应该与jQuery版本所对应，保证Bootstrap正常使用
4修改Pycharm中初始页面
如果每次创建一个新的页面时，都要手动去输入一些内容，不如直接设置初始页面中显示得内容
Bootstrap排版与链接
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
- 为
body元素设置background-color: #fff; - 使用
@font-family-base、@font-size-base和@line-height-base变量作为排版的基本参数 - 为所有链接设置了基本颜色
@link-color，并且当链接处于:hover状态时才添加下划线
这些样式都能在 scaffolding.less 文件中找到对应的源码。
Boostrap的基础使用
viewport 元数据标签
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
<div class="container"> 放在开头，将需要展示的内容写在这里面 ... </div>
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，行数没有限制
行（row）：在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
列（column）：通过“行”在水平方向创建一组“列”，内容应当放置于“列”内，并且，只有“列”可以作为行”的直接子元素。
媒体查询
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 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) { ... }
栅格系统
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
位置移动的方法
列偏移： .col-xx-offset-数字（1~12）为当前元素增加了左侧的边距（margin） 列排序： .col-md-pull-数字 向右 .col-md-push-数字 向左
排版
标题
标题样式.h1~6<h1~6>
副标题.small<small> <h1~6> Bootstrap heading <small>Secondary text</small></h1~6>
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。 .lead 类 让段落突出显示 <del> 标签 被删除的文本 <s> 标签 没用的文本 <ins>标签 插入的文本 <u>标签 带下划线的文本 <small>标签 小号文本 <em>标签 斜体 <strong>标签 着重 .text-xxx(left、center、right、justify、nowrap) 文本对齐 .text-xxx(lowercase、uppercase、capitalize) 改变大小写
缩略语
<abbr title="attribute">attr</abbr> 基本的缩略语 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 首字母缩略语
表格
.table-striped 可以给 <tbody> 之内的每一行增加斑马条纹样式
.table-bordered 为表格和其中的每个单元格增加边框
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
状态类
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列，将label、input、span包裹起来组成一个组。
from-group
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
排列方式
.form-inline： 水平排列 .form-horizontal: 垂直排列，label框和input框左右分开放
按钮
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
样式
.btn-default 首选（深蓝色）
.btn-success 成功（绿色）
.btn-info 一般信息（浅蓝色）
.btn-warning 警告（橙色）
.btn-danger 危险（橙色）
尺寸
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮
状态显示
.active 激活状态
disabled="disabled" 禁用状态
.disabled 为基于<a>元素创建的按钮添加
块级
display：block
图片
图片布局
img-responsive .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放
.center-block 水平居中
形状
img-rounded：方形
img-circle：圆形
img-thumbnail：方形有空隙
居中处理
水平居中
块级标签
.center-block 不涉及到列的居中 本质上就是 margin: 0 auto
.col-centered {float: none;margin: 0 auto;} 我们自定义的居中，在涉及到列的居中时使用
内联标签
.text-center 文本居中或displayy:inline
垂直居中
块级标签
.vertical-center{display:fex;align-items:center;} 垂直居中
Boostrap的组件
Boostrap之jQuery插件
Boostrap应用
1导航条
2标签页
3左侧菜单
4面板
5巨幕
6进度条
前端插件
Font Awesome
图标插件
直接将文件夹引入就可以
SweetAlert2
弹窗插件
引入dit文件夹、js
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>
浙公网安备 33010602011771号