前端第六课---jQuery查找标签,jQuery节点操作,jQuery操作标签 (要多记),jQuery事件绑定,事件冒泡及事件取消,Bootstrap页面框架
昨日内容回顾
-
BOM操作
浏览器对象 1.window.open() 2.window.close() 3.window.location.href # 获取当前网页网址 window.location.href = /路由/ # 跳转到对应的路由!!! 4.window.history.forward()\back() # 网页前进于后退 5.window.location.reload() # 网页重新加载 6.alert()\confirm()\prompt() # 警告框 确认框 提示框 7.setTimeout()\clearTimeout() # 开启定时任务 取消 setInterval()/clearInterval() # 开启循环定时任务
-
DOM操作
文档对象模型 1.查找标签 document.getElementById() 标签对象 document.getElementsByTagName() [标签对象,] document.getElementsByClassName() [标签对象,]
2.标签操作
let xxxEle = document.createElement() # 创建标签,并用变量名接收一下
xxxEle.innerText = '' # 给标签添加一些内部文本
xxxEle.setAttribute(属性名,属性值) # 给标签添加一些属性!!!
xxxEle.style.样式名 = 样式值 # 给标签调整一下样式!!
3.事件
给标签绑定在特定场景下触发的功能!!!
1.查找标签
2.绑定事件(常见的事件: onclick单击事件 ondbclick双击事件 onfocus获取焦点事件 onblur失去焦点事件 onchange域的内容被改变事件 )
3.绑定事件的标准语法: 标签对象.on事件名 = function(){具体的事件代码}
* jQuery简介
```python
1.发展历史
2.引入方式
3.基本使用
4.标签对象与jQuery对象
今日内容概要
- 作业讲解
- jQuery查找标签
- jQuery节点操作
- jQuery事件绑定
- Bootstrap页面框架
今日内容详细
作业讲解
1.校验用户数据 输入用户名于密码提交后,进行简单的校验提示,当鼠标再次输入的时候提示信息清楚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery3.6.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<p>username:
<input type="text" id = 'd1'>
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id = 'd2'>
<span style="color: red"></span>
</p>
<button id = 'd3'>提交按钮</button>
<script>
let usernameEle = document.getElementById('d1')
let passwordEle = document.getElementById('d2')
let subBtn = document.getElementById('d3')
subBtn.onclick = function () {
if (usernameEle.value === 'jason') {
usernameEle.nextElementSibling.innerText = '用户名不能是jason'}
if (passwordEle.value === '123') {
passwordEle.nextElementSibling.innerText = '密码太简单!'}
}
usernameEle.onfocus = function () {
this.nextElementSibling.innerText = ''}
passwordEle.onfocus = function () {
this.nextElementSibling.innerText = ''}
</script>
</body>
</html>
主要运用的就单击事件与获取焦点事件与失去焦点事件 里面执行往span标签里面添加文本
button按钮负责绑定单击事件
用户名与密码的input标签绑定 失去焦点事件 里面执行将span标签里面的文本变为空
注意这个地方不要用form标签包裹input标签!!!
------------------------------------------------------
.
2.页面计时器
// 1.先写最简单的起步>>>:点击开始按钮 将那一刻的时间展示到input框中即可
// 2.想让展示时间的代码能够根据时间的变化反复的执行>>>:循环定时任务
// 3.再创建结束按钮点击即终止循环定时任务的执行>>>:结束定时任务
-----------------------------------
第一步功能实现:
<body>
<input type="text" id = 'd1'>
<button id = 'startBtn'>开始计时</button>
<script>
// 第一步 点击按钮 将那一刻的时间展示到input框中
let inputEle = document.getElementById('d1')
let buttonEle = document.getElementById('startBtn')
buttonEle.onclick = function () {
let currentTime = new Date() // 获取时间日期对象
inputEle.value = currentTime.toLocaleString()
// 给input框添加数据,将结构化时间转为本地时间
}
</script>
</body>
</html>
------------------------------------------------------------
第二步功能实现:
2.想让展示时间的代码能够根据时间的变化反复的执行>>>:循环定时任务
3.再创建结束按钮点击即终止循环定时任务的执行>>>:结束定时任务
<body>
<input type="text" id = 'd1'>
<button id = 'startBtn'>开始计时</button>
<button id = 'stopBtn'>停在计时</button>
<script>
// 第一步 点击按钮 将那一刻的时间展示到input框中
let inputEle = document.getElementById('d1')
let startBtnEle = document.getElementById('startBtn')
let stopBtnEle = document.getElementById('stopBtn')
function showTime() {
let currentTime = new Date() // 获取时间日期对象
inputEle.value = currentTime.toLocaleString()
// 给input框添加数据,将结构化时间转为本地时间
}
// 全局定义一个存储计时器的变量名
let t
startBtnEle.onclick = function () {
t = setInterval(showTime,1000)
// 再单击事件里面写一个循环定时任务,每隔一秒钟运行一下showTime函数
}
stopBtnEle.onclick = function () {
clearInterval(t)
// 循环定时任务必须先用变量名接收一下,这样一点停止计时按钮,就可以把循环计时任务给取消了
}
</script>
</body>
此时代码还有点小bug!!!连续按几次开始后,点击停止不了了!!!
因为每按一次开始计时按钮,都会执行一次setInterval() 每执行一次都会重新开一个循环定时任务,之前的循环定时任务也在,而变量t只能指代最后一个循环定时任务,所以 clearInterval(t)只能关闭掉t指代的那个循环定时任务,其他的循环定时任务关不掉!!!所以点击停止按钮停止不了!!
------------------------------------------------------------
所以必须控制循环定时任务的个数!!!只能让它有一个循环定时任务!!!
在开启循环任务之前,加个判断,看看变量名t是否有值,如果没有值说明t还没有指代一个计时器!
优化后代码:
<body>
<input type="text" id = 'd1'>
<button id = 'startBtn'>开始计时</button>
<button id = 'stopBtn'>停在计时</button>
<script>
// 第一步 点击按钮 将那一刻的时间展示到input框中
let inputEle = document.getElementById('d1')
let startBtnEle = document.getElementById('startBtn')
let stopBtnEle = document.getElementById('stopBtn')
function showTime() {
let currentTime = new Date() // 获取时间日期对象
inputEle.value = currentTime.toLocaleString()
// 给input框添加数据,将结构化时间转为本地时间
}
// 全局定义一个存储计时器的变量名
let t
startBtnEle.onclick = function () {
if (!t) {
t = setInterval(showTime,1000)
// 再单击事件里面写一个循环定时任务,每隔一秒钟运行一下showTime函数
}
} // 开启循环定时任务之前先判断t是否已经指代了计数器,没有才开启循环定时任务,有的话不执行if的函数体代码,
// 这样连续就点击开始,也就只会执行一次开启循环定时任务的代码!!!
stopBtnEle.onclick = function () {
clearInterval(t)
// 循环定时任务必须先用变量名接收一下,这样一点停止计时按钮,就可以把循环计时任务给取消了
// 注意clearInterval(t) 这行代码只能结束t指代的循环定时任务既有值也有功能,此时t还是有值的!!!只是功能没有了!!
t = null # 这步是关键
}
</script>
</body>
-----------------------------------------------------------
.
.
.
.
.
jQuery查找标签
--------------------------------------------------
补充一个:
$(this) 事件函数中的this关键字指代的就是当前被操作的标签对象本身
--------------------------------------------------
1.基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
--------------------------------------------------
2.组合选择器
$('div#d1') 查找id是d1的div标签
$('span.c1') 查找含有c1样式类的span标签
$('div,span,p') 查找div或者span或者p标签
$('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
---------------------------------------------------
3.层级选择器
$('div p') 查找div里面所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下面紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
---------------------------------------------------
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')
---------------------------------------------------
5.基本筛选器 作用是查找批量标签后做一些筛选,拿到想要的标签
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 匹配所有 不满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first') 优化 $('li').first()
---------------------------------------------------
6.表单筛选器 可能会用到!! 仅限于在表单标签内部使用!!!
$(':text') # 相当于 $input[type = 'text'] 简化版
$(':password') # 相当于 $input[type = 'password'] 简化版
$(':checked') checked与selected都会找到
$(':selected') selected
---------------------------------------------------
7.筛选器方法 比较常用
选择器已选择标签的 同级别往下找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
选择器已选择标签的 同级别往上找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
选择器已选择标签的 父标签
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil()
// 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
选择器已选择标签的 其他标签
$("#id").children();// 儿子们标签
$("#id").siblings();// 兄弟们
如果选择器已选择标签的儿子标签有好多个,可以再点first() 拿查找到的第一个儿子标签
---------------------------------------------------
.
.
.
.
jQuery操作标签 重要!!!
-------------------------------------------------------
1.class操作
addClass() 相当于js代码 classList.add()
removeClass() 相当于js代码 classList.remove()
hasClass() 相当于js代码 classList.contains()
toggleClass() 相当于js代码 classList.toggle()
--------------------------------------------------------
2.位置操作
$(window).scrollTop() # 获取滚动条相当于顶部的偏移量!!!
.
文本操作巨重要!!! 前端的点击事件经常要用!!!
--------------------------------------------------------
3.文本操作 获取标签内部的文本!!! 巨重要!!! 前端的点击事件经常要用!!!
----------------------------------------------------------------
text() 相当于js代码 innerText 获取标签内部所有的文本内容!!!
text(xxx) 将标签内部的文本内容改成xxx 该方法巨重要!!!!
-----------------------------------------------------------------
html() 相当于js代码 innerHTML 获取标签内部所有的东西
-----------------------------------------------------------------
val() 相当于js代码 value
拿用户输入到input等标签里面的数据 也巨重要!!!!!!
------------------------------------------------------------------
jQuery对象[0].files[0] 相当于js代码 files[0] 拿到真正的文件对象
---------------------------------------------------------
.
4.创建标签
$('<a>') 相当于js代码document.createElement()
---------------------------------------------------------
5.属性操作
attr()/ 相当于js代码 setAttribute()
attr()该方法用的较多,给标签添加默认属性或自定义属性
标签.setAttribute('username','jason') 就是给标签添加的一个username="jason"的属性
removeAttr() 相当于js代码removeAttribute("age") 移除标签的一个属性!!
attr针对动态变化的属性获取,会失真!!
解决办法:
prop('checked') prop('selected')
---------------------------------------------------------
6.文档处理
$(A).append(B) // 把B标签追加到A标签的内部的后面!!!就记这个
$(A).prepend(B) // 把B标签追加到A标签的内部的前面!!!
这两个用的比较多!!!!
B可以是个标签,或者字符串,字符串里面如果有标签的语法,也会在A标签里面渲染出对应的标签出来
-----------------------------------------------------------
$(A).after(B) // 把B标签放到A标签外部的后面
$(A).before(B)// 把B放到A的前面
------------------------------------------------------------
标签1.remove() 删除标签1
标签2.empty() 删除标签2内部的所有标签。
------------------------------------------------------------
.
.
.
.
jQuery事件 重要!!!
-----------------------------------------------
JS绑定事件:
标签对象.on事件名 = function(){}
--------------------
jQuery事件绑定:
方式1: jQuery对象.事件名(function(){})
方式2: jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行了再用方式2
--------------------------------------------------
--------------------------------------------------
想给所有的button按钮都绑定单击事件,js代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button >点我</button>
<button >点我</button>
<button >点我</button>
<button >点我</button>
<button >点我</button>
<script>
let btnList = document.getElementsByTagName('button');
// 拿到的是列表[]
for(let i=0;i<btnList.length;i++){
btnList[i].onclick = function () {
alert('小样 太简单')}
}
</script>
</body>
</html>
-----------------------------------------------------
用jquery代码就简单了,一行代码就行了,jquery会自动将所找到所有标签绑定事件,会批量操作!!!
<script>
$('button').click(function () {
alert('小样 太简单')
})
</script>
.
.
补充1:
input框实时监听事件 input框没操作一下都会监测到
该事件的全名是:input propertychange 可以简写 用不了第一种绑定事件的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="text">
<script>
$(':text').on('input',function () {
console.log($(this).val()) # 要把this指代的标签对象转化为jquery对象
})
// $(':text') 表单筛选器
</script>
</body>
</html>
.
补充2:
clone属性
clone(true) 默认不克隆事件,只有第一个有单击事件,其他克隆的都没有用
加true后,所有克隆的都有功能了
-------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button style="border: 1px solid orange">屠龙宝刀,点击就送</button>
<script>
$('button').click(function () {
$('body').append($(this).clone(true))
// 每点击一次button按钮就往body标签内部添加一个button标签!!
// 默认不克隆事件 加true就可以
})
</script>
</body>
</html>
.
.
.
.
jQuery事件相关补充
标签自身已经有功能了,再给它绑事件会怎么样???
默认情况下,如果标签本身有功能,再给标签绑定事件,先执行绑定的事件,再执行标签自身的功能!!!
但是有时侯我们不想出现这样的情况,我们只想标签具有绑定事件的功能,标签自身的功能不想让标签还有,怎么办?那就要取消后续事件!!!
事件冒泡及事件取消
当多个标签处于嵌套关系的时候,并且有相同的事件绑定时!比如都绑定了单击事件,此时单击子标签触发了子标签的单击事件,此时子标签在父标签里面,所以单击子标签相当于也在单击父标签,所以也会触发发标签的单击事件!!!如果父标签外面还有标签嵌套,并且该标签也绑定了单击事件,那么也会触发该标签的单击事件!!!
---------------------------------------------------------
1.取消后续事件 很重要!!!后面会用到!!!
在事件函数的最后加 return false即可
---------------------------------------------------------
2.阻止事件冒泡
在事件函数的最后加 return false即可
---------------------------------------------------------
3.等待页面加载完毕再执行代码!!!
就和js代码一样,js代码用script标签包起来放在body标签的最下面,但是如果你非要将js代码整体放在head标签里面,script标签里面用window.onload = function () {} 把js代码放在中括号里面!!等待window对象加载完毕之后再执行中括号{}里面的代码!!!
同理jquery代码也一样,如果非要放在head标签里面,也是一样script标签里面$(function(){}) 然后把要执行的jquery代码放在中括号里面,等待html页面标签都加载完了后,再执行中括号里面的jquery代码!!!
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
-------------------------------------------
4.事件委托 很重要!!!
主要针对动态创建的标签也可以使用绑定的事件!!!
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行
-------------------------------------------
.
取消后续事件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<form action="">
<p>username:
<input type="text">
</p>
<input type="submit" id="d1"> # 按提交键会清空input框里面的内容
</form>
<script>
$('#d1').click(function () {
alert(123)
return false # 推荐使用
// e.preventDefault() 用该法function括号内要加行参e
})
</script>
</body>
</html>
.
.
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function () {
alert('我是div')
})
$('p').click(function () {
alert('我是p')
})
$('span').click(function () {
alert('我是span')
})
</script>
</body>
</html>
可以看成我点了最里面的子标签后,会把自己及父标签及父父标签的单击事件全都触发了!!!
.
同理如果我点击了p标签,会先触发p标签及p标签的父标签的单击事件,点p标签不会触发p标签的子标签的单击事件!!!所以才叫做事件冒泡!!!从下往上冒!!!
.
.
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button>点我</button>
<script> # 给button按钮弄一个单击事件!!!
$('button').click(function () {
alert('速度一定要快!!!')
})
</script>
</body>
</html>
-----------------------------------------
-----------------------------------------
这个时候当用浏览器打开该html标签的时候,点击button按钮会正常触发单击事件跳出弹出框
当通过js代码动态创建一个button按钮,并添加到body标签里面去的时候,该button按钮会有单击事件吗? 右击浏览器页面在控制台里面写代码动态创建button标签试试看!!!
let $btnEle = $('<button>') # 创建一个button按钮
$btnEle.text('选我') # 给该button按钮添加文本
$('body').prepend($btnEle) # 给该button按钮添加到body标签内部的前面!!!
这个时候可以看出来点用jQuery代码动态创建的button按钮时,是没有单击事件的,说明html页面代码的jQuery代码对button按钮绑定的单击事件 并不能对用jQuery代码动态创建的button按钮起作用!!!!
这是事件的特性,只针对html页面写过的标签有作用,对动态加载的标签没有用!!!
------------------------------------------
如果你就想让浏览器页面上所有的button按钮都有该绑定事件,就需要用到事件委托了!!
------------------------------------------
主要针对动态创建的标签也可以使用绑定的事件!!!
$('body').on('click','button',function(){})
将body内所有的 单击事件 委托给 button选择器标签去执行!!!
这有什么用?比如$('div').on('click','button',function(){})
假如div标签里面有好多个button标签按钮,就是不管你单击div标签的哪个button按钮,都会触发button选择器标签,执行该标签绑定的单击事件!!!
$('div').on('click',function(){}) # 这不就是事件嘛
$('div').on('click','button',function(){}) # 事件里面再加个选择器就变成了事件委托了!!
------------------------------------------
-----------------------------------------
<body>
<button>点我</button>
<script>
$('body').on('click','button',function () {
alert('嘿嘿嘿嘿嘿')
})
</script>
</body>
这时候body标签内部所有的点击事件都委托给了button选择器标签去执行单击事件
说人话就是这时候不管点击body标签内部的哪一个标签,都会触发button选择器标签去执行单击事件
-----------------------------------------
-----------------------------------------
.
.
.
.
.
jQuery动画效果(了解即可!!!)
// 基本
hide([s,[e],[fn]]) # 逐渐隐藏
show([s,[e],[fn]]) # 逐渐从隐藏状态展示出来
slideUp([s,[e],[fn]]) # 从下往上逐渐隐藏
slideDown([s],[e],[fn]) # 从上往下逐渐拉出来
// 淡入淡出
fadeOut([s],[e],[fn]) # 标签整体颜色逐渐变淡到隐藏
fadeIn([s],[e],[fn]) # 标签整体颜色逐渐从隐藏到显示出来
fadeTo([[s],o,[e],[fn]]) # 标签整体颜色逐渐变淡到一个规定的透明度
// 自定义(了解即可)
animate(p,[s],[e],[fn])
3s内逐渐将标签隐藏起来!!!
.
5s内逐渐将标签展示出来!!!
.
.
.
Bootstrap 前端矿建或者叫页面框架
别人已经提前写好了一大堆css和js代码!!!
我们只需要引入之后,按照人家规定好的操作方式,即可使用所有的样式和功能!!!
-------------------------------------------
bootstrap框架v3版本的网址!!
https://v3.bootcss.com/
版本有很多 使用V3即可
-----------------------------------------------------
这个框架最流弊的地方是用它做出来的页面可以具有响应式的布局,
可以根据浏览器的大小,自动去调整页面的布局,也就是说用Bootstrap做出来的页面可以适用于很多终端了,比如电脑,手机,平板等,会根据显示屏的大小自动调整页面布局!!!
------------------------------------------------------
访问官网,从入门一步一步往下看即可
入门介绍 如何使用 以及一些案例等!!!
https://v3.bootcss.com/getting-started/#examples
------------------------------------------------------
文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
------------------------------------------------------
CDN:
<!-- 最新版本的 Bootstrap 核心 CSS 文件! -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件! -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-------------------------------------------------
要是本地导入:先把bootstrap-3.4.1-dist文件夹整个拖到pycharm文件里面去
然后在head标签里面引入bootstrap文件
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
这样不用cdn,用下载好的本地的bootstrap里面的css文件与js文件也行!!!
--------------------------------------------------
pycharm自动提示问题
如果pycharm重来没有导入过本地的bootstrap文件,pycharm默认是不知道bootstrap有哪些关键字的!!所以最好下载一个本地的bootstrap文件,放在pycharm文件夹里面,然后在html页面导入一下bootstrap文件!!让pycharm熟悉一下,这样后面你输入bootstrap里面的关键字的时候pycharm就会有提示了!!!
最好本地导入几次
.
补充:
下载下来的压缩包解压下来
css文件夹里就是人家提前写好的各种样式!!!就是一堆css代码!!bootstrap.css 文件里面写了7000行左右的css代码
fonts文件夹里面 是字体文件,不要动
js文件夹里面 是一些动态效果的2000多行的js代码!!!
Bootstrap框架 的js代码部分是需要用到jQuery的,也就是说如果你想用Bootstrap框架的动态效果,除了要导Bootstrap还要导jQuery 才能正常使用!!!
------------------------------------
------------------------------------
本地bootstrap文件导入好了之后,看全局css样式来学习如何使用bootstrap!!
此时实际上在使用标签的时候,bootstrap已经开始优化你的标签里面的文本字粗细与样式了!!!
.
.
.
.
.
.
核心部分讲解 重要!!!
bootstrap框架实际上就是提前写好了很多css代码与js代码的样式类
我们后续如果想用这些样式,就只要写对了框架里面的样式类的名字,
就可以让我们的标签也具有这些样式了,就不需要自己写css与js代码了!!!
使用bootstrap其实只需要操作标签的样式类即可!!!
就只需要给标签加一些class=什么什么 标签就具有对应的样式了!!!
--------------------------------------------------
--------------------------------------------------
布局容器!!! 规定了页面到底是什么样子
class = "container" 左右两边有留白的样式
class = "container-fluid" 左右两边没有留白的样式
--------------------------------------------------
--------------------------------------------------
栅格系统
class = "row" 将一行均分12份
class = "col-md-8" 划分一行的12份
--------------------------------------------------
--------------------------------------------------
屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
--------------------------------------------------
--------------------------------------------------
.
.
布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid black;
}
</style>
</head>
<body>
<div class = 'container c1' ></div>
</body>
</html>
------------------------------------------
这个时候标签就有了container布局容器的样式了
.
可以看出container布局容器左右两边默认具有一定宽度的留白!!!
当然如果想改两边的留白宽度也可以再自己定义一个类专门调宽度!!!
.c2 {width: 1270px;}
<div class = 'container c1 c2' ></div>
.
.
<body>
<div class = 'container c1' ></div>
<div class = 'container-fluid c1' ></div>
</body>
左右两边没有留白的样式’container-fluid c1′
.
.
栅格系统
一般要配合布局容器使用
<div class="container" >
<div class="row"> # 该div标签占一行,且均分12份
<div class = 'col-md-6 c1'></div> # 表示一行该div要占6份
<div class = 'col-md-6 c1'></div> # 表示一行该div要另外占6份
</div>
-------------------------------------
这一个row 一行里面总共就只有12份,最多就12份!
-------------------------------------
.
<head> # bootstrap 导入的代码等省略了
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid black;
}
</style>
</head>
<body>
<div class="container" >
<div class="row">
<div class = 'col-md-6 c1'></div>
<div class = 'col-md-6 c1'></div>
</div>
</div>
</body>
.
.
可以看出如果一个row里面所有标签要的总份数大于12份的话,就会被迫自动往下一行放了!!
.
.
屏幕参数
col-md- 中等屏幕 桌面显示器 (≥992px) 用
col-xs- 超小屏幕 手机 (<768px) 用
col-sm- 小屏幕 平板 (≥768px) 用
col-lg- 大屏幕 大桌面显示器 (≥1200px) 用
------------------------------------------------
如果想让页面可以响应式布局比如原来我们是为了适应电脑屏幕用的col-md-
想在想让该页面也能适应手机的屏幕,那么就只需要在在class类里面在加一个col-xs-
这样就可以适应手机屏幕了
<body>
<div class="container" >
<div class="row">
<div class = 'col-md-6 c1 col-xs-2'></div>
<div class = 'col-md-6 c1 col-xs-10'></div>
</div>
</div>
</body>
------------------------------
当显示器是电脑时就采用6,6布局 当显示器是手机时采用2,10布局
.
.
.
栅格偏移 col-md-offset-
<body>
<div class="container" >
<div class="row">
<div class = 'col-md-6 c1'></div>
<div class = 'col-md-6 c1'></div>
</div>
<div class="row">
<div class = 'col-md-6 c1 col-md-offset-3'></div>
</div>
</div>
</body>
----------------------------------
col-md-offset-3 就是让标签往右移3份 3 6 3 所以就居中了!!!
-----------------------------------
.
.
.
.
重要样式
如果没有很好得页面布局思路,可以直接到全局css样式里面去抄里面现有的比较好看的布局,然后再改改文字!!
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
.
标题系列
<div class="container" >
<div class="row">
<h1 class = 'col-md-6 col-md-offset-3'>h1. Bootstrap heading <small>Secondary text</small></h1>
</div>
</div>
.
.
文本居中对齐
<body>
<div class="container" >
<div class="row">
<h1 class = 'col-md-6 col-md-offset-3'>h1. Bootstrap heading <small>Secondary text</small></h1>
</div>
<div><p class="text-center">尼玛蛋要居中一下</p></div>
</div>
</body>
.
.
表格
<body>
<div class="container" >
<div class="row">
<h1 class = 'col-md-6 col-md-offset-3'>h1. Bootstrap heading <small>Secondary text</small></h1>
</div>
<table class="table"> # 就这地方加个class="table" 表格里面高大上了
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>jack</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>jerry</td>
<td>18</td>
</tr>
<tr>
<td>4</td>
<td>john</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
</body>
.
还可以往里面加一些样式类
table-hover 鼠标悬浮在标签上就有选中的效果了!!!
table-striped 让背景有点渐变色
table-bordered 让表格有边框
class="active" 淡灰色
class="success" 淡青色
class="warning" 淡黄色
class="danger" 淡粉色
class="info" 淡蓝色
可以给thead里面的标签加颜色,也可以给tbody里面的标签加颜色
----------------------------------------------------
----------------------------------------------------
<body>
<div class="container" >
<div class="row">
<h1 class = 'col-md-6 col-md-offset-3'>h1. Bootstrap heading <small>Secondary text</small></h1>
</div>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th class="info">序号</th>
<th class="active">姓名</th>
<th class="warning">年龄</th>
</tr>
</thead>
<tbody>
<tr class="success" >
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
<tr class="warning">
<td>2</td>
<td>jack</td>
<td>18</td>
</tr>
<tr class="info">
<td>3</td>
<td>jerry</td>
<td>18</td>
</tr>
<tr class="danger" >
<td>4</td>
<td>john</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
</body>
table-striped 让背景有点渐变色
.
.
表单
表单标签里面只要想让标签变得好看就在标签里面加class = "form-control"就行了
但是input标签里面 type='radio'与type='chexbox'标签
不能加class = "form-control" 页面会出错!!!
<input type="text" class="form-control" disabled> 就会把该用户输入框禁用掉
想改用户输入框的颜色也可以改
has-warning 淡黄色
has-success 淡青色
has-error 淡红色
has-feedback 淡蓝色
-------------------------------
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3 class="text-center">用户注册</h3>
<form action="">
<p>username:
<input type="text" class="form-control">
</p>
<p>password:
<input type="text" class="form-control">
</p>
<input type="submit" class="btn btn-success btn-block" value="登录">
</form>
</div>
</div>
.
.
.
按钮
按钮
3.按钮组
class = "btn btn-primary btn-block"
调按钮颜色
.
调按钮大小
.
.
.
图片
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
.
.
.
.
明天再看!!!
组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
3.其他
作业
1.整理今日内容及博客
2.熟悉一遍bootstrap文档及样式
3.自己搭建一个心目中最理想的网页