四天學會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標簽去掉下劃線*/
a{text-decoration: none;}
/*li的點去掉*/
li{list-style: none;}
如何使用CSS定位HTML標簽的位置來設定格式?
<!-- 這里先寫好class,等下到了CSS檔案里,就可以根據這個class
找到該標簽的位置,然后設定格式
-->
<div class="nav">
</div>
/*這里面的navigation,是根據前臺html標簽里面的class找到的*/
.nav{
height: 30px;
/*#f1f1f1是顏色,具體的對應可以查百度*/
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");
/**
* 全選操作,點擊這個按鈕其他的都會自動全選
* 但是這里不能使單選來決定是否全選
* 我們還需要另一個函式
* @param {Object} obj
*/
function isSelectAll(obj){
var flag = obj.checked;
for(i in all){
all[i].checked = flag;
}
}
/**
* 單選框決定全選框
* @param {Object} obj
*/
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;
}
/**
* 控制增加減少
* @param {Object} obj
* @param {Object} sigle
*/
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聯合的小專案，國慶七天!絕不頹廢！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/160704.html
標籤：其他
上一篇：常用RGB顏色表
下一篇：2020-10-05