前端框架之Bootstrap

2023-09-27 15:32:28

昨日内容回顾

jQuery简介

第三方类库 封装了js代码 兼容性更高

宗旨：write less do more.

链式操作：一行代码搞定所有

语法关键字：
	jQuery === $()

两种导入jQuery的方式

1.自行下载第三方代码并导入

2.使用免费的CDN加速服务
	网站：bootcdn

诸多选择器

# 基本选择器：
	$('#d1') $('.c1') $('p')
    
# 组合选择器
	$('div#d1') $('#d1 .c1') $('#d1,span,.c1')
    
# 其他选择器
	next()  prev() parent() children() siblings()
	:text :checkbox

节点操作

addClass()  removeClass()  hasClass() ...

text()  html()  val()  files

append()  prepend()  after() ...

事件

# 两种绑定方式
	jQuery对象.事件名(function(){})
	jQuery对象.on('事件名',function(){})
 
事件练习：
	input实时监听		
	change文本域变化

今日内容概要

jQuery补充知识
前端框架之bootstrap

内容详细

1.阻止后续事件执行

# return false; // 常见阻止表单提交等

# e.preventDefault();



# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>牛逼的网站</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <p>
       <input type="text">
    </p>
    <input type="submit" id="d1">
    <script>
        $('#d1').click(function (e) {
            alert(123)
            // 1.阻止该标签后续事件的执行 方式1   推荐
            return false
            // 2.阻止该标签后续事件的执行 方式2   了解
            // e.preventDefault()
        })
    </script>
</form>
</body>
</html>

2.事件冒泡

# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>牛逼的网站</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>
<script>
    $('div').click(function (e) {
        alert('div')
    })
    $('p').click(function (e) {
        alert('p')
        // 阻止事件冒泡的方式1
        // return false
        // 阻止事件冒泡的方式2
        // e.stopPropagation()
    })
    $('span').click(function (e) {
        alert('span')
    })
</script>
</body>
</html>

3.文档加载

# 文档加载方式有时候会写在 head标签中 了解即可不推荐使用
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // 原生js文档加载方式
        window.onload = function () {}
        // jQuery文档加载方式01
        $(document).ready(function () {})
        // jQuery文档加载方式02
        $(function(){})
    </script>
</head>

4.事件委托

"""
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件
"""

# 复制事件
<body>
<script>
        $('button').click(function () {
            // 创建一个button标签
            var btnEle = document.createElement('button')
            // 设置内部文本
            btnEle.innerText = '点我'
            // 将button标签添加到body内部
            $('body').append(btnEle)
        })
    </script>
</body>


# 事件委托:每一行的每个按钮都能触发相应的事件
<body>
<button>选我</button>
    <script>
        // 将body内部所有的点击事件委托给button按钮执行
        $('body').on('click','button',function () {
            // 创建一个button标签
            var btnEle = document.createElement('button')
            // 设置内部文本
            btnEle.innerText = '点我'
            // 将button标签添加到body内部
            $('body').append(btnEle)
        })
</script>
</body>



# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>牛逼的网站</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <button>选我</button>
    <script>
        // 将body内部所有的点击事件委托给button按钮执行
        $('body').on('click','button',function () {
            // 创建一个button标签
            var btnEle = document.createElement('button')
            // 设置内部文本
            btnEle.innerText = '点我'
            // 将button标签添加到body内部
            $('body').append(btnEle)
        })


        // $('button').click(function () {
        //     // 创建一个button标签
        //     var btnEle = document.createElement('button')
        //     // 设置内部文本
        //     btnEle.innerText = '点我'
        //     // 将button标签添加到body内部
        //     $('body').append(btnEle)
        // })
    </script>
</body>
</html>

5.动画效果

# 基本
	show([s,[e],[fn]])
	hide([s,[e],[fn]])
	toggle([s],[e],[fn])

# 滑动
	slideDown([s],[e],[fn])
	slideUp([s,[e],[fn]])
	slideToggle([s],[e],[fn])

# 淡入淡出
	fadeIn([s],[e],[fn])
	fadeOut([s],[e],[fn])
	fadeTo([[s],o,[e],[fn]])
	fadeToggle([s,[e],[fn]])

# 自定义（了解即可）
	animate(p,[s],[e],[fn])



# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        div {
            position: relative;
            display: inline-block;
        }

        div > i {
            display: inline-block;
            color: red;
            position: absolute;
            right: -16px;
            top: -5px;
            opacity: 1;
        }
    </style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#d1").on("click", function () {
        var newI = document.createElement("i");
        newI.innerText = "+1";
        $(this).append(newI);
        $(this).children("i").animate({
            opacity: 0
        }, 1000)
    })
</script>
</body>
</html>

6.前端框架Bootstrap

# 官网：https://v3.bootcss.com/

# 下载步骤
	1.进入官网直接点击下载
	2.选择用于生产环境的Bootstrap下载
	3.下载的压缩包 自行解压到能找到的文件路径
	4.使用框架调整页面样式一般都是操作标签的class属性即可

    
# bootstrap需要依赖于jQuery才能正常执行(动态效果)


# 引入方式
	本地引入(最完整的)
		1.引入jQuery
		2.引入bootstrap的css文件
		3.引入bootstrap的js文件
        
	CDN引入
		1.引入jQuery CDN
		2.引入bootstrap css的 CDN
		3.引入bootstrap js的 CDN
"""
CDN导入可以都写到pycharm默认文本模板中 今后在新建HTML文件就会自动添加：

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
"""

7.布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式 
让pycharm记住bootstrap的关键字
"""
container		左右留白
container-fluid  左右不留白



# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 200px;
        }
    </style>
    
</head>
<body>
  <div class="container c1">左右留白布局</div>
  <div class="container-fluid c1">左右不留白布局</div>

</body>
</html>

8.栅格系统

# 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

row		行  # 一个row就是一行 一行是固定的12份
col-md-1	占几份
col-sm-1	占几份
col-xs-1	占几份
col-lg-1	占几份



# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 200px;
            border: 5px solid black;
        }
    </style>

</head>
<body>
  <div class="container">
      <div class="row">
          <div class="col-md-6 c1 col-sm-6"></div>
          <div class="col-md-6 c1 col-sm-6"></div>
      </div>
  </div>
</body>
</html>

9.表格

# 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线


# 条纹状表格
	通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

# 带边框的表格
	添加 .table-bordered 类为表格和其中的每个单元格增加边框

# 鼠标悬停
	通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
    
# 紧缩表格
	通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
    
	
	
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">用户数据</h2>
            <table class="table table-hover table-striped table-bordered">
                <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>pwd</th>
                </tr>
                </thead>

                <tbody>
                <tr class="success">
                    <th>001</th>
                    <th>jason</th>
                    <th>123</th>
                </tr>

                <tr class="danger">
                    <th>002</th>
                    <th>ja</th>
                    <th>555</th>
                </tr>

                <tr>
                    <th class="warning">003</th>
                    <th>on</th>
                    <th>999</th>
                </tr>

                </tbody>
            </table>

            <h2 class="text-center">用户注册</h2>
            <form action="">
                <p>姓名：
                    <input type="text" class="form-control">
                </p>
                <p>密码：
                    <input type="text" class="form-control">
                </p>
                <p>性别：
                    <input type="radio">男
                    <input type="radio">女
                </p>
                <p>
                    <input type="submit" class="btn btn-danger btn-block">
                </p>
            </form>
        </div>
    </div>
</div>
</body>
</html>

10.按钮组

# 可作为按钮使用的标签或元素
	为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
    
	<a href="" class="btn btn-primary">点这里</a>
	<a href="" class="btn btn-block btn-danger">重置</a>

11.图标

class="glyphicon glyphicon-heart"

# bootstrap自带的
	通过span标签修改class属性值

# fontawesome网站
	专门提供图标库  # 完美兼容bootstrap框架
	https://fontawesome.dashgame.com/

其余详细描述详见官网文档：

https://v3.bootcss.com/

码农公寓

昨日内容回顾

今日内容概要

内容详细

1.阻止后续事件执行

2.事件冒泡

3.文档加载

4.事件委托

5.动画效果

6.前端框架Bootstrap

7.布局容器

8.栅格系统

9.表格

10.按钮组

11.图标

相关文章