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

本文主要是介绍【前端09_CSS框架】Bootstrap、栅格系统、响应式、屏幕阅读器、和 JS 组合使用的插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CSS 框架:Bootstrap

  • Bootstrap *
    • 优点
    • 下载 & 导入
    • 栅格系统
    • 响应式
    • em rem px rpx 介绍
    • 屏幕阅读器
    • 组件 *
      • 标签页
    • JavaScript 插件
      • 手风琴
      • 弹出框 & 工具提示
      • ~~良心~~进度条


Bootstrap *

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

优点

  • 栅格系统 (同样是快速布局)
  • 响应式工具(可以适应不同尺寸的屏幕)

下载 & 导入

  • https://www.bootcss.com/ 这是官网
  • 接着选用于生产环境的 BS
  • 将你下载好的文件解压,里面分别有 css、fonts、js 文件夹,把这三个文件夹 复制 到你的项目中即可
  • 要把装潢公司领进家,导入到页面中,方法很多,可以手打,也可以直接拖拽

栅格系统

https://v3.bootcss.com/css/#grid 这是官网教程,这里只记录我的心得

  • 首先要导入 css 文件!!!
  • 系统会自动分为最多12列
  • 有四个等级的屏幕划分,由大到小分别是 lg、md、sm、xs
  • 注意:BootStrap3 的栅格用的是浮动,而BootStrap4的栅格用的是flex弹性盒子

响应式

响应式的出现也是为了适应不同大小屏幕的,以前会根据屏幕大小写4个不同的样式,这样工作量太大了,响应式因解决这个问题而诞生

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

em rem px rpx 介绍

  • em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参考对象为父元素文本font-size)
  • px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别)
  • rem 也表示相对尺寸,其参考对象为根元素的font-size
  • rpx 是小程序中的,rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

屏幕阅读器

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


组件 *

标签页

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

想要实现的样式如下:

程序如下

<!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 中必须要激活,加下面的语句就行(不加这个的话,会不好使的)

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

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

良心进度条

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

注意点:

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

整体代码:

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

这篇关于【前端09_CSS框架】Bootstrap、栅格系统、响应式、屏幕阅读器、和 JS 组合使用的插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/976118

相关文章

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

如何使用Spring boot的@Transactional进行事务管理

《如何使用Springboot的@Transactional进行事务管理》这篇文章介绍了SpringBoot中使用@Transactional注解进行声明式事务管理的详细信息,包括基本用法、核心配置... 目录一、前置条件二、基本用法1. 在方法上添加注解2. 在类上添加注解三、核心配置参数1. 传播行为(

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

c++中std::placeholders的使用方法

《c++中std::placeholders的使用方法》std::placeholders是C++标准库中的一个工具,用于在函数对象绑定时创建占位符,本文就来详细的介绍一下,具有一定的参考价值,感兴... 目录1. 基本概念2. 使用场景3. 示例示例 1:部分参数绑定示例 2:参数重排序4. 注意事项5.

使用C++将处理后的信号保存为PNG和TIFF格式

《使用C++将处理后的信号保存为PNG和TIFF格式》在信号处理领域,我们常常需要将处理结果以图像的形式保存下来,方便后续分析和展示,C++提供了多种库来处理图像数据,本文将介绍如何使用stb_ima... 目录1. PNG格式保存使用stb_imagephp_write库1.1 安装和包含库1.2 代码解

一文教你使用Python实现本地分页

《一文教你使用Python实现本地分页》这篇文章主要为大家详细介绍了Python如何实现本地分页的算法,主要针对二级数据结构,文中的示例代码简洁易懂,有需要的小伙伴可以了解下... 在项目开发的过程中,遇到分页的第一页就展示大量的数据,导致前端列表加载展示的速度慢,所以需要在本地加入分页处理,把所有数据先放

CentOS系统Maven安装教程分享

《CentOS系统Maven安装教程分享》本文介绍了如何在CentOS系统中安装Maven,并提供了一个简单的实际应用案例,安装Maven需要先安装Java和设置环境变量,Maven可以自动管理项目的... 目录准备工作下载并安装Maven常见问题及解决方法实际应用案例总结Maven是一个流行的项目管理工具