第七十三篇 jq進階與bootstrap瞭解
//參考文檔 jquery API: "http://jquery.cuishifeng.cn/css.html"
1、jq屬性操做
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性操做</title>
</head>
<body>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=499418075,2365134365&fm=26&gp=0.jpg" alt="">
</body>
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// console.log(jQuery) //和$同屬於jQuery對象，裏面是整個文檔（模塊/庫）
// console.log($)
let new_img_src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1101396331,1808533212&fm=26&gp=0.jpg";
$('img').click(function (event) {
// console.log(event)
//js操做
// console.log(this.getAttribute('src')); //獲取當前對象的屬性值
// this.setAttribute('src', new_img_src); //設置對象屬性值，用新屬性替換舊屬性
//jq操做
// console.log($(this).attr('src')); //獲取當期對象的屬性值。this就是img標籤
$(this).attr('src', new_img_src); //設置當前對象的屬性值，直接用attr方法進行新舊屬性的替換
console.log($(this).css('background')); //經過css樣式能夠獲取當前對象的背景屬性的值（字符串類型），其中包含了rgba(n, n, n, n)這個值，"n"是0到255的數字類型。
})
</script>
</html>
2、jq的鏈式操做
1.實現鏈式編程的核心，是對象中的每個方法都會返回當前對象javascript
2.在方法中，js提供一個this的關鍵字，表示當前對象，this是實現鏈式編程的核心css
<script>
var obj = {
屬性：屬性值
// name: "obj_name"
方法名：function () {
// console.log(this); //打印當前自身對象
// console.log(this.name); //調用自身對象的屬性
函數體;
return this; //實現鏈式編程的原理，就是在調用方法後，返回自身對象
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq的鏈式操做</title>
</head>
<body>
<h1>jq的鏈式操做對象</h1>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// jq函數的執行結果若是不是明確的 內容 | 子標籤 | 屬性值 ...，均返回的是對象自己
// css:訪問匹配元素的樣式屬性，好比顏色、寬高、背景...
// attr:設置或返回被選元素的屬性值，好比標籤內部的src屬性、title屬性、style屬性...
// 回顧：標籤對象的innerHTML屬性能夠獲取到標籤中的內容，且會過濾HTML語法
$('h1').css('color', 'blue').click(function () {
alert('hello world')
console.log(this)
console.log(this.innerHTML)
}).attr('title', 'hello').css({"background": "red"})
</script>
</html>
jq建立文檔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq建立文檔</title>
<style>
//設置盒子樣式
.box {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
</head>
<body>
<h1>生成一個box</h1>
<!--<div class="box"></div>-->
<!--<div class="box"></div>-->
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//經過let聲明獲得一個能夠隨機生成整數的函數變量
let randomNum = (min, max) => {
return parseInt(Math.random() * (max - min + 1) + min)
};
//再聲明一個函數變量，這個變量調用時，會經過調用隨機數函數來獲得4個隨機數，並將這4個數和rgba拼接，而後返回
let getRandomColor = () => {
r = randomNum(0, 255);
g = randomNum(0, 255);
b = randomNum(0, 255);
a = randomNum(0, 255);
return 'rgba( '+ r +', '+ g +', '+ b +', '+ a +' )';
//最後綁定事件
$('h1').click(function () {
// 點擊一下，生成一個box
// 1）建立一個標籤節點
let $box = $('<div class="box"></div>');
// 2）設置標籤節點（樣式、內容、事件）
$box.css('background', getRandomColor()).click(function () {
console.log($(this).css('background-color'))
});
// 3）將標籤節點添加到頁面指定位置
$('body').append($box);
})
</script>
</html>
jq的文檔操做
1.$(父對象).append($(子對象)：將子對象添加到父對象中最後面html
2.$(父對象).prepend($(子對象)：將子對象添加到父對象中最前面java
3.$(子對象).clone().prependTo($(父對象))：複製一個子對象，將副本添加到父對象中最前面python
4.$(兄弟對象).after($(目標對象))：將目標對象放在兄弟對象後面jquery
5.$(兄弟對象).before($(目標對象))：將目標對象放在兄弟對象前面ajax
6.$(對象).empty()：清空對象內部內容以及它的子標籤編程
7.$(對象).remove()：不保留事件等屬性，而後刪除自身。通常須要先將這個對象賦值給變量，而後配合append()來使用，才能看出效果。json
8.$(對象).detach()：保留事件等屬性，而後刪除自身。和remove用法一致，通常做爲對比，來分狀況使用。flask
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔操做</title>
</head>
<body>
<b class="b1">加粗</b>
<p class="p1">
<span>原內容</span>
</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// 父在最後加子
$('.p1').append($('.b1'));
// 父在最前加子
// $('.p1').prepend($('.b1'));
// 產生一個副本(本體就不參與操做)，添加到父的最前
// $('.b1').clone().prependTo($('.p1'));
// 添加後兄弟
// $('.p1').after($('.b1'));
// 添加前兄弟
// $('.p1').before($('.b1'));
$('.b1').click(function () {
alert(1)
});
// 清空內部內容與子標籤
// $('.p1').empty();
// 不保留事件等的刪除自身
// let $b1 = $('.b1').remove();
// 保留事件等的刪除自身
let $b1 = $('.b1').detach();
$('.p1').append($b1);
</script>
</html>
jq文檔關係
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq的文檔關係</title>
</head>
<body>
<div class="wrap">
<p class="p0">0</p>
<p class="p1">1</p>
<p class="t">
<a href="">2</a>
<a href="">2</a>
</p>
<p class="p3">3</p>
<p class="p4">4</p>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// 1）從一個含有多個js對象的jq對象中取出只裝有一個js對象的jq對象
// $('p')是三個p，只想拿第2個p
// console.log($('p'));
// console.log($('p').eq(1)); //根據索引，獲取指定對象
// console.log($('p.t'));
let $p = $('p.t');
console.log($p.children());
console.log($p.parent());
console.log($p.parents());
console.log($p.next());
console.log($p.nextAll()); //先後相鄰的對象
console.log($p.prev()); //前一個對象
console.log($p.prevAll());
console.log($p.siblings()); //兄弟對象
</script>
</html>
jq輪播圖案例：包含定時器知識點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>佈局案例</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.scroll-view {
width: 1226px;
height: 460px;
background-color: orange;
margin: 50px auto 0;
position: relative;
}
.scroll-menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 234px;
padding: 20px 0;
}
.scroll-menu a {
display: block;
/*height: 42px;*/
line-height: 42px;
color: white;
/*padding-left: 30px;*/
text-indent: 30px;
}
.scroll-menu a span {
/*參考的不是a，是ul*/
position: absolute;
right: 20px;
}
.scroll-menu a:hover {
background-color: red;
}
.scroll-menu-blank {
width: calc(1226px - 234px);
height: 460px;
background-color: red;
/*參考的是ul*/
position: absolute;
top: 0;
left: 234px;
display: none;
}
.scroll-menu li:hover ~ .scroll-menu-blank {
display: block;
}
.scroll-menu-blank:hover {
display: block;
}
</style>
<style>
.scroll-view {
width: 1226px;
position: relative;
}
.scroll-scroll {
width: 1226px;
height: 460px;
position: absolute;
}
.scroll-img li {
position: absolute;
}
.scroll-img a {
display: block;
}
.scroll-img a img {
width: 100%;
}
</style>
<style>
.scroll-btn div {
position: absolute;
width: 40px;
height: 70px;
font-size: 30px;
line-height: 70px;
text-align: center;
color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.scroll-btn div:hover {
background-color: rgba(0, 0, 0, 0.4);
color: white;
}
.scroll-btn-left {
top: calc(50% - 35px);
left: 234px;
}
.scroll-btn-right {
top: calc(50% - 35px);
right: 0;
}
</style>
<style>
.scroll-point {
width: 120px;
height: 40px;
/*background-color: orangered;*/
position: absolute;
right: 10px;
bottom: 0;
}
.scroll-point li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.6);
margin-right: 10px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.3);
}
.scroll-point li:hover {
background-color: white;
}
</style>
<style>
.scroll-menu, .scroll-btn div, .scroll-point {
z-index: 2;
}
.scroll-img li {
opacity: 0;
/*transition: .5s;*/
}
.scroll-img li.active {
opacity: 1;
z-index: 1;
}
.scroll-point li.active {
background-color: white;
}
</style>
</head>
<body>
<div class="scroll-view">
<!--輪播圖-->
<div class="scroll-scroll">
<ul class="scroll-img">
<li class="active">
<a href="https://www.baidu.com">
<img src="img/001.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/002.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/003.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/004.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/005.png" alt="">
</a>
</li>
</ul>
<div class="scroll-btn">
<div class="scroll-btn-left"><</div>
<div class="scroll-btn-right">></div>
</div>
<ul class="scroll-point">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--菜單欄-->
<ul class="scroll-menu">
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<li>
<a href="">
手機電話卡
<span>></span>
</a>
</li>
<div class="scroll-menu-blank">
</div>
</ul>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let currentIndex = 0;
// 上一張
$('.scroll-btn-left').click(function () {
console.log('上一張');
currentIndex--;
if (currentIndex < 0) currentIndex = 4;
$('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
$('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
});
// 下一張
$('.scroll-btn-right').click(function () {
console.log('下一張');
currentIndex++;
if (currentIndex >= 5) currentIndex = 0;
$('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
$('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
});
// 第幾張
$('.scroll-point li').click(function () {
index = $(this).index();
console.log('第%d張', index);
currentIndex = index;
$(this).addClass('active').siblings().removeClass('active');
$('.scroll-img li').eq(index).addClass('active').siblings().removeClass('active');
})
</script>
<script>
// console.log(currentIndex);
// 一次性定時器：setTimeout(fn, 時間)
/*
setTimeout(function () {
currentIndex++;
if (currentIndex >= 5) currentIndex = 0;
$('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
$('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
}, 1000);
*/
// 持續性定時器
let timer = null;
function startScroll() {
timer = setInterval(function () {
currentIndex++;
if (currentIndex >= 5) currentIndex = 0;
$('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
$('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
}, 3500);
}
startScroll();
// 清除定時器
// clearInterval(timer);
// clearTimeout(timer);
function stopScroll() {
clearInterval(timer);
}
// 懸浮中止輪播
$('.scroll-view').mouseover(function () {
stopScroll();
});
// 移開從新輪播
$('.scroll-view').mouseout(function () {
startScroll();
});
</script>
</html>
jq菜單切換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<style>
.menu {
width: 1226px;
margin: 0 auto;
}
.menu-title {
width: 100%;
/*height: 40px;*/
background-color: #ccc;
}
.menu-title:after {
content: '';
display: block;
clear: both;
}
.menu-title .l {
float: left;
}
.menu-title .r {
float: right;
}
.menu-title .r li {
float: left;
margin-right: 20px;
/*line-height: 40px;*/
cursor: pointer;
padding-top: 10px;
}
.menu-title .r li:hover, .menu-title .r li.active {
color: orangered;
border-bottom: 2px solid orangered;
}
.menu-context {
width: 100%;
/*height: 220px;*/
background-color: pink;
}
.menu-context:after {
content: '';
display: block;
clear: both;
}
.menu-context li {
width: 50%;
float: left;
height: 220px;
border-radius: 50%;
background-color: cyan;
}
.menu-context li a {
display: block;
font: bold 60px/220px '微軟雅黑';
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="menu">
<ul class="menu-title">
<li class="l">
<h1>電子產品</h1>
</li>
<li class="r">
<ul>
<li class="active">
<span>電視</span>
</li>
<li>
<span>手機</span>
</li>
<li>
<span>電腦</span>
</li>
</ul>
</li>
</ul>
<ul class="menu-context">
<li>
<a href="https://www.baidu.com">電視1</a>
</li>
<li>
<a href="https://www.baidu.com">電視2</a>
</li>
</ul>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
data = [
[
{
ctx: '電視1',
url: 'https://www.baidu.com'
},
{
ctx: '電視2',
url: 'https://www.baidu.com'
},
],
[
{
ctx: '手機1',
url: 'https://www.sina.com.cn'
},
{
ctx: '手機2',
url: 'https://www.sina.com.cn'
},
],
[]
];
$('.menu-title .r li').mouseover(function () {
$(this).addClass('active').siblings().removeClass('active');
let index = $(this).index();
let ul_data = data[index];
let as = $('.menu-context li a');
// console.log(ul_data);
// console.log(as)
// a個數與數據中字典的個數一致，依次賦值
for (let i = 0; i < ul_data.length; i++) {
as.eq(i).attr('href', ul_data[i].url).text(ul_data[i].ctx);
}
})
</script>
</html>
socket簡易後臺
import socket
server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('127.0.0.1', 8801))
print('瀏覽器訪問：http://127.0.0.1:8801')
server.listen(5)
conn, _ = server.accept()
data = conn.recv(1024)
print(data)
# 響應必定要知足http協議
conn.send(b'HTTP1.1 200 OK\r\n\r\nhehe\r\n')
flask後臺
# pip3 install flask
# pip3 install Flask-Cors
from flask import Flask, request
from flask_cors import CORS
import json
# 聲明服務
server = Flask(__name__)
# 解決ajax跨域沒法拿到數據
CORS(server, supports_credentials=True)
# 處理請求與響應的函數
@server.route('/') # "/" 根路由
def home():
return '<h1>Home Page</h1>'
@server.route('/login')
def login():
return '<h1>Login Page</h1>'
@server.route('/data')
def data():
print(request.args)
print(request.args.get('username'))
print(request.args.get('password'))
res_data = {
'status': 0,
'msg': 'request success',
'data': {
'name': 'Owen',
'age': 18
}
}
return json.dumps(res_data)
# 啓動服務器
if __name__ == '__main__':
server.run(host='localhost', port=8801)
jq的ajax請求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
</head>
<body>
<h1>ajax請求</h1>
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<button type="button" class="btn">發送請求</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$('.btn').click(function () {
username = $('#username').val();
password = $('#password').val();
// 有輸入框沒內容，直接結束事件，不日後臺發送請求
if (!(username && password)) {
return
}
// 代碼如何日後臺發送請求
$.ajax({
// 請求的路徑 - 接口
url: 'http://localhost:8801/data',
// 請求的方式 - get|post
type: 'get',
// 請求的數據
data: {
username,
password,
},
// 請求成功的響應
success: function (response) {
console.log(response, typeof response);
obj = JSON.parse(response);
console.log(obj, typeof obj);
let name = obj.data.name;
$('h1').text(name)
},
// 請求失敗的響應
error: function (error) {
console.log(error);
}
})
})
</script>
</html>
bs引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bs的引入</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
</head>
<body>
<h1 class="bg-success">bs就是按照其規定的頁面結構搭建標籤</h1>
<h2>給這些標籤設置預約義好的類名，引入bs.css就能夠直接得到提早寫好的樣式</h2>
<h2>給這些標籤設置預約義好的自定義屬性，引入bs.js就能夠直接得到提早寫好的邏輯</h2>
<h2>bs框架的js文件中採用的是jq語法，因此要使用bs.js要提早導入jq</h2>
<h3>導入bs：本地導入 | CDN導入</h3>
<div class="h1 bg-primary text-center">給.h1類名我就是h1樣式</div>
<div class="btn btn-primary btn-block">按鈕</div>
</body>
</html>
bs運用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bs運用</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
line-height: 60px;
}
.o-mn li {
width: 25%;
}
.o-i {
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="bg-primary text-center">bs運用</h1>
<h2>
<i class="o-i glyphicon glyphicon-heart"></i>
<div class="glyphicon glyphicon-envelope"></div>
</h2>
<div class="box">
<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="https://www.baidu.com">稻草人</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 navbar-right">
<li><a href="#">Owen</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">我的中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">信息</a></li>
<li><a href="#">修改密碼</a></li>
<li><a href="#">詳情頁面</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出登陸</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" action="https://www.baidu.com/s">
<div class="form-group">
<input name="wd" type="text" class="form-control" placeholder="搜索內容">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="box">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>這是巨幕這是巨幕這是巨幕這是巨幕這是巨幕這是巨幕這是巨幕這是巨幕這是巨幕這是巨幕這是巨幕</p>
<p class="clearfix bg-primary"><a class="btn btn-primary btn-lg pull-right" href="#" role="button">Learn
more</a></p>
</div>
</div>
<ul class="o-mn clearfix">
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海報</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">購買</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海報</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">購買</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海報</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">購買</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海報</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">購買</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
</ul>
<!--柵格化系統: 將全部標籤等分爲12等分-->
<style>
/*.box {*/
/*width: 1000px;*/
/*}*/
.b1, .b2, .b3, .b4 {
height: 100px;
}
.b1 {
background-color: orangered;
}
.b2 {
background-color: red;
}
.b3 {
background-color: tomato;
}
.b4 {
background-color: pink;
}
</style>
<div class="box">
/* 經過類名來控制 col-md-3表示只取12等分中的3份 */
<div class="b1 col-md-3 col-sm-6"></div>
<div class="b2 col-md-6 col-md-offset-3 col-sm-6"></div>
<div class="b3 col-xs-1"></div>
<div class="b4 col-xs-11"></div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bs/js/bootstrap.js"></script>
</html>
相關文章
- 1. Python之路【第十七篇】：Django【進階篇 】 Python之路【第十七篇】：Django【進階篇 】
- 2. jQ進階篇--deferred對象詳解
- 3. Python之路【第十七篇】：Django【進階篇 】
- 4. 第十三章 Logstash進階
- 5. 第十七篇
- 6. 【Python之路】第二十三篇--Django【進階篇】
- 7. 第七十一篇 js進階之事件、頁面操做
- 8. 第七十二篇 jquery基礎
- 9. 第十篇.bootstrap輪播
- 10. Java進階(三十七)java 自動裝箱與拆箱
- 更多相關文章...
- • Scala 高階函數 - Scala教程
- • 第一個Hibernate程序 - Hibernate教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
