对前端开发的补充: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对象
    • 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>


插曲

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个格子,可以去指定元素占用多少格子。

实现步骤

  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>

注意事项

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

css样式

懒得粘了,文档全有

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

 

组件

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

 

JavaScript插件

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

 

 


 

 

 

 

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

 

 

发表评论