第十一章 前端开发-bootstrap
11.5.0 bootstrap
11.5.1 bootstrap的介绍和响应式
http://book.luffycity.com/python-book/95-bootstrap/951-bootstrapde-jie-shao.html
CSS3 的 @media 查询
定义和使用
使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面,这对调试来说是一个极大的便利。
CSS 语法:
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒体类型(mediaType ) 类型有很多,在这里不一一列出来了,只列出了常用的几个。
all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕,平板电脑,智能手机等。(最常用) speech 应用于屏幕阅读器等发声设备 媒体功能(media feature) 媒体功能也有很多,以下列出常用的几个
值 描述
max-width:定义输出设备中的页面最大可见区域宽度 min-width:定义输出设备中的页面最小可见区域宽度
准备工作1:设置Meta标签
首先我们在使用 @media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
这段代码的几个参数解释:
width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面) 其他还有很多参数呢,想要了解的童鞋可以直接去百度
准备工作2:加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 @media ,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
准备工作3:设置IE渲染方式默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8 为了防止这种情况,我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。
代码实例
1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
从上面的代码可以看出,媒体类型是屏幕(screen),使用 一个 and 连接后面的媒体功能,这里写的是 max-width:300px ,也就是说,当屏幕的最大宽度 小于等于 300px 的时候,就应用花括号里面的样式。
2、当文档宽度大于等于300px 的时候显示的样式
@media screen and (min-width: 300px){
body {
background-color:lightblue;
}
}
注意,这里的媒体功能使用的是 min-width 而不是 max-width,我已经标红高亮显示出来了。
3、当文档宽度大于等于 300px 并且小于等于500px ( width >=300 && width <=500)的时候显示的样式
@media screen and (min-width:300px) and (max-width:500px) {
/* CSS 代码 */
}
注意,这里使用了两个 and ,用来连接 两个媒体功能,一个用于限制最小,一个用于限制最大。
※ 需要注意的地方(划重点)
1、通过灵活应用以上技巧,开发出一个响应式页面,还不是近在咫尺的感觉。
2、不要被 min-width 和 max-width 所迷惑,初学者很容易误以为 min-width 的意思是小于xxx的时候才应用,然而这就陷入误区了,其实它的意思是:当设置了 min-width 的时候,文档的宽度如果小于设置的值,就不会应用这个区块里的CSS样式,所以 min-width 它才能实现大于等于设置的值得时候,才会应用区块里的CSS样式,max-width 也是如此。
3、或者这样想想,先看代码,这句代码的意思是宽度大于等于 300px ,小于等于 500px ( width >=300 && width <=500)的时候应用样式
@media screen and (min-width:300px) and (max-width:500px) {
/* CSS 代码 */
}
min-width:300px 的作用是当文档宽度不小于 300px 的时候就应用 {} 里的CSS代码块,即大于等于 300px,max-width:500px 的作用是当文档宽度不大于 500px 的时候就应用{} 里的CSS代码块,即小于等于 500px
11.5.2 bootstrap的下载和基本使用
一. 使用Bootstrap第一步,先将生成环境的Bootstrap下载下来。然后将下载,然后引入到自己建好的当前目录中 https://www.bootcss.com/
二、点到起步中的基本模板
将看到的整段代码复制粘贴到建好的index.html文件中
官网明确表示:
使用此给出的这份超级简单的HTML模板,或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
本来是想在这里写Book,但发现官网上的语言组织的更牛逼!接下来就跟着我一起进入Bootstrap的css样式、组件、插件。
11.5.2 bootstrap的全局css样式
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
实例: 官方网址:https://v3.bootcss.com/css/#type
1.容器
.container 固定宽度容器
.container-fluid 100%宽度的容器
2.栅格系统
.row
.col-lg- .col-md- .col-sm- .col-xs
3.文本颜色
text-muted
text-primary
text-success
text-danger
text-waring
text-info
4.背景颜色
bg-primary
bg-success
...
5.按钮
btn btn-default
btn btn-link
btn btn-success
btn btn-primary
...
6.对齐
.text-left
.text-right
.text-center
.text-justify 两端对齐 适应于英文
7.图片设置
.img-rounded
.img-circle
.img-thumbnail
8.三角符号
.caret
9.关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
10.显示和隐藏内容
show/hidden
11.快速浮动
.pull-left 左浮动
.pull-right 右浮动
清除浮动
.clearfix
12.内容块居中
.center-block
13.表格
给table添加.table的类。默认给表格赋予少量的内补和边框
.table-striped 条纹状的
.table-bordered 带边框
.table-hover 状态类
14.表单form
每组表单控件都会添加一个.form-group类中,表单控件通常都由.form-control
11.5.3 bootstrap的栅格系统
原理:使用了@media 查询
https://v3.bootcss.com/css/#overview-container
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列**
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
列偏移
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail" style="height: 366px"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail" style="height: 366px"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail" style="height: 366px"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail" style="height: 366px"></div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
</body>
</html>
11.5.4 bookbootstraptrap的组件
网址
https://v3.bootcss.com/components/
分类 在bootstrap中 凡是看到data-xxx的属性, 表示与js有很大关联
注意:
- 不要随意修改bootstrap固有的类名,如果想修改样式,自己添加对应的类名,小心选择器的优先级,实在不行: !important; 行内样式
- 字体图标注意:不要和其它的组件混合使用,嵌套一个span标签,加上对应字体图标的类名
11.5.5 JavaScript 插件
网址
https://v3.bootcss.com/javascript/
分类
第十一章 前端开发-bootstrap的更多相关文章
- 第十一章 前端开发-JavaScript
第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...
- 第十一章 前端开发-css
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
- 第十一章 前端开发-html
第十一章 前端开发-html 1.1.0 html:超文本标记语言 html特征:(HyperText Markup Language) 对换行的空格不敏感 空白折叠 标签:有称为标记 双闭合标签 & ...
- 第十一章 前端开发-jQuery
11.4.0 jQuery 11.4.1 基本知识 定义: jQuery是一个快速,小巧,功能丰富的JavaScript库 作用:它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, ...
- 前端开发 - Bootstrap
一.bootstrap简介 插件 == js 在js 的基础上写了一些功能 一个插件就是一个功能/方法组件 = js + css + html 组件包含着插件 官网: http://www.bootc ...
- python 之 前端开发(HTTP协议、head标签、img标签、a标签、列表标签)
第十一章前端开发 11.1 HTTP 1.1引入了许多关键性能优化:keepalive连接,请求流水线,chunked编码传输,字节范围请求等 1.keepalive连接: 1.长连接允许HTTP设备 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- 【圣诞特献】Web 前端开发精华文章推荐【系列二十一】
<Web 前端开发精华文章推荐>2013年第九期(总第二十一期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 ...
- 《编写高质量代码-Web前端开发修改之道》笔记--第二章 团队合作
本章内容: 揭秘前端开发工程师 欲精一行,必先通十行 增加代码的可读性--注释 提高重用性--公共组件和私有组件的维护 冗余和精简的矛盾--选择集中还是选择分散 磨刀不误砍柴工--前期的构思很重要 制 ...
随机推荐
- 解MySQL基准测试和sysbench工具
前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...
- 【LOJ】#3043. 「ZJOI2019」线段树
LOJ#3043. 「ZJOI2019」线段树 计数转期望的一道好题-- 每个点设两个变量\(p,q\)表示这个点有\(p\)的概率有标记,有\(q\)的概率到祖先的路径上有个标记 被覆盖的点$0.5 ...
- C++结构体、类和对象
在C++中结构体(struct)和类(class)可以通用,[结构体是一种特殊的类] struct和class的区别:访问和控制. struct在缺省值的情况下可以是public在外部被访问到对于类来 ...
- PAT A1016 Phone Bills (25)
题目描述 A long-distance telephone company charges its customers by the following rules: Making a long-d ...
- PAT B1012.数字分类
全部AC #include <cstdio> int valid[5] = {0}; int count[5] = {0}; int p1(int i) { printf("%d ...
- C语言 --- 初级指针
1.内存的访问:直接访问,间接访问. 直接访问:int a = 0;直接对a赋值.选一个内存地址,让他存20这个数. a += 10; ...
- markdown中使用缩进
在markdown中直接敲空格是不生效的. 使用html标签来实现 一个空格大小的表示: 两个空格的大小表示: 不换行空格: 别忘记分号 参考了大神的文章: markdown空格缩进以及HTML ...
- Sentinal LDK 加密狗的使用
公司的软件用了第三方的加密key,在代码里只是用了其中的一个功能:GetKeyInfo()判断电脑是否有插入u盾.现做简单的说明如下: 第一步.插入master key 到电脑,下载正式的hvc 授权 ...
- python 2 和 python 3的区别
python2和python3区别 python2:源码不统一,源码(功能)重复,维护困难,除法的时候返回来的是小数点,()浮点数 python3:源码统一,源码不重复,除法的时候返回来的是整 ...
- Linux7_MySQL5.7_主从复制_scripts
# cat my_full_backup.sh #!/bin/bash BEGINTIME=`date +"%Y-%m-%d %H:%M:%S"` format_time=`dat ...