## Bootstrap：
1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
* 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
* 好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
* 同一套页面可以兼容不同分辨率的设备。

2. 快速入门
1. 下载Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建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 HelloWorld</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>

</body>
</html>

## 响应式布局
* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
1. 定义容器。相当于之前的table、
* 容器分类：
1. container：两边留白
2. container-fluid：每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
* 设备代号：
1. xs：超小屏幕 手机 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面显示器 (≥992px)
4. lg：大屏幕 大桌面显示器 (≥1200px)

* 注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

## CSS样式和JS插件
1. 全局CSS样式：
* 按钮：class="btn btn-default"
* 图片：
* class="img-responsive"：图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圆形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
* 表格
* table
* table-bordered
* table-hover
* 表单
* 给表单项添加：class="form-control"
2. 组件：
* 导航条
* 分页条
3. 插件：
* 轮播图

学习JAVAWEB第七天的更多相关文章

  1. JavaWeb和WebGIS学习笔记（七）——MapGuide Open Source安装、配置以及MapGuide Maestro发布地图——超详细！目前最保姆级的MapGuide上手指南！

    JavaWeb和WebGIS学习笔记(七)--MapGuide Open Source安装.配置以及MapGuide Maestro发布地图 超详细!目前最保姆级的MapGuide上手指南! 系列链接 ...

  2. Android开发学习路线的七个阶段和步骤

    Android开发学习路线的七个阶段和步骤           Android学习参考路线     第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环. 2.String和St ...

  3. 我的MYSQL学习心得（七） 查询

    我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  4. JavaWeb结合七牛云存储搭建个人相册服务

    JavaWeb结合七牛云存储搭建个人相册服务 一.引言1. 课程概述 相信很多人都知道网站一般会有很多图片,对于小型网站来说,图片放在网站服务器上不算什么,但当图片数量很大时,会造成服务器很臃肿,相应 ...

  5. opencv学习笔记（七）SVM+HOG

    opencv学习笔记(七)SVM+HOG 一.简介 方向梯度直方图(Histogram of Oriented Gradient,HOG)特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述子 ...

  6. 转-Spring 注解学习手札（七） 补遗——@ResponseBody，@RequestBody，@PathVariable

    转-http://snowolf.iteye.com/blog/1628861/ Spring 注解学习手札(七) 补遗——@ResponseBody,@RequestBody,@PathVariab ...

  7. [Python学习笔记][第七章Python文件操作]

    2016/1/30学习内容 第七章 Python文件操作 文本文件 文本文件存储的是常规字符串,通常每行以换行符'\n'结尾. 二进制文件 二进制文件把对象内容以字节串(bytes)进行存储,无法用笔 ...

  8. VSTO学习笔记（七）基于WPF的Excel分析、转换小程序

    原文:VSTO学习笔记(七)基于WPF的Excel分析.转换小程序 近期因为工作的需要,要批量处理Excel文件,于是写了一个小程序,来提升工作效率. 小程序的功能是对Excel进行一些分析.验证,然 ...

  9. Spring 注解学习手札（七） 补遗——@ResponseBody，@RequestBody，@PathVariable （转）

    最近需要做些接口服务,服务协议定为JSON,为了整合在Spring中,一开始确实费了很大的劲,经朋友提醒才发现,SpringMVC已经强悍到如此地步,佩服! 相关参考: Spring 注解学习手札(一 ...

随机推荐

  1. Codeforces Round #327 (Div. 1), problem: (A) Median Smoothing

    http://codeforces.com/problemset/problem/590/A: 在CF时没做出来,当时直接模拟,然后就超时喽. 题意是给你一个0 1串然后首位和末位固定不变,从第二项开 ...

  2. Sum(hdu4407)

    Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. TLS、SSL

    TLS/SSL 的功能实现主要依赖于三类基本算法:散列函数 Hash.对称加密和非对称加密,其利用非对称加密实现身份认证和密钥协商,对称加密算法采用协商的密钥对数据加密,基于散列函数验证信息的完整性. ...

  4. JWT+SpringBoot实战

    往期内容:JWT - 炒焖煎糖板栗 - 博客园 (cnblogs.com) JWT可以理解为一个加密的字符串,里面由三部分组成:头部(Header).负载(Payload).签名(signature) ...

  5. 本地修改配置hosts文件解决Github加载慢问题

    本地修改配置hosts文件解决Github加载慢问题 手动方式 hosts 文件在每个系统的位置不一,详情如下: Windows 系统:C:\Windows\System32\drivers\etc\ ...

  6. [git]初始化项目文件到git分支

    将本地和远程仓库关联并push本地项目 1.VCS -> import into Version Control  ->  Create Git Repository 选择项目文件   2 ...

  7. Java 16 中新增的 Stream 接口的一些思考

    这里先提一个题外话,如果想看 JDK 不同版本之间有何差异,增加或者删除了哪些 API,可以通过下面这个链接查看: https://javaalmanac.io/jdk/17/apidiff/11/ ...

  8. 关于C#的decimal浮点类型转化成字符串时末尾存在多个0

    首先,对于浮点类型,double和float存在精度丢失问题,这一点在之前的一篇博文中有提到(C# double类型精度丢失问题),于是,一般时候推荐大家使用decmal,特别是涉及到一些金融计算时, ...

  9. oceanbase数据库比赛总结

    前言 ob数据库大赛由蚂蚁金服的oceanbase团队组织,今年是第一届,宣传很广,比赛十月份开始,但早在上半年就看见大量的宣传了,比赛也是相当的卷.我们进了复赛之后感觉要卷进决赛需要付出的时间精力都 ...

  10. CGO快速入门

    1. 通过`improt "C"`语句开启CGO特性2. `/**/`中间是C代码,之后接 import "C" 如果存在空行 就会报错.could not d ...