四天学会JavaScript~Day4
昨天学习的内容
前言
今天是国庆假期的第五天了,同时也是我学习JavaScript的第四天。经过了前面三天的学习,基本的概念也都过了一遍,是时候该做项目了。其实我之所以会选择国庆期间学前端,是因为我打算国庆之后开始来做一个电商项目。这个电商项目会很大,我应该是会采用分布式,主要目的不是为了上线也不是为了赚钱。而是单单纯纯的想全栈的做一次,提高技术水平。所以我必须先把前端学好。今天的学习打算呢,我是计划先用最原始的HTML,CSS,JavaScript来做一个页面好看点的项目,当然实际功能可能还是和昨天的购物车差不多。接着呢,我今天还要学习bootstrap和vue两大前端框架。不过我更多的还是会学习bootstrap,因为我是计划在我的项目中去使用它。
第四天的学习内容
单链表的翻转(面向对象语法复习)
CSS样式
购物车(图形版)
bootstrap框架
Vue框架
登录框(bootstrap实现)
单链表的翻转
前天呢,学习第二天的时候我说过为了巩固面向对象的语法,所以是决定每天写一遍数据结构的。不过从明天开始就正式进入项目阶段了也就没必要写了。今天就写个单链表的翻转,然后写下购物车,当然这次的购物车要比昨天的购物车多了一些图片素材,主要目的还是为了巩固。
我们都知道栈数据结构是先进后出的,所以其实你要翻转单链表特别简单。只需要把数据放到栈里面再吐出来就可以了~没什么难度。但是呢,我前天写单链表的那种写法遍历出来和添加的顺序都是反的。所以应对这种情况使用栈反而无法翻转,因为翻转后的数据再经历一次翻转就又相当于是还原了。所以这种情况下如果我要达到翻转效果,可以使用队列。队列是先进先出的,把本来就已经翻转的数据重新插入再遍历可以达到效果。
在这里我要声明一下,正常情况下都是使用栈来达到翻转效果。但是我这种情况使用队列会更好一些。
关于栈和链表的数据结构理论的话我过去也写过博客。这里就列出来分享一下。
栈和队列的基本概念
顺序栈和链表栈
顺序队列和链表队列
代码实现
function LinkList(){
//结点类
function Node(data){
this.data = data;
this.next = null;
}
//头节点
var head = new Node(null);
//插入元素
this.add = function(data){
var temp = new Node(data);
temp.next = head.next;
head.next = temp;
};
//遍历元素
this.print = function(){
var temp = head.next;
while(temp != null){
document.write(temp.data + " ");
temp = temp.next;
}
};
//翻转
this.rev = function(){
var temp = head.next;
//定义一个队列
var queue = new Array();
//把链表元素存入队列内
while(temp != null){
queue.push(temp.data);
temp = temp.next;
}
//将 head 置空 然后重新添加
head = new Node(null);
//把队列的结点吐出来
while(queue.length > 0){
//刚刚push是从后往前添加,所以现在shift是
//从前往后吐出来。因此达到先进先出的效果
this.add(queue.shift());
}
};
}
//main 函数
function main(){
var list = new LinkList();
//添加元素
for(var i = 0; i < 10; i++){
list.add(i);
}
//打印原链表
list.print();
document.write("<br/>");
//翻转链表
list.rev();
//打印翻转后的
list.print();
}
main();
翻转
购物车
刚才把链表翻转了一下,主要目的不是锻炼数据结构,而是巩固JavaScript编程语法。如果要学习数据结构,个人是建议使用C语言或者C++语言来实现会更好一些。因为C/C++语言比较接近底层,特别是C语言。
购物车呢,昨天使用jQuery已经实现过一遍了,那么今天我就打算使用JavaScript来实现一遍。当然,这一次我会尽量把网页做的好看一点,当然实际的功能和昨天还是差不多。更多的还是为了巩固。做完购物车之后就要开始学习bootstrap和vue了。
购物车的页面
这个购物车的页面我是对京东购物车的一个模仿。当然我也只是拿来学习用的,并不是拿去商业用途。还望别介意哈。
这个页面呢是使用纯HTML+CSS画的。然后JavaScript是用来干什么的呢?需求如下:
功能需求:
1: 全选功能:而且点击复选框也会自动勾选全选框。不能有BUG
2: 计算功能:通过商品数量的增加旁边的价格也跟着增加
3: 删除功能:删除购物车中的商品
4: 结算功能:算出最后应该付款的价格
这个项目在JavaScript上的需求比昨天的都要简单,主要练习的方向是HTML和CSS。因为等下学框架的时候,比如说bootstrap框架它都是把这些底层封装好的。所以在学习框架之前先赶紧用一遍底层。
如果想到了一个需求的解决方法,但是又不知道用什么标签或者属性。那么《菜鸟教程》或者《w3school》这两个网站可以帮助自己。也可以在额外创建一个专门做实验的html文件。可以临时试试它的效果如何。
还有一件事就是,不管是HTML、CSS还是JavaScript。又或者其他语言,比如说Java，Python等。永远都不要花心思去记那些工具,方法什么的。只要知道有这个东西,然后它底层是怎么一回事就好了。知道原理写代码的时候看API能够看得懂就好了,因为人不可能全都记得住。有这个时间,还不如多去钻研一些逻辑思维,或者数据结构与算法。RBAC,设计模式什么的。当然学习底层个人觉得比较好的方法可以先学点C/C++语言。因为C语言是底层。就比如说垃圾回收机制,如果学过C语言的人他就能很快听得懂,学过C++就知道析构函数这种东西。个人观点，不喜勿喷,当然如果有大神的话,请求指点。因为本人是个菜鸟。哈哈^ ^。
在这里呢,使用两个文件来写。一个文件专门写CSS,另一个则是HTML+JavaScript。文件名字我也懒得取了,直接new_file省事。
代码实现
CSS全局设置
这些都是比较常用的格式,主要是为了美观。我自己也是在网上搜索的。甚至说接下来的页面,我也会边看手册边写,就像看字典一样。因为我实话实说我真的没法记住它们。但是看手册的话,还是可以拼出来的。
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{ margin: 0px; padding: 0px;}
body{ text-align: center;font-size:14px;}
a{ text-decoration: none;}
li{ list-style: none;}
如何使用CSS定位HTML标签的位置来设置格式?
<!-- 这里先写好class,等下到了CSS文件里,就可以根据这个class 找到该标签的位置,然后设置格式 -->
<div class="nav">
</div>
.nav{
height: 30px;
background-color: #f1f1f1;
}
基本的事项刚刚也说完了,现在直接放代码了。由于HTML和CSS代码比较多,而且也都是拼出来的没什么逻辑性,所以CSS就不放笔记里来了,HTML我也删减一部分,只保留绑定了事件的标签。笔记尽量记一些有逻辑性的东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="css/shop.css"/>
<script type="text/javascript"> //获得所有多选框的对象 var all = document.getElementsByName("select"); function isSelectAll(obj){ var flag = obj.checked; for(i in all){ all[i].checked = flag; } } function isSelectAllPlus(obj){ //默认全选 var flag = true; for(var i = 1; i < all.length - 1; i++){ //如果有一个没选那就不是全选 if(!all[i].checked){ flag = false; //也没必要继续循环判断了 break; } } //改变第一个和最后一个框 all[0].checked = flag; all[all.length - 1].checked = flag; } function checkAdd(obj,sigle){ var pre; if(sigle == "1"){ //获得下一个结点 pre = obj.nextElementSibling; //如果数量大于0 if(Number(pre.value) > 0){ //获得节点的value值 pre.value=Number(pre.value)-1; } }else{ //获得上一个结点对象 pre = obj.previousElementSibling; //获得结点value的值 pre.value = Number(pre.value) + 1; } //计算每一个商品的价格 //获得每一个商品的单价 var val=pre.parentNode.previousElementSibling.innerHTML; //计算总的价格 var num =Number(val)*Number(pre.value); //把总的价格赋值给指定的对象 pre.parentNode.nextElementSibling.innerHTML="￥"+num; } function deleteByThis(obj){ //获得父节点的div 这么多parent的原因昨天体验过 var divNode = obj.parentNode.parentNode.parentNode; divNode.remove(); } function countMoney(){ //统计商品的总价格 var count = 0; //统计是否有勾选的对象 var checkedNum = 0; //统计商品的数量 var number = 0; //循环遍历 for(var i = 0; i <all.length; i++){ //如果选中才会进入计算 if(all[i].checked){ //商品的数量 checkedNum++; //获得ul父结点 var par = all[i].parentNode.parentNode; //获得指定ul下面的所有的li var li= par.getElementsByTagName("li"); //单个商品的总价格 var money=li[6].innerText.split("￥")[1]; //获得所有商品的总价格 count += Number(money); document.getElementById("countMoney").innerText=count; //获得商品的数量 var shopCount=li[5].getElementsByTagName("input"); var num=shopCount[0].value; number+=Number(num); //获得商品数量统计的对象 document.getElementById("snum").innerText=number; } } //如果没有勾选自然就都是0 if(checkedNum==0){ document.getElementById("countMoney").innerText=0; document.getElementById("snum").innerText=0; } } </script>
</head>
<body>
<!--显示菜单的结束-->
<!--商品详情展示开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="select" onclick="isSelectAllPlus(),countMoney()"/> </li>
<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
<li class="info_3"><a>刀锋之影</a></li>
<li class="info_4"><a>经典皮肤</a> </li>
<li class="info_5">6300</li>
<li class="info_6">
<button onclick="checkAdd(this,1),isSelectAllPlus(),countMoney()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkAdd(this,2),isSelectAllPlus(),countMoney()">+</button>
</li>
<li class="info_7">￥6300</li>
<li>
<a href="javascript:viod(0)" onclick="deleteByThis(this),countMoney()">删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="select" onclick="isSelectAllPlus(),countMoney()"/> </li>
<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
<li class="info_3"><a>刀锋之影</a></li>
<li class="info_4"><a>经典皮肤</a> </li>
<li class="info_5">6300</li>
<li class="info_6">
<button onclick="checkAdd(this,1),isSelectAllPlus(),countMoney()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkAdd(this,2),isSelectAllPlus(),countMoney()">+</button>
</li>
<li class="info_7">￥6300</li>
<li>
<a href="javascript:viod(0)" onclick="deleteByThis(this),countMoney()">删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="select" onclick="isSelectAllPlus(),countMoney()"/> </li>
<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
<li class="info_3"><a>刀锋之影</a></li>
<li class="info_4"><a>经典皮肤</a> </li>
<li class="info_5">6300</li>
<li class="info_6">
<button onclick="checkAdd(this,1),isSelectAllPlus(),countMoney()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkAdd(this,2),isSelectAllPlus(),countMoney()">+</button>
</li>
<li class="info_7">￥6300</li>
<li>
<a href="javascript:viod(0)" onclick="deleteByThis(this),countMoney()">删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<!--商品详情展示结束-->
<!--结算开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="select" id="" value="" onclick="isSelectAll(this),isSelectAllPlus(this),countMoney()"/>
全选
</li>
<li><a>删除选中商品</a></li>
<li><a>移到我的关注</a></li>
<li><a>清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span id="snum">0</span>件商品</li>
<li>总价 <span id="countMoney">￥0</span></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
<!--结算结束-->
</body>
</html>
Vue框架
Vue这个框架一般多用于前后端分离的项目,就像我上班的时候前端很多都是用Vue框架。前后端分离的好处就是可以让我们后端程序员只关心后端的代码,不用去管前端。还有就是开发的时候前端和后端各顾各的,不用谁先等谁写完。后端程序员用Responsebody发个Json给前端就没啥事了。其他的页面效果都让他们写。。。我也是因为长期这样,所以前端学的特别差。不过呢,前面我也说了我是打算自己全栈的来做一次分布式电商项目,我自己的电商项目可能还是会使用bootstrap框架,个人也更喜欢那个。
学习
学习框架这一块呢,有时间可以买本书系统的学。也可以去vue官网看教程和API。真正系统的学习Vue内容还是很丰富的。我这里之所以一天学两个框架,是因为一方面我从事的是后端开发,并不是靠前端吃饭,我也想国庆以后再慢慢深入,二方面是这个东西我个人认为,还是多在项目中实践才不容易忘。不然长期不用也还是会忘记的。就像我们用惯了键盘打字以后,就很容易提笔忘字一个道理。
实现前后端分离的常用前端框架。
Vue框架用的很多,但并不是唯一。其他的前后端分离框架也有,最常用的有三款。
Vue.js 小巧，灵活，功能却很强大。在市场上占有率更高，属于成熟稳定的框架。
React相比Vue.js更新一些，近几年有追赶Vue.js的架势。更适合做移动项目。
AngularJS相比Vue更加大量一些。只有在一些大型项目中才可能被使用。
安装
安装直接运行安装软件就可以了。然后输入CMD进入命令行,输入node-v和npm-v看见版本号就知道是否安装成功。然后下面的命令也都是在CMD命令行里面使用
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack
cnpm install -g webpack webpack-cli
安装 Vue Cli
cnpm install -g @vue/cli
安装Vue.js插件(我这里是用IDEA)。创建项目的时候名字最好不要大写
template和script交互
<template>
<div id="app">
<div>
我是{
{name}},我的上司是{
{king}}
我是{
{person.name}} 今年 {
{person.age}} 岁
</div>
</div>
</template>
<script> // export是一个数据对象,我们可以写多个属性或者函数 export default { data(){ return{ name:"诸葛亮", king:"刘禅", person:{ name:"小明", age : 16 } } } } </script>
条件判断加单机事件
<!-- template -->
<div>
我是{
{person.name}} 今年 {
{person.age}} 岁
<!-- 单击事件,直接写动作,然后用 v-on: 绑定 -->
<input type="button" v-on:click="person.age = person.age + 1" value="年龄 + 1"/>
<!-- 也可以在下面定义一个函数(也可以叫方法)拿来调用,绑定的话也可以用@来作为v-on的简写 -->
<input type="button" @click="AddAge" value="年龄-1"/>
<!-- if判断 -->
<span v-if="person.age<18">未成年</span>
<span v-else-if="person.age >= 18 && person.age < 35">青年</span>
<span v-else-if="person.age >= 35 && person.age < 50">壮年</span>
<span v-else-if="person.age >= 50 && person.age < 60">中年</span>
<span v-else>老年</span>
</div>
<!-- script : export default -->
methods:{
//定义当前组件中可以使用的所有函数
AddAge:function () {
this.person.age = this.person.age - 1;
}
}
循环语句
<!-- template -->
<div>
<!-- v-bind:key 绑定一个变量,相当于定义一个临时变量 v-for="变量 in 集合" 变量是使用某已有变量,不能定义新变量。 -->
学校学院分别有
<ul>
<li v-for="My in MyClass" v-bind:key="My">
学院{
{My.name}} 班级数 {
{My.number}}
</li>
</ul>
</div>
<!-- script : export default -->
//在return返回下面再定义一个数组,我们等下用循环来遍历
MyClass:[
{"name":"信息工程系","number":8},
{"name":"机电工程系","number":6},
{"name":"经济管理系","number":7}
]
Html支持
如果希望能够解析HTML，必须使用v-html指令。v-html是任意HTML标签的属性，v-html的取值可以是Model中定义的字段。
<!-- template -->
<span v-html="MyJava"></span>
<!-- script data() return~ -->
MyJava:"我爱<b>Java</b>编程"
组件
组件：如果项目中多次用到类似效果，就可以把这个效果进行自定义组件。新建项目后默认存在HelloWorld.vue就是一个组件。组件文件必须导入才能使用。其中Helloworld为自定义名称，通过这个名称就可以调用对应组件。如果import时直接写组件名（大小写相同）IDEA会提升生成组件的路径，所以一般习惯上都是把名称定义为组件文件名。components: 组件文件只import是不能被使用的。必须在components中注册组件，注册后在中就可以通过组件名直接引用组件了。在中组件以标签形式存在，标签名为组件名。其中msg是在Helloworld中定义的props参数，表示需要传递给组件的数据。
在src下面的components目录新建一个文件,名字随便取
<template>
<div>
<div>这是一个组件</div>
<!-- 获取组件传递的参数名称和类型 -->
<div>{
{MyLove}}</div>
</div>
</template>
<script> export default { //我的组件名 name: "MyComponents", //props:定义组件传递的参数名称和类型 props:{ MyLove:String } } </script>
<style scoped> </style>
现在回到刚刚那个地方
<template>
<div id="app">
<div>
<MyComponents MyLove="Java"/>
</div>
</div>
</template>
<script> //导入,不导入会报错 import MyComponents from "@/components/MyComponents"; // export是一个数据对象,我们可以写多个属性或者函数 export default { components:{ MyComponents }, </script>
bootstrap框架
bootstrap官网
菜鸟教程
bootstrap框架也是我比较喜欢的一个框架。经过了四天的学习,明天第五天是要开始做项目了。虽然今天和昨天也做了项目,但那都是基于底层的。如果是要做比较大的项目会很费劲。就像我刚刚的那个购物车,仅仅只是一个页面,我光CSS代码就写了三百多行,这样一来效率是很低的,后天就差不多可以开始为电商做准备了。
bootstrap的官网也好还是菜鸟教程都有文档和API,官方博客等都可以看一看。如果没有能力盲写代码的话,其实看着API写代码也并没有什么不好。事实上我每次写前端代码都是看着API写的,就像JavaScript那么多事件和方法,HTML那么多标签,我也很难做到全都记住。就把它们当成字典就好了,逻辑思维其实才是更重要的。这也是为什么很多地方都喜欢面试问算法的原因。
栅格系统
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我热爱数据结构与算法分析</p>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
bootstrap是一个非常流行的框架
</p>
<p>
C语言是一门面向过程的编程语言
</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
C++是一个面向对象的编程语言
</p>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
分布式
</p>
</div>
</div>
</div>
</body>
</html>
查看源码
平时呢,写Java代码的时候总会遇到各种各样的类,各种各样的框架。所以,要了解一个没见过的框架最快速的方法就是看源码。看源码,不仅方便学习框架,也方便学习里面的算法。同样的道理放到JavaScript里面,也是行得通的。
在刚刚写购物车的时候,临时学了下CSS。其实我过去很少接触这玩意儿...因为后端学习HTML和JavaScript里面的Ajax和Json就已经足够了。jstl和thymeleaf等技术都有它们自己独特的语法。不过,现在我知道CSS文件对应着HTML页面的class。所以更换样式的话也可以根据CSS文件里面的样式,把class的名字改成框架里面CSS的名字就可以了~
比如我可以把刚才的栅格系统换一个样式,其实也很简单。直接打开bootstrap的源码就可以了。搜索我刚刚使用的col-lg-6,找到它,我可以换成一个和它同类的样式,看看变化。
当我把所有的col-lg-6换成10以后,样式就变成了这个样式。其实只要肯看源码,学习起来还是特别迅速的。虽然我不怎么学前端,但是把学习Java的这个概念移植过来。道理也还是那个道理。
BootStrap组件
在bootstrap官网里面有很多很多的组件源码参考。要用的时候可以直接拿过来,或者拿过来再修改一点点
Bootstrap按钮
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">副手</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-light">明亮</button>
<button type="button" class="btn btn-dark">黑暗</button>
<button type="button" class="btn btn-link">链接</button>
按钮组
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">左边</button>
<button type="button" class="btn btn-secondary">中间</button>
<button type="button" class="btn btn-secondary">右边</button>
</div>
小弹窗(英文翻译是卡片...我感觉不太对劲所以就理解成小弹窗)
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">一些快速的示例文本可在卡标题上构建，并构成卡内容的大部分。</p>
<a href="#" class="btn btn-primary">跳转</a>
</div>
</div>
轮播
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/tree.png" class="d-block w-100" alt="..." height="200">
</div>
<div class="carousel-item">
<img src="../img/wather.png" class="d-block w-100" alt="..." height="200">
</div>
<div class="carousel-item">
<img src="../img/montain.png" class="d-block w-100" alt="..." height="200">
</div>
</div>
</div>
其实还有好多好多东西,我就不一 一再CSDN上面试了。其实这个框架最主要还是要学会前后端交互。不过前后端交互可能就要等到写项目的时候了。因为平时上班我也只是发个Json给前端就不管不问了,这次全栈的来写一个大项目,还是要多多学习的。今天就用Bootstrap随便写一个登陆页面和后台管理就结束了吧。
使用BootStrap实现一个登录框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body background="../img/tree.png"; style=" background-repeat:no-repeat ;background-size:100% 100%; background-attachment: fixed;">
<div class="modal-dialog" style="margin-top: 10%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" id="myModalLabel">登录</h4>
</div>
<div class="modal-body" id = "model-body">
<div class="form-group">
<input type="text" class="form-control"placeholder="用户名" autocomplete="off">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="密码" autocomplete="off">
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-primary form-control">登录</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-default form-control">注册</button>
</div>
</div>
</div>
</div>
</body>
</html>
刚刚在网上随便找了张图片做背景。今天先学到这里。明天还是老规矩,先用JavaScript实现一个数据结构,巩固语法的记忆。然后就来一个SpringBoot和Bootstrap联合的小项目。国庆七天!绝不颓废！
