对前端开发的补充：BOM和Bootstrap

2023-12-19 18:59:45

对前端开发的补充：BOM和Bootstrap

前言

我发现自己在web前端这里的知识太过空缺，所以来补习两个概念——BOM、Bootstrap

 

 

 

 

JavaScript

组成

javascript 有三部分构成，ECMAScript，DOM和BOM。

根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

  •  ECMAScript JavaScript 的核心，描述了该语言的语法和基本对象；
  • DOM 描述了处理网页内容的方法和接口；
  • BOM 描述了与浏览器进行交互的方法和接口。

ECMAScript

简单地说，ECMAScript 描述了以下内容：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象

DOM

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

回忆

关于dom和ECMAScript的细节使用，请移步这篇文章——学习JavaWeb（一）——前端三剑客

 

BOM

概念

Browser  Object  Model：浏览器对象模型

将浏览器的各个组成部分封装成了对象。

组成

BOM由五个对象组成：

  • Window：窗口对象
  • Navigator：浏览器对象
  • Screen：显示器屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

Window对象

特点

  • Window对象不需要创建，可以直接使用：window.方法名();
  • Window引用可以省略。方法名();

要和ECMAScript中的Global对象弄清，这个是BOM的对象

常用方法

方法/属性可以参考W3CShool，我们只介绍常用方法。

  • 弹出框有关的方法
    • alert(参数)：弹出带有一段消息以及带有确认按钮的警告框
    • confirm(参数)：显示带有一段消息以及确认和取消按钮的对话框，点击确定按钮则返回true；用户点击取消按钮则返回false
    • prompt(参数)：显示可提示用户输入的对话框，返回值就是用户输入的值
  • 打开或关闭的方法
    • open(url)：打开一个新网页，如果有参数url，则打开指定网页，还有更多参数请自行查看W3CShool   ，返回值是新窗口的window对象。
    • close()：关闭窗口，注意，如果直接使用该方法，即close()，因为该方法全称是window.close()，故直接使用将会关闭当前窗口，如果想要关闭其他窗口请使用其他窗口的window对象。
  • 与定时器有关的方法
    • setTimeout(方法对象，等待时间)：在指定的毫秒数后调用函数或计算表达式。
    • clearTimeout()：取消由 setTimeout() 方法设置的 timeout。参数是由 setTimeout() 返回的 ID 值。
    • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
    • clearInterval()：取消由 setInterval() 设置的 timeout。参数是由 setInterval() 返回的 ID 值。
<body>
	<input id="btn" type="button" value="取消boom"/>
<script>
	var btn=document.getElementById("btn");
	var boom=function(){
		alert("boom！");
	}
	var interval=setInterval(boom,2000);
	
	btn.onclick=function(){
		clearInterval(interval);
		btn.disabled=true; //按钮禁用
	}
</script>
</body>

对前端开发的补充：BOM和Bootstrap

属性

  • 获取其他BOM对象
    • history
    • location
    • Navigator
    • Screen
  • 获取DOM对象
    • document（我们的document.getElementById()等这种方法都是通过window得到document对象来使用）

 

Location对象

创建

  • window.location
  • location

常用方法

  • reload()：重新加载当前文档（即刷新）
<body>
<input type="button" id="btn" value="刷新">
<script>
	var btn=document.getElementById("btn");
	btn.onclick=function(){
		location.reload();
	}
</script>
</body>

属性

  • href：设置或返回完整的 URL。
<input type="button" id="btn" value="url">
<script>
	var btn=document.getElementById("btn");
	btn.onclick=function(){
		location.href="http://baidu.com";
	}
</script>

点击后即调转到baidu.com

我们已经知道了三个跳转网页的方法

  1. window.open(“url”)：利用BOM的window对象打开网页（新网页）
  2. location.href=”url”：利用BOM的location对象修改地址栏url去跳转（当前页面）
  3. <a  href=”url”></a>：超链接

案例

5秒自动跳转

<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<style type="text/css">
		p{
			text-align:center;
		}
		span{
			color:red;
		}
	</style>
	<script>
	     //页面加载完成后
	     window.onload=function(){
		   var time=document.getElementById("time");
		   var second=5;
		   //获取span标签，修改标签体内容，时间--
		   function showTime(){
			second--;
			if(second==0){
				//跳转到百度
				location.href="https://baidu.com";
			}
			time.innerHTML=second+"";
		   }
		   //定时器
		   setInterval(showTime,1000); 
	     }
	</script>
</head>
<body>
	<p>
	<span id="time">5</span>秒之后，自动跳转网页
	</p>
</body>

对前端开发的补充：BOM和Bootstrap

插曲

VSCode的插件view in browser，非常好用去预览html，推荐一下。

Bootstrap前端框架

概念

对于我们后端开发人员，可能对前端的东西会比较陌生，不能得心应手，没有关系，我们可以利用一些前端框架来帮助我们完成前端页面的开发，不用自己写css就可以做非常好的美化。

今天我们来介绍的前端框架，就是Bootstrap。

框架：一套半成品软件，开发人员可以借助于框架再进行开发，简化编码。

中文网站——https://www.bootcss.com/

 

好处：

  • 定义了很多的css样式和js插件。我们的开发人员直接可以使用这些样式和插件得到丰富的页面效果
  • 响应式布局
    • 同一套页面可以兼容不同分辨率的设备

像淘宝的网站https://world.taobao.com/对手机端并不兼容，手机端访问就不会很友好；淘宝为了解决这一问题专门开发了另一个网站https://main.m.taobao.com/。如果是响应式布局，就会根据访问端的分辨率自行调试，不必再开发新网站。

入门

下载

我们在官网中会很容易找到“下载Bootstrap”，我们下载用于生产环境的Bootstrap即可。

解压之后会看见三个目录：fonts、css、js

引入

估计你也猜到了，我们下一步就是将这些文件复制到你的静态web项目中即可，另外因为Bootstrap的js部分是基于jQuery开发的，所以也需要我们引入jQuery的文件（可以直接引网上的，或者本地的）。

然后创建html页面，引入必要的资源文件即可。

css、js文件名带min和不带min的区别：

  • 带min表示是压缩版：将所有空格回车制表符去掉了，内容压缩在了一起。
  • 不带min表示原版

两种都可以引入，但是建议引入时为了速度引入min，阅读时阅读不带min的

模板

文件有很多，该怎么引入呢？我们可以使用官网给的这个HTML模板：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

模板文件有了，细心的同学应该发现了，模板中的引入都是引入的Bootstrap提供的免费CDN服务器中的文件，我们既然本地下载下来了，就可以使用本地的了，另外中间的那部分是对IE低版本的兼容，我们用不到就删了吧：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>测试</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-1.7.2.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>你好，世界！</h1>

  </body>
</html>

模板如上，以后你想做静态页面就可以直接拿这个去改造。

好了，下面我们开始正式学习。

 

响应式布局

我们先来聊一下响应式布局，它是怎么做到根据分辨率来自适应的呢？

Bootstrap实现这个响应式布局，其实主要是依赖一个栅格系统。

栅格系统

将一行分成了12个格子，可以去指定元素占用多少格子。

对前端开发的补充：BOM和Bootstrap

实现步骤

  1. 定义容器（相当于table）
    1. 容器分类：
      1. .container：固定宽度，容器的宽度会针对窗口的分辨率的不同而左右留白
      2. .container-fluid：100% 宽度
  2. 定义行（相当于tr），样式：row
  3. 定义元素（相当于td），指定该元素在该行占据的格子数目，样式：col-设备代号-格子数目

元素的定义中，定义样式中的设备代号如下：

  • xs：超小屏幕  手机（<768px）： col-xs-12
  • sm：小屏幕     平板  （>=768px）：col-sm-
  • md：中等屏幕   桌面显示器  （>=992px）：col-md-
  • lg：大屏幕  大桌面显示器   （>=1200px）：col-lg-

下面是一段测试代码：

    <style>
        .inner{
            border: 1px solid red;
        }
    </style>
  </head>
  <body>
    <!--1.定义容器-->
    <div class="container-fluid">
        <!--2.定义行-->
        <div class="row">
            <!--3.定义元素
              下面实例是说，
              在大屏幕上一个元素占一个格子（即一行正好12个元素）
              在小屏幕（针对平板）上一个元素占两个格子（即一行6个元素），自动换行
              在超小屏幕（针对手机）上一个元素占6个格子（即一行2个元素），自动换行
            -->
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 col-xs-6 inner">栅格</div>
        </div>
    </div>
  </body>

对前端开发的补充：BOM和Bootstrap

注意事项

  1. 一行中如果格子数量占位超过了12，那么超出部分自动换行；而如果一个元素超过12格子则默认是12。
  2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。
  3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，默认会一个块级元素就会占满一整行。

css样式

懒得粘了，文档全有

https://v3.bootcss.com/css/

 

组件

https://v3.bootcss.com/components/

 

JavaScript插件

js插件内容也在那个网站有很多，复制粘贴即可。

 

 

 

 

 

 

商业转载 请联系作者获得授权，非商业转载 请标明出处，谢谢

 

 

 

 

 

 

 

 

上一篇：IntelliJ IDEA ：Error:(1, 1) java: 非法字符: '\ufeff'


下一篇：javascript初探（五）------ BOM