[Web 前端] 031 bootstrap 的使用和全局 css 样式
0. 前言
1. 基本模板
- 这就是一个最简单的 Bootstrap 页面，记为
code1
<!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> <!-- 字体做了一定的美化 -->
<!-- (1) 下文的代码，写在此处 -->
<!-- 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>
2. 布局容器
- 代码写在 code1 的 (1) 处
2.1 container
- 默认居中
- 有固定的宽度
- 支持响应式布局
<div class="container" style="height:100px;background:red">
container
</div>
2.2 container-fluid
- 宽度为 100%
- 占据全部视口(viewport)
<div class="container-fluid" style="height:100px;background:green">
container-fluid
</div>
3. 栅格系统
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12 列
- 它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局
3.1 简介
- 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中
3.2 栅格参数
- 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的
| 超小屏幕 手机 (<768px) |
小屏幕 平板 (≥768px) |
中等屏幕 桌面显示器 (≥992px) |
大屏幕 大桌面显示器 (≥1200px) |
|
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的， 大于阈值时将变为水平排列C |
||
.container最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| column 列数 |
12 | |||
| 最大列宽 | 自动 | ~62px | ~81px | ~97px |
| gutter 槽宽 |
30px （每列左右均有 15px） |
|||
| 可嵌套 | 是 | |||
| Offsets 偏移 |
是 | |||
| 列排序 | 是 |
3.3 实例：从堆叠到水平排列
- 使用单一的一组
.col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列 - 所有“列(column)必须放在 ”
.row内 - 下表是为了模拟排列情况；因为
col-md-1有些长，所以我用cm-1作了代替
| 从堆叠到水平排列 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| cm-1 | cm-1 | cm-1 | cm-1 | cm-1 | cm-1 | cm-1 | cm-1 | cm-1 | cm-1 | cm-1 | cm-1 |
| col-md-8 | col-md-4 | ||||||||||
| col-md-4 | col-md-4 | col-md-4 | |||||||||
| col-md-6 | col-md-6 | ||||||||||
- 举例：下面是三列布局的一种
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-1 col-sm-6" style="background:coral">col-md-3</div>
<div class="col-md-6 col-xs-1 col-sm-3" style="background:rosybrown">col-md-6</div>
<div class="col-md-3 col-xs-1 col-sm-3" style="background:dimgray">col-md-3</div>
</div>
</div>
2.4 移动设备和桌面屏幕
- 屏幕会根据实际大小显示设定的大小
- 可以在调整浏览器大小查看效果
2.5 列偏移
- 少废话，上例子
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-2" style="background:#659">col-md-4</div>
<div class="col-md-4" style="background:red">col-md-4</div>
<div class="col-md-4" style="background:pink">col-md-4</div>
</div>
</div>
2.6 嵌套列
- 少废话，上例子
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background:red;height:40px">
<div class="row">
<div class="col-md-6" style="background:blue;height:20px"></div>
</div>
</div>
<div class="col-md-6" style="background:pink;height:40px"></div>
</div>
</div>
2.7 其他
- 一行排列
- 列排序
- 等
4. 响应式工具
- 为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容；另外还包含了针对打印机显示或隐藏内容的工具类
- 有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本；相反，通过使用这些工具类可以在不同设备上提供不同的展现形式
4.1 可用的类
- 通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容
| 超小屏幕手机 (<768px) |
小屏幕平板 (≥768px) |
中等屏幕桌面 (≥992px) |
大屏幕桌面 (≥1200px) |
|
|---|---|---|---|---|
.visible-xs-* |
可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm-* |
隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md-* |
隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg-* |
隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs |
隐藏 | 可见 | 可见 | 可见 |
.hidden-sm |
可见 | 隐藏 | 可见 | 可见 |
.hidden-md |
可见 | 可见 | 隐藏 | 可见 |
.hidden-lg |
可见 | 可见 | 可见 | 隐藏 |
- 从 v3.2.0 版本起，形如
.visible-*-*的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的display属性，列表如下：
| 类组 | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
- 因此，以超小屏幕（
xs）为例，可用的.visible-*-*类是：.visible-xs-block、.visible-xs-inline和.visible-xs-inline-block .visible-xs、.visible-sm、.visible-md和.visible-lg类也同时存在；但是从 v3.2.0 版本开始不再建议使用；除了<table>相关的元素的特殊情况外，它们与.visible-*-block大体相同
5. 排版
5.1 标题
- HTML 中的所有标题标签，
<h1>到<h6>均可使用 - 另外，还提供了
.h1到.h6类，为的是给内联(inline)属性的文本赋予标题的样式 - 在标题内还可以包含
<small>标签或赋予.small类的元素，可以用来标记副标题 - 少废话，上例子
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<p class="h1 text-center">h1. Bootstrap <small>heading</small></p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
5.2 其他
- 内联文本元素
- 对齐
- 改变大小写
- 缩略语
- 地址
- 引用
- 列表
- 等
6. 表格
6.1 基本实例
- 为任意
<table>标签添加.table类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线 - 这种方式看起来很多余！？但是官方觉得，表格元素使用的很广泛，如果他们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以他们选择将此样式独立出来
6.2 举例
<!--
table-striped 条纹状表格
table-bordered 带边框的表格
table-hover 鼠标悬停
table-condensed 紧缩表格
-->
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>zhangsan</td>
<td>nan</td>
</tr>
<tr>
<td>2</td>
<td>Lisi</td>
<td>nan</td>
</tr>
<tr>
<td>3</td>
<td>Wangwu</td>
<td>nan</td>
</tr>
</table>
6.3 其他
- 条纹状表格
- 带边框的表格
- 紧缩表格
- 状态类
- 响应式表格
7. 表单
7.1 基本实例
- 单独的表单控件会被自动赋予一些全局样式。所有设置了
.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%; - 将
label元素和前面提到的控件包裹在.form-group中可以获得最好的排列 - 少废话，上例子
<input type="text" class="form-control">
7.2 其他
- 内联表单
- 水平排列的表单
- 下拉列表(select)
- 静态控件
- 焦点状态
- 禁用状态
- 只读状态
- 校验状态
- 等
[Web 前端] 031 bootstrap 的使用和全局 css 样式的更多相关文章
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- 范仁义web前端介绍课程---4、html、css、js初体验
范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...
- 26-[Boostrap]-全局css样式，组件，控件
1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> < ...
- 【03】全局 CSS 样式
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
- Boostrap全局CSS样式
1.Bootstrap提供的CSS Reset * { box-sizing: border-box; } body { font ...; color: #333; background: ...; ...
- 学习笔记1－－响应式网页＋Bootstrap起步＋全局CSS样式
一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
随机推荐
- ZROI 19.08.06模拟赛
传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. 今天正睿又倒闭了,从删库到跑路. 天祺鸽鸽txdy! A "不要像个小学生一样一分钟就上来问东西."--蔡老板 虽 ...
- Ubuntu中linux虚拟机全屏
登录客户机操作系统.在虚拟机中装载CD驱动器启动终端,使用tar解压缩安装程序,然后执行vmware-insall.pl安装VMware Tools. 1.进入文件界面,找到左侧“设备”右击“安装VM ...
- LDA主题模型评估方法–Perplexity
在LDA主题模型之后,需要对模型的好坏进行评估,以此依据,判断改进的参数或者算法的建模能力. Blei先生在论文<Latent Dirichlet Allocation>实验中用的是Per ...
- jackson 完整Jar包
Jackson fasterxml和codehaus的区别: 他们是Jackson的两大分支.也是两个版本的不同包名.Jackson从2.0开始改用新的包名fasterxml: 1.x版本的包名是co ...
- The Preliminary Contest for ICPC Asia Shanghai 2019 L. Digit sum
题目:https://nanti.jisuanke.com/t/41422 思路:预处理 #include<bits/stdc++.h> using namespace std; ][]= ...
- 织梦dedecms自定义表单导出到excel教程
不写死任何字段,不写死任何东西,修改2个文件,让织梦自定义表单自由导出到Excel表格里. 添加教程 1.\dede\templets\diy_main.htm 找到 前台预览</a> 在 ...
- jQuery_完成表格的隔行换色
表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...
- 把网站从 http 转换成 https
基础准备: 一台服务器,一个主域名或多级域名,本次申请的免费 本次环境使用 centos6.5 + nginx1.8 + jdk1.8 + tomcat8 如果需要收费的请参考: 云盾证书服务(包年) ...
- windows与ubuntu双系统的安装
将ubuntu镜像烧录至U盘,从U盘启动电脑 选择自定义安装,不要选择它本身的双系统选项. 我的方案分区: 1. 挂载点/:主分区:安装系统和软件:大小为30G:分区格式为ext4:2. 挂载点/ho ...
- PO,BO,VO和POJO的区别
PO:persistent object 持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中与i ...