avatar

目录
【前端09_框架】Bootstrap、栅格系统、响应式、屏幕阅读器、和 JS 组合使用的插件

Bootstrap *

  • 首先要知道,Bootstrap 相当于一个装潢公司,==他是 CSS 框架==,样式他们已经写好了,你只需要会正确合理的调用他们写好的 就可以了
  • 也叫 BS
  • 这个工具的用法,官网解释的很清楚,这里我只写一些主要的点,和官网漏掉的点

优点

  • 栅格系统 (同样是快速布局)

  • 响应式工具(可以适应不同尺寸的屏幕)

    下载 & 导入

  • https://www.bootcss.com/ 这是官网

  • 接着选用于生产环境的 BS

  • 将你下载好的文件解压,里面分别有 css、fonts、js 文件夹,把这三个文件夹 复制 到你的项目中即可

  • 要把装潢公司领进家,导入到页面中,方法很多,可以手打,也可以直接拖拽

    ## 栅格系统 https://v3.bootcss.com/css/#grid 这是官网教程,这里只记录我的心得
  • 首先要导入 css 文件!!!

  • 系统会自动分为最多12列

  • 有四个等级的屏幕划分,由大到小分别是 lg、md、sm、xs

    ## 响应式 响应式的出现也是为了适应不同大小屏幕的,以前会根据屏幕大小写4个不同的样式,这样工作量太大了,响应式因解决这个问题而诞生
  • hidden-xs 对 xs 大小隐藏 ,其他大小(分辨率)显示

  • visible-xs 对 xs 大小显示,其他大小(分辨率)隐藏

屏幕阅读器

sr-only 类可以对屏幕阅读器以外的设备隐藏内容。方面特殊人群使用,类似的 aria 打头的类也是


组件 *

标签页

官网上标签页的介绍缺东西

想要实现的样式如下:

程序如下

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签页跳转</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/bootstrap.js"></script>
</head>
<body>
< ul class="nav nav-tabs">
< !--role也是给盲人提示的 -->
< !--data-toggle 需要js,所以要加上这个文件-->
< li role="presentation" class="active"><a href="#fir" data-toggle="tab">Home</a></li>
< li role="presentation"><a href="#sec" data-toggle="tab">Profile</a></li>
< li role="presentation"><a href="#tir" data-toggle="tab">Messages</a></li>
</ul>
< div class="tab-content">
< div class="tab-pane fade in active" id="fir">12313</div>
< div class="tab-pane fade" id="sec">456456</div>
< div class="tab-pane fade" id="tir">789789</div>
</div>

< !--结构话header nav -->
< !--正确的层级结构
tab-content 和 active 一定是父子结构
active-->
</body>
</html>

注意三点:

  • active 这个类你可以理解为 默认显示 的意思,切换标签也就是切换类,给要显示的标签加上 active
  • a 标签的 herf 属性放对应内容的 id,来让内容显示
  • data-toggle="tab" 这个是必不可少的!要用这个来切换

    JavaScript 插件

    手风琴

    样式如下:在这里插入图片描述
    还有这个样子的:在这里插入图片描述

注意点:

  • data-parent="#accordion" 这个必须要有的,这个是控制 组里的元素类,点击这个元素,这个元素显示,其他隐藏

弹出框 & 工具提示

样式如下
在这里插入图片描述
想要使用弹出框的话 script 中必须要激活,加下面的语句就行(不加这个的话,会不好使的)

激活的工具不同,代码也不同,找相应的。

Javascript
1
2
3
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
Javascript
1
2
3
$(function () {
$('[data-toggle="popover"]').popover()
})

良心进度条

样式如下:
在这里插入图片描述

注意点:

Javascript
1
2
3
 /*这个地方的顺序要注意一下*/
pro.innerHTML = parseInt(pro.style.width) + 1 + "%";
pro.style.width = parseInt(pro.style.width) + 1 + "%";

整体代码:

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<body>
<div class="progress">
< div class="progress-bar progress-bar-striped active" role="progressbar" id="pro" style="width: 2%;min-width: 2em">

</div>
</div>
<div class="infos"></div>
</body>
<script>
var pro = document.querySelector("#pro");
var infos = document.querySelector(".infos");
var timer = setInterval(changePro,100);

function changePro() {
if(parseInt(pro.style.width) < 100){


if(parseInt(pro.style.width) === 50){
infos.innerText = "您的网速有点慢,推荐使用1905会员 ,一个月只需$9.9"
pro.className += " progress-bar-danger";
/*定时器即使清除,最后一遍也要执行完这个函数,不是截断!*/

/*浏览器队列*/
/*clearInterval(timer);
setTimeout(function () {
var timer2 = setInterval(function () {
pro.style.width = parseInt( pro.style.width) + 1 + "%";
pro.innerHTML = parseInt( pro.style.width) + 1 + "%";
},500)
},3000)*/
}else{
/*这个地方的顺序要注意一下*/
pro.innerHTML = parseInt(pro.style.width) + 1 + "%";
pro.style.width = parseInt(pro.style.width) + 1 + "%";
}

}
}


/* 浏览器任务队列、定时器滞后,变量置前*/
/* 定时器里不要嵌套定时器,会出现问题
* */
setInterval(function () {
console.log(1);
},100);
var x = "x";
console.log(x);
</script>
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/54679.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论