day07_BootStrap和MySQl基本知识总结
一、BootStrap:
BootStrap的方便之处完虐原生的div+css布局。最大的优势就是解决了屏幕设备对网站的适应性问题。虽然BS效果要求浏览器要支持HTML5元素。但是随着时代的推进，不支持HTML5的老浏览器将会被淘汰。学习BootStrap的核心在于理解栅格系统。
1.先总结一下如何利用BootStrap解决屏幕设备问题。
先晒个自测代码:
<head>
<meta name="viewport" content="width = device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 " style="background-color: #1B6D85;height: 400px;"><p style="float: right;">123</p></div>
<div class="col-lg-4" style="background-color: #449D44;height: 400px;"><p style="float: right;">123</p></div>
<div class="col-lg-4" style="background-color: #F7E1B5;height: 400px;"><p style="float: right;">123</p></div>
</div>
</div>
</body>
如上图，col-lg-4:表示在大屏幕上三个div平均分布。为了不让该布局在手机屏幕上被打乱或者显示不正常，应该再添加一个类col-xs-n:
如果你想要在手机屏幕上能够完全显示正常的内容，并且每一行只显示一个，在class中空格 然后加个col-xs-12:如下
<div class="col-lg-4 col-xs-12" style="background-color: #1B6D85;height: 400px;"><p style="float: right;">123</p></div>
这样以后就能在手机上每一行只显示一格div。内容也会自动缩放显示全部。
以上就是栅格系统的核心。理解完原理以后,就可以完成屏幕设备对网站的适应性问题
2、其他一些组件:
BootStrap的为已经做好了一些漂亮而完整的组件样式:比如上色的按钮，精致的表格，还有输入框特效，成品的导航栏等等。使用这些插件，应该查看一下BS开发文档，目录是:第六天\资料\bootstrap3中文文档_cn\new_cn\components\index.html。上面有写好的案例代码。直接拷贝过来，根据自己的需求做一下改动即可使用。
推荐BootStrap以后快速写网站布局。另外还有http://www.ibootstrap.cn/可以在线生成
二、Mysql初步学习:
几天主要学习了mysql的安装，环境变量设置，利用SQL语言对数据库的创建，数据表的创建等基础内容。SQL语言非常简洁，只要把每个操作项自己敲一遍。在对的前提下，把模板保存起来就可以。方便下次使用可以快速查询复制修改再次使用:
（一）数据库操作
1.显示所有数据库:show databases;
2.删除数据库:drop database web_test;
3.新建数据库:create database web_test;
4.使用(或者切换)数据库:格式是use 数据库名称——:use web_test;
5.查看正在使用的数据库 : select database();
（二）数据库中表的操作
首先，先选择要操作的数据库:use web_test;
接下来依次进行操作:
1.显示所有的表:show tables;
2.创建一个表:格式:create table 表名(
字段名称 字段类型(长度) 约束，
字段名称 字段类型(长度) 约束，
......
字段名称 字段类型(长度) 约束);
创建表格对于整个数据库的表的操作算是难的，总结一下它组成表的几个名词:
1).字段:表的一列称为一个字段。
2).数据类型:Java中基本的数据类型在SQL语言中都有相对应的类型。
比较常用的有:
int:整型
char(长度)表示一个字符数组， varchar(长度) 表示一个字符串，区别如下:
char(长度):相当于一个字符数组，如果存进来数组的长度小于设定的长度。Mysql会用空格补齐没被安排的长度。如果数据超过长度，就会报错
varchar(长度):是一个长度可变的字符串，当数据存进来小于设定的长度，varchar的长度会自动缩小。大于长度的话，会自动增长。比较灵活安全，推荐使用varchar(长度)
timeStamp:时间戳。含有日期和时间，使用该类型，如果没有向这个字段中存值，数据库使用当前的系统时间存入到数据库中。
3).约束:
约束是为了保证数据的完整性,防止数据存错或者错漏。目前常见的有三种:
(1).primary key 主键:被约束的字段存进来的每个值都是唯一非空的，并且如果是整型的，还能设置自动增长。主键很重要，作为一张表的唯一不重复识别id，后面经常与其他表连接
成为外键。两个表之间的关系是靠外键来连接的:
id int primary key auto_i ncrement，
(2).unique 唯一不重复:用在注册的用户名是独一无二的，方便后面遍历。
(3).not null 非空:必填字段非空
创建一个表格:
create table user(
id int primary key,
user varchar(20) unique,
password varchar(20) not null,
age int,
birthday date
);
3.显示一个表的结构:desc user;用来看看自己的创建的表是否正确
4.删除一个表:drop table 表名;
5.修改列类型,长度和约束 : [alter table 表名 modify 列名 类型(长度) 约束]: alter table user modify birthday datetime not null;
6.删除列 :[alter table 表名 drop 列名]: alter table user drop age;
7.修改列名称 : [alter table 表名 change 旧列名 新列名 类型(长度) 约束]:alter table user change birthday new_birthday date;
8.修改表名 :[rename table 表名 to 新的表名]: rename table user to user_table;
一、BootStrap:
BootStrap的方便之处完虐原生的div+css布局。最大的优势就是解决了屏幕设备对网站的适应性问题。虽然BS效果要求浏览器要支持HTML5元素。但是随着时代的推进，不支持HTML5的老浏览器将会被淘汰。学习BootStrap的核心在于理解栅格系统。
1.先总结一下如何利用BootStrap解决屏幕设备问题。
先晒个自测代码:
<head>
<meta name="viewport" content="width = device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 " style="background-color: #1B6D85;height: 400px;"><p style="float: right;">123</p></div>
<div class="col-lg-4" style="background-color: #449D44;height: 400px;"><p style="float: right;">123</p></div>
<div class="col-lg-4" style="background-color: #F7E1B5;height: 400px;"><p style="float: right;">123</p></div>
</div>
</div>
</body>
如上图，col-lg-4:表示在大屏幕上三个div平均分布。为了不让该布局在手机屏幕上被打乱或者显示不正常，应该再添加一个类col-xs-n:
如果你想要在手机屏幕上能够完全显示正常的内容，并且每一行只显示一个，在class中空格 然后加个col-xs-12:如下
<div class="col-lg-4 col-xs-12" style="background-color: #1B6D85;height: 400px;"><p style="float: right;">123</p></div>
这样以后就能在手机上每一行只显示一格div。内容也会自动缩放显示全部。
以上就是栅格系统的核心。理解完原理以后,就可以完成屏幕设备对网站的适应性问题
2、其他一些组件:
BootStrap的为已经做好了一些漂亮而完整的组件样式:比如上色的按钮，精致的表格，还有输入框特效，成品的导航栏等等。使用这些插件，应该查看一下BS开发文档，目录是:第六天\资料\bootstrap3中文文档_cn\new_cn\components\index.html。上面有写好的案例代码。直接拷贝过来，根据自己的需求做一下改动即可使用。
推荐BootStrap以后快速写网站布局。另外还有http://www.ibootstrap.cn/可以在线生成
二、Mysql初步学习:
几天主要学习了mysql的安装，环境变量设置，利用SQL语言对数据库的创建，数据表的创建等基础内容。SQL语言非常简洁，只要把每个操作项自己敲一遍。在对的前提下，把模板保存起来就可以。方便下次使用可以快速查询复制修改再次使用:
（一）数据库操作
1.显示所有数据库:show databases;
2.删除数据库:drop database web_test;
3.新建数据库:create database web_test;
4.使用(或者切换)数据库:格式是use 数据库名称——:use web_test;
5.查看正在使用的数据库 : select database();
（二）数据库中表的操作
首先，先选择要操作的数据库:use web_test;
接下来依次进行操作:
1.显示所有的表:show tables;
2.创建一个表:格式:create table 表名(
字段名称 字段类型(长度) 约束，
字段名称 字段类型(长度) 约束，
......
字段名称 字段类型(长度) 约束);
创建表格对于整个数据库的表的操作算是难的，总结一下它组成表的几个名词:
1).字段:表的一列称为一个字段。
2).数据类型:Java中基本的数据类型在SQL语言中都有相对应的类型。
比较常用的有:
int:整型
char(长度)表示一个字符数组， varchar(长度) 表示一个字符串，区别如下:
char(长度):相当于一个字符数组，如果存进来数组的长度小于设定的长度。Mysql会用空格补齐没被安排的长度。如果数据超过长度，就会报错
varchar(长度):是一个长度可变的字符串，当数据存进来小于设定的长度，varchar的长度会自动缩小。大于长度的话，会自动增长。比较灵活安全，推荐使用varchar(长度)
timeStamp:时间戳。含有日期和时间，使用该类型，如果没有向这个字段中存值，数据库使用当前的系统时间存入到数据库中。
3).约束:
约束是为了保证数据的完整性,防止数据存错或者错漏。目前常见的有三种:
(1).primary key 主键:被约束的字段存进来的每个值都是唯一非空的，并且如果是整型的，还能设置自动增长。主键很重要，作为一张表的唯一不重复识别id，后面经常与其他表连接
成为外键。两个表之间的关系是靠外键来连接的:
id int primary key auto_i ncrement，
(2).unique 唯一不重复:用在注册的用户名是独一无二的，方便后面遍历。
(3).not null 非空:必填字段非空
创建一个表格:
create table user(
id int primary key,
user varchar(20) unique,
password varchar(20) not null,
age int,
birthday date
);
3.显示一个表的结构:desc user;用来看看自己的创建的表是否正确
4.删除一个表:drop table 表名;
5.修改列类型,长度和约束 : [alter table 表名 modify 列名 类型(长度) 约束]: alter table user modify birthday datetime not null;
6.删除列 :[alter table 表名 drop 列名]: alter table user drop age;
7.修改列名称 : [alter table 表名 change 旧列名 新列名 类型(长度) 约束]:alter table user change birthday new_birthday date;
8.修改表名 :[rename table 表名 to 新的表名]: rename table user to user_table;
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
