BootStrap和MySQL的基础概述
第一部分：BootStrap：响应式的框架
1.1BootStrap的概述
1.1.1什么是BootStrap
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
1.1.2Bootstrap的分类
全局CSS
组件
Javascript插件
1.2BootStrap的全局CSS
1.2.1 概述
Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在<head>之中添加 viewport 元数据标签。
<metaname="viewport"content="width=device-width,initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
<metaname="viewport"content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
排版与链接
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
- 为 body元素设置background-color: #fff;
- 使用 @font-family-base、@font-size-base和 @line-height-base变量作为排版的基本参数
- 为所有链接设置了基本颜色 @link-color，并且当链接处于:hover 状态时才添加下划线
这些样式都能在 scaffolding.less文件中找到对应的源码。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<divclass="container"> ...</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<divclass="container-fluid"> ...</div>
1.2.1栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下Bootstrap 栅格系统的工作原理：
- 行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
- 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
定义列：.col-lg-n.col-md-n .col-sm-n .col-xs-n
第二部分：MySQL的基础概述
关系型的数据库
- MySQL - 免费小型数据库
- Oracle - 收费大型数据库
- SQLserver - 微软中性收费数据库
- DB2 - IBM公司收费大型数据库
- SQLite - 小型嵌入式数据库
- Sybase - Sybase公司收费数据库，已经被淘汰
- powerDesigner数据建模工具
MySQL的概述
* SQL：结构化的查询语言（Structured Query Language, 结构化查询语言）
* DDL: Data Defination Language, 数据定义语言, 用来定义数据库对象(库, 表等)
* `CREATE`
* `ALTER`
* `DROP`
* DML: Data Manipulation Language, 数据操作语言, 对表中的记录进行增, 删, 改
* `INSERT`
* `DELETE`
* `UPDATE`
* DQL: Data Query Language, 数据查询语言, 对表中的记录进行查
* `SELECT`
* `FROM`
* `WHERE`
*DCL: Data Control Language, 数据控制语言, 创建修改用户, 权限
【创建数据库***】
createdatabase 数据库名称 [character set 字符集 collate 字符集校对];
【查看数据库】
- show databases; --- 查看数据库服务器中所有的数据库
- show create database 数据库名; --- 查看某个数据库的定义信息.
- select database(); --- 查看当前正在使用的数据库信息.
【删除数据库】
drop database 数据库名;
【修改数据库】
alter database 数据库名 character set 新字符集 collate 校对规则;
【创建表】
语法:
create table 表名 (
字段名 类型(长度) 约束,
);
数据类型:
Java MySQL
byte/short/int/long tinyint/smallint/int/bigint
String char/varchar
* 区别：char是固定长度的字符串,varchar可变长度的字符串.
* char(8) 和 varchar(8)
* 如果插入一个字符串hello 插入到char 那么 插入hello .插入到varchar中 插入hello
float float
double double
BigDemal decimal
boolean bit(只有0和1)
Date date/time/datetime/timestamp
* datetime和timestamp都是既有日期又有时间的日期类型
* 区别： datetime需要使用外部传入的日期.如果没传这个值就是Null. timestamp会使用系统当前的时间作为这个值的默认值.
MYSQL中除了字符串类型需要设置长度其他的类型都有默认长度.
约束：- 主键约束：primary key (默认就是唯一非空的)
- 唯一约束：unique
- 非空约束：not null
【表的查看】
查看数据库中有哪些表：show tables;
查看表结构:desc 表名;
表的删除:drop table 表名;
【表的修改】
修改表添加列：alter table 表名add 列名 类型(长度) 约束;
修改表删除列：alter table 表名drop 列名;
修改表的列的：类型长度及约束:alter table 表名 modify 列名 类型(长度) 约束;
修改表的列名：altertable 表名 change 旧列名 新列名类型(长度) 约束;
修改表名：rename table 旧表名 to 新表名;
【使用SQL操作数据库中的表的记录(对表的记录的CRUD的操作)】
【插入记录】
语法- insert into 表名(列名,列名,...) values (值1,值2,...); ---插入指定列的值
- insert into 表名values (值1,值2,...); ---插入所有列的值
注意事项：
- 列名的个数与值的个数对应.
- 列的类型与值的类型对应.位置也要对应.
- 列的类型如果是字符串或者日期,写值的时候使用单引号将值引起来.
- 插入的值的最大长度不能超过列的最大长度.
收藏
淘帖
踩
