第七十三篇 jq进阶与bootstrap了解

//参考文档
jquery API: "http://jquery.cuishifeng.cn/css.html"

一、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>

二、jq的链式操作

1.实现链式编程的核心，是对象中的每一个方法都会返回当前对象

2.在方法中，js提供一个this的关键字，表示当前对象，this是实现链式编程的核心

<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($(子对象)：将子对象添加到父对象中最后面

2.$(父对象).prepend($(子对象)：将子对象添加到父对象中最前面

3.$(子对象).clone().prependTo($(父对象))：复制一个子对象，将副本添加到父对象中最前面

4.$(兄弟对象).after($(目标对象))：将目标对象放在兄弟对象后面

5.$(兄弟对象).before($(目标对象))：将目标对象放在兄弟对象前面

6.$(对象).empty()：清空对象内部内容以及它的子标签

7.$(对象).remove()：不保留事件等属性，然后删除自身。一般需要先将这个对象赋值给变量，然后配合append()来使用，才能看出效果。

8.$(对象).detach()：保留事件等属性，然后删除自身。和remove用法一致，一般作为对比，来分情况使用。

<!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">&lt;</div>
                <div class="scroll-btn-right">&gt;</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>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</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>

原文地址：https://www.cnblogs.com/itboy-newking/p/11315691.html

时间： 2024-08-30 05:53:32

第七十三篇 jq进阶与bootstrap了解的相关文章

【OpenCV入门指南】第十三篇人脸检测

[OpenCV入门指南]第十三篇人脸检测本篇介绍图像处理与模式识别中最热门的一个领域--人脸检测(人脸识别).人脸检测可以说是学术界的宠儿,在不少EI,SCI高级别论文都能看到它的身影.甚至很多高校学生的毕业设计都会涉及到人脸检测.当然人脸检测的巨大实用价值也让很多公司纷纷关注,很多公司都拥有这方面的专利或是开发商业产品出售. 在OpenCV中,人脸检测也是其热门应用之一.在OpenCV的特征检测专题就详细介绍了人脸检测的原理--通过Haar特征来识别是否为人脸.Haar特征检测原理与Haa

第五篇函数进阶

目录第五篇函数进阶一闭包函数二装饰器三迭代器四三元表达式五列表推导式六字典生成式七生成器八递归九匿名函数十内置函数第五篇函数进阶 ==回顾基础== 函数对象:可以将定义在函数内的函数返回到全局使用,从而打破函数的层级限制. 名称空间与作用域:作用域关系在函数定义阶段时就已经固定死了,与调用位置无关,即在任意位置调用函数都需要跑到定义函数时找到作用域关系. 一闭包函数闭包闭就是封闭(函数内部函数),包就是包含(该内部函数对外部作用域而非全局作用

Spring Cloud第十三篇 | Spring Boot Admin服务监控

第十三篇 Integration Services：SSIS变量

本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将升级我们的解决方案为SQL Server 2012 Integration Services,演示SSIS变量,变量配置和表达式管理动态值.在前面的练习中我们已经使用过变量,但我们没有深入学习,这一篇,我们将关注SSIS变量.…………一旦安装好,你可以设置主题颜色,工具->选项->环境->常

SQL Server 索引的自动维护 <第十三篇>

在有大量事务的数据库中,表和索引随着时间的推移而碎片化.因此,为了增进性能,应该定期检查表和索引的碎片,并对具有大量碎片的进行整理. 1.确定当前数据库中所有需要分析碎片的表. 2.确定所有表和索引的碎片. 3.考虑一下因素以确定需要进行碎片整理的表和索引. 高的碎片水平-avg_fragmentation_in_percent大于20%: 不是非常小的表或索引-也就是page_count大于8的: 4.整理具有大量碎片的表和索引: 这里给出一个样板SQL存储过程,它执行以下操作: 遍历系统上的

第二十三篇责任与义务

第二十三篇责任与义务我们来到这个世界,本身就有自身的责任与义务.如果没有责任与义务,我们就失去了生活的意义,因为一个人必须活出价值才有意义:没有价值地活着,那就成为了宇宙的累赘.以这样的方式来为亲人们讲解我们的"责任与义务"非常有必要.如果一个人活在这个世界上都不明白自己的责任与义务是什么,那就会失去方向.这一篇我就为亲人们简单地讲解我们在这个宇宙中的责任与义务. 人类作为高智慧物种,如果没有责任与义务也就不会出现在宇宙中.因为创造者在创造我们人类这个物种的时候就给到了定位:也是

NHibernate 操作视图第十三篇

NHibernate 操作视图第十三篇在NHibernate中,可以把视图当表一样操作,只需要记住一点就是,视图是只读的,因此映射实体的setter应该改为protected. 新建一个视图如下: 持久化类: public class CountryPersonModel { public virtual int PersonId { get; protected set; } public virtual string PersonName { get; protected set; }

第二十三篇:Windows中的ACPI

一直不太清楚ACPI驱动在WINDOWS中的作用. 甚至不了解ACPI协议的作用. 于是, 随便翻了下"格蠹汇编"中的第24章, 如何跟踪ACPI代码, 算是对ACPI有了一个初步性的了解. ACPI向OS报告硬件信息, 而OS通过ACPI控制硬件. ACPI就是OS与硬件/固件之间的一个标准接口协议. ACPI通过ASL(ACPI SOURCE LANGUAGE)来描述系统硬件的属性与方法, ASL最终会被编译为AML(ACPI MACHINE LANGUAGE)的字节码(BYTEC

解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘（译）

原文:解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘(译) 解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘(译) http://improve.dk/the-anatomy-of-row-amp-page-compressed-integers/ 当解决OrcaMDF对行压缩的支持的时候,视图解析整数的时候遇到了一些挑战. 和正常的未压缩整数存储不同的是这些都是可变长度--这意味着1个整数的值50只占用1个字节,而不是