day07：bootstrap、旅游网案例、Mysql数据库安装、DDL（create ，show，character set,drop,alter）

LI JS@你猜啊

已于 2022-03-24 10:33:32 修改

阅读量1.7k

点赞数

分类专栏： JAVEWEB 文章标签： html bootstrap mysql

于 2022-03-23 19:06:57 首次发布

本文链接：https://blog.csdn.net/m0_45209551/article/details/123686152

版权

JAVEWEB 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一回顾

1. 自定义动画 :$(selector).animate()

2.jquert 操作 DOM

        html()   text() 设置与获取标签中间的内容

        attr()    prop() 操作属性

        val() input标签的 value 值

3. append() 在后追加 prepend() 在前追加 after() 在下面追加 before() 在上面追加

4.class 样式

        addClass() 追加类样式

        removeClass() 删除类样式

        toggleClass() 追加与删除类样式

5.css 样式

        $(selector).css({"属性名 ":" 属性值 "," 属性名 ":" 属性值 "})

6. 表单验证

7. 三种选择器 : 过滤选择器层级选择器属性选择器

8.bootstrap

        概念: 前端的框架

        好处:A. 提供大量的 css 样式与 js 的组件 B. 支持响应式布局

        基本的搭建步骤: A. 下载相关联的资料 B.copy 三个文件到当前项目 C. 在 html 页面进行引入

        响应式布局:

                概念:同一套 html 代码可以兼容不同分辨率的设备

                实现:依赖于栅格布局每一行是占 12 个格子

                步骤:A.创建容器 B. 创建行 C. 创建元素并且指定元素所占的格子数目

二按钮

导入对顺序要要求

①先booststrap.css

②jquery.js

③bootstrap.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<!-- Standard button -->
		<button type="button" class="btn btn-default">（默认样式）Default</button>
		
		<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
		<button type="button" class="btn btn-primary">（首选项）Primary</button>
		
		<!-- Indicates a successful or positive action -->
		<button type="button" class="btn btn-success">（成功）Success</button>
		
		<!-- Contextual button for informational alert messages -->
		<button type="button" class="btn btn-info">（一般信息）Info</button>
		
		<!-- Indicates caution should be taken with this action -->
		<button type="button" class="btn btn-warning">（警告）Warning</button>
		
		<!-- Indicates a dangerous or potentially negative action -->
		<button type="button" class="btn btn-danger">（危险）Danger</button>
		
		<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
		<button type="button" class="btn btn-link">（链接）Link</button>
	</body>
</html>

三表格

①：table-responsive-响应式表格

②：table-striped-隔行条纹

③：table-hover-悬浮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<style >
			th{
				text-align: center;
			}
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table class="table <!--table-striped--> table-bordered table-hover table-responsive">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>爱好</th>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
		</table>
	</body>
</html>

四表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
	</body>
</html>

五图片

①img-responsive-响应式图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<img src="img/img/02.jpg" class="img-responsive" alt="...">
		<img src="img/img/01.jpg" alt="..." class="img-rounded">
		<img src="img/img/03.jpg" alt="..." class="img-circle">
		<img src="img/img/06.jpg" alt="..." class="img-thumbnail">
	</body>
</html>

六导航条

<nav class="navbar navbar-default">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
				      <a class="navbar-brand" href="#">首页</a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav">
				        <li class="active"><a href="#">JAVAEE <span class="sr-only">(current)</span></a></li>
				        <li><a href="#">JAVAERB</a></li>
				        <li><a href="#">云计算</a></li>
				        <li><a href="#">大数据</a></li>
				      </ul>
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>

七分页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<nav aria-label="...">
		  <ul class="pagination">
		    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
		    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
		    <li ><a href="#">2<span class="sr-only">(current)</span></a></li>
		    <li ><a href="#">3 <span class="sr-only">(current)</span></a></li>
		    <li class="disabled"><a href="#">4 <span class="sr-only">(current)</span></a></li>
		  </ul>
		</nav>
	</body>
</html>

八轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				  <!-- Indicators -->
				  <ol class="carousel-indicators">
				    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
				  </ol>
				
				  <!-- Wrapper for slides -->
				  <div class="carousel-inner" role="listbox">
				    <div class="item active">
				      <img src="img/img/banner_1.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				    <div class="item">
				      <img src="img/img/banner_2.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				   	
				   	<div class="item">
				      <img src="img/img/banner_3.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				  </div>
				
				  <!-- Controls -->
				  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				  </a>
				  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				  </a>
				</div>

九旅游网案例

代码

①图片自动填充父容器：style=“max-width:100%”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<style>
			.tv_input{
				width: 400px;
				height: 35px;
				border: solid 1px #ffc900;
				margin-top: 15px;
				padding-left: 5px;
				float: left;
			}
			.tv_a{
				width: 90px;
				height: 35px;
				float: left;
				background-color: #ffc900;
				border: solid 1px #ffc900;
				text-align: center;
				line-height: 35px;
				margin-top: 15px;
			}
			
		</style>
	</head>
	<body>
		<!--顶部-->
		<div class="container-fluid">
			<!--第一行-->
			<div class="row">
				<img src="img/img/top_banner.jpg" class="img-responsive" />
			</div>
			<!--第二行-->
			<div class="row">
				<div class="col-md-3">
					<img src="img/img/qian_logo.png" />
				</div>
				<div class="col-md-5">
					<input type="text" class="tv_input" placeholder="请输入路线"/>
					<a class="tv_a" href="#">搜素</a>
				</div>
				<div class="col-md-4">
					<img src="img/img/hotel_tel.png" />
				</div>
			</div>
			<!--第三行-->
			<div class="row">
				<nav class="navbar navbar-default">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
				      <a class="navbar-brand" href="#">首页</a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav">
				        <li class="active"><a href="#">JAVAEE <span class="sr-only">(current)</span></a></li>
				        <li><a href="#">JAVAERB</a></li>
				        <li><a href="#">云计算</a></li>
				        <li><a href="#">大数据</a></li>
				      </ul>
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
			</div>
			<!--第四行-->
			<div class="row">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				  <!-- Indicators -->
				  <ol class="carousel-indicators">
				    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
				  </ol>
				
				  <!-- Wrapper for slides -->
				  <div class="carousel-inner" role="listbox">
				    <div class="item active">
				      <img src="img/img/banner_1.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				    <div class="item">
				      <img src="img/img/banner_2.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				   	
				   	<div class="item">
				      <img src="img/img/banner_3.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				  </div>
				
				  <!-- Controls -->
				  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				  </a>
				  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				  </a>
				</div>
			</div>
		</div>
		<!--主体部分-->
		<div class="container">
			<!--第一行-->
			<div class="row jx" style="margin-top: 20px;border-bottom: solid 2px #FFC900;padding: 8px;">
				<img src="img/img/icon_5.jpg" />
				<span>千锋精选</span>
			</div>
			<!--第二行-->
			<div class="row qf">
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
				</div>
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg " style="max-width: 100%;"/>
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
					
				</div>
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
				</div>
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
				</div>
			</div>
			<!--第三行-->
			<div class="row gn" style="margin-top: 20px;border-bottom: solid 2px #FFC900;padding: 8px;">
				<img src="img/img/icon_6.jpg"/>
				<span>国内游</span>
			</div>
			<!--第四行-->
			<div class="row">
				<div class="col-md-4">
					<img src="img/img/guonei_1.jpg" />
				</div>
				<div class="col-md-8">
					<div class="row">
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
							
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
					</div>
					<div class="row" style="margin-top: 30px;">
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
							
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--尾巴部分-->
		<div class="container">
			<!--第一行-->
			<div class="row" style="margin-top: 20px;">
					<img src="img/img/footer_service.png" style="max-width: 100%;" />
			</div>
			<!--第二行-->
			<div class="row" style="background-color: #FFC900;height: 40px;text-align: center;line-height: 40px;">
				千锋教育 运营主体：北京千锋互联科技有限公司 ，属具备计算机技术培训资质的教育培训机构 
			</div>
		</div>
	</body>
</html>

十数据库

10.1目前存储数据的方式

A. 使用数组或者是集合容器来存储数据临时存储

B. 使用文件来进行存储存储数据的没有指定数据的格式

10.2 缺点

1. 要么是临时存储要么数据没有指定的数据格式

2. 没有权限控制安全性比较差

3. 使用文件存储数据操作比较麻烦效率低

10.3 数据库简介

1. 数据库是 “ 按照数据结构来组织、存储和管理数据的仓库 ” 。是一个长期存储在计算机内的、有组织的、

可共享的、统一管理的大量数据的集合 A. 数据库存储数据的仓库 ( 粮仓 )

10.4 数据库的分类

1. 分类 :关系型数据库与非关系型数据库

2. 关系型数据库数据库中的表与表之间存在的关联例子 : 班级表 ==> 学生表

常见的关系型数据 db2 mysql sqlite oracle sqlserver

3. 非关系型数据库 : 数据库中表与表不存在的关系

常见非关系型数据库 redis( 键值对 ) mondb hbase( 列族来进行存储 )

10.5 数据库管理系统

1. 数据库管理系统 (Database Management System) 是一种操纵和管理数据库的大型软件，用于建立、使用和维护数据库，简称 DBMS 。它对数据库进行统一的管理和控制，以保证数据库的安全性和完整性

A.数据库管理系统就是一个数据库的大型软件

B. 用于对数据库进行统一管理与控制

2. 运维 ( 管理数据库人员 ) 运维工程师通过数据库管理系统来统一维护与管理数据库

十一 Mysql数据库安装

（5.5版本不需要删除注册表（命令窗口））

11.1 简介

1.MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，属于 Oracle 旗下产品。 MySQL是最流行的关系型数据库管理系统之一，在 WEB 应用方面， MySQL 是最好的 RDBMS (Relational Database Management System ，关系数据库管理系统 ) 应用软件之一

11.2 特点

1. 开源免费

2. 轻量级体积比较好

3. 学习成本低学习比较简单

11.3 下载

1. 下载地址 :https://www.oracle.com/mysql/free/

11.4 卸载

step01 找到控制面板

step02 删除mysql配置文件

step03 删除数据文件

11.5 安装

step01 双击这个文件

step02 下一步

step03 同意协议

step04 选择版本

step05 安装的地址

①：注意这里不能选默认的x,要改为第一个选项

step06 安装

step07 下一步

step08 下一步

step09 完成

step10 下一步

step11 下一步

step12 下一步

step13 下一步

step14 下一步

step15 下一步

①设置并发人数，越多越好

step16 下一步

step17 设置编码格式

step18

step19 下一步

step20

十二 sql语句分类

1.sql 语句结构化查询语句就是用于来操作数据库

2. 分类

        A.DDL 主要是用于来操作数据库以及数据库表关键字 alter drop create

        B.DQL 主要是用于操作数据库表主要用于查询数据库中的数据关键 :select

        C.DML 主要是用于操作数据库中数据表主要是对数据进行增加 insert 删除 delete 修改

                update

        D.DCL 主要是用于对数据库的用户的管理以及权限的管理运维工程师操作

十三 DDL-针对数据库操作

create database 数据库库名
create database if not exists 数据库的库名
create database 数据库的名称 character set 编码格式
show create database 数据库库名
show databases
alter database 数据库库名 character set 编码格式

13.1 创建数据

1. 语法 :create database 数据库库名

13.2 创建数据库判断是否存在

1. 语法 :create database if not exists 数据库的库名

13.3 创建数据设置编码格式

1. 语法 : create database 数据库的名称 character set 编码格式

13.4 查看数据库创建的格式

1. 语法： show create database 数据库库名

13.5 修改数据库的编码格式

1. 语法 : alter database 数据库库名 character set 编码格式

13.6 查看所有的数据库

1.语法: show databases

13.7 删除数据库

1. 语法 :drop database 数据库库名

LI JS@你猜啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
day07：bootstrap、旅游网案例、Mysql数据库安装、DDL（create ，show，character set,drop,alter）

一回顾1.自定义动画:$(selector).animate() 2.jquert 操作DOM html() text() 设置与获取标签中间的内容 attr() prop() 操作属性 val() input标签的value值 3. append() 在后追加 prepend() 在前追加 after()在下面追加 before() 在上面追加 4.class样式 addClass() 追...
复制链接

扫一扫