bootstrap怎样引用自己写好的js_实学：Java开发自己的博客系统-第七篇（博客主页-1）...

最新推荐文章于 2024-02-26 16:51:43 发布

杂文乐馆

最新推荐文章于 2024-02-26 16:51:43 发布

阅读量201

点赞数

文章标签： bootstrap怎样引用自己写好的js

本文链接：https://blog.csdn.net/weixin_42322347/article/details/113047256

版权

这一节我们开始尝试做博客主页，博客主页呈现大致如笔者用WordPress搭建的博客，地址：

化石www.moonsun.xyz

分解出来，大致有这么几个点：

需要有一张铺满整个屏幕（浏览器）的背景
主体部分的左侧，是一列黑色背景的侧栏，侧栏从上到下，依次为“博客名字”、“搜索栏”、“最近的帖子列表”、“评论”、“存档”、“分类”、”标签“
主体部分的右侧，从上到下，是多篇文章（广告栏不算），如果后台有超过一页的文章，那么会有页码可以供点击选择

首先，是第1点：铺满整个屏幕的背景。我们可以用如下的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.0">
        <title>PersonalBlog</title>        
    </head>
    <body style="background-image: url(default-background.jpg); background-position-x: left; background-position-y: top ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;">

    </body>
</html>

这个html代码里面，需要一张图，这个图我放在这里作为图一：

图一：背景图

请在你硬盘上任意地方，新建一个目录，用来存我们的前端文件和资源（当然，最后我们这些都会通过一定的方式移到项目中，现在只是讲述前端页面，清楚一些。啊！原来我们是要做全栈工作哦）。

在此目录中，建立一个后缀为html的文件，名字就叫index.html。然后把我们上面的代码贴入。保存上面的图一到你的这个目录，名字取名叫default-background.jpg，跟html中body的style引用的image名字一定要一致。注意跟index.html放在同一级，不要再开个子目录放置，除非你改动body中的style引用路径。

好了，现在双击打开index.html，如果没有做错任何事情，浏览器会显示如图二：

图二：浏览器打开index.html的呈现

同样说一句，忽略我截图中浏览器本身的缩小、放大按钮在左侧的现象，因为你可能用的是Windows，我这图依旧是在Mac上截取。我们只要知道，现在这个底图是平铺到了整个页面就好。

接下来我们需要制作博客主体部分。来跟着我观察上面博客的整体，为说明方便，我截了个图（图三）：

图三：博客界面截图说明

整个网站页面我用红色的线框描出，中间的主体内容整体用了紫色的线框，主体的左侧栏用了橙色的线框。

我们可以看到，主体内容部分在整个浏览器背景的中央部分，左侧、右侧，因为显示器比较宽，所以事实上除了背景，是空的。目测，如果以左侧露出背景部分的宽度为基准，整个页面大致是这个宽度的6倍。

这个信息我需要用来解释后面我们的布局，所以在这里很重要。现在的网站，都是“响应式的”。所谓响应式，就是页面的呈现内容，会随着浏览器给定的内容区域变化。这个是因为同一个网站，可能用户会通过PC的浏览器访问，也可能会通过手机的浏览器访问。两个不同的浏览器，显然分辨率不同，逼着网站在检测不同的分辨率下，显示不同的内容-以此为“响应“。

早先的网站，也会适应PC浏览器和手机浏览器（我们访问比如http://1688.com这样的网站，它会侦测我们的浏览器版本，如果是手机，就会让http://m.1688.com这样的网站提供服务。反之，就会用http://www.1688.com这样的网站服务，这个就是通过不同的页面设计-最不济就是做了两套网站前端，适应不同的浏览器）。但是早先没有通用的一些解决方式，所以做的时候成本都比较大。

随着智能手机的兴起，一些通用的解决方案就被大厂制作了出来，并免费给到网络使用。比如有名的Bootstrap（制作商：twitter），它就提供了一套css、javascript，来帮助前端开发的人快速做出能适应各种不同分辨率的前端页面。

Bootstrap讲被我这里用来支撑博客的前端基础开发，让博客直接能适应PC端浏览器、手机浏览器。。

在Bootstrap中，它有个基础概念：”网格“（grid）。这个概念我用大家比较熟悉的Excel表格解释比较容易，对于一个Excel表格，整个sheet就是一个顶级网格。其中的每个格子，就是一个单元，可以用行号和列号来得到该格子的位置。

而Bootstrap中，总是把一个目标格子看做可以分为12列。这个格子本身多大，那就是html和css的结构决定，这个不多说。这里暂时不理解没关系，我们往下走，直接操作来体验Bootstrap怎么规范出上面的博客主页的格局（布局），做完之后，相信能有你自己的理解。

引入Bootstrap库

Bootstrap库可以使用官方文档给出的，4.5版本链接。考虑到网速原因，我这里介绍给大家的是国内的cdn，

twitter-bootstrap (v4.5.0) - Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。www.bootcdn.cn

Bootstrap库需要自己的一个css文件，一个javscript文件。而且它依赖jquery，如果要有tips等功能，还依赖popper。所以，为了导入Bootstrap库，我们的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.0">
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <title>PersonalBlog</title>        
    </head>
    <body style="background-image: url(default-background.jpg); background-position-x: left; background-position-y: top ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;">

    </body>
</html>

根据前面我们对参照的博客主页布局的解剖结论，和Bootstrap的12这个数字。我们决定先把整个浏览器的整个视口（可见部分）切分为12列（1行）。在整个宽度上占12列的话，我们可以知道，如果是图三那样的画面，最左侧的背景露出，算是占2列。然后依次往右数：2列分给内容主页面的侧栏，6列分给内容主页面的文章展示部分，2列分给露出的背景。

怎么用Bootstrap写出这样的布局？来，直接看代码（新的部分从第一行中文注释开始，内容都在body中）：

<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.0">
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <title>PersonalBlog</title>        
    </head>
    <body style="background-image: url(default-background.jpg); background-position-x: left; background-position-y: top ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;">
        <!-- 整个页面做成一行，十二列 -->
        <div class="row">
            <!-- 左侧第一个占2列的竖向区域 -->
            <div class="col-2">

            </div>
            <!-- 左侧第二个占2列的竖向区域 -->
            <div class="col-2">

            </div>
            <div class="col-6">

            </div>
            <div class="col-2">

            </div>
        </div>
    </body>
</html>

英文中，行是row，列是column。所以，Bootstrap的class="row"就是定义一个行，col-X这样的字眼，X取1到12，表示修饰的列占“所在行的”竖向x个位置，12最大。

因此，上面加入的代码中，所有的col放在整体一行中，可以看做是把这一行，切分成了12份，然后格子的col-x根据自己的数字瓜分这一行的空间。

好了，这样我们用几行代码就完成了整体布局。想看看结果？可惜运行起来看不到什么差别。所以，我们把上面的代码改动成下面的：

<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.0">
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <title>PersonalBlog</title>        
    </head>
    <body style="background-image: url(default-background.jpg); background-position-x: left; background-position-y: top ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;">
        <!-- 整个页面做成一行，十二列 -->
        <div class="row">
            <!-- 左侧第一个占2列的竖向区域 -->
            <div class="col-2">
                <p>1 - 2</p>
            </div>
            <!-- 左侧第二个占2列的竖向区域 -->
            <div class="col-2">
                <p>3 - 4</p>
            </div>
            <div class="col-6">
                <p>5 - 10</p>
            </div>
            <div class="col-2">
                <p>11 - 12</p>
            </div>
        </div>
    </body>
</html>

保存html。双击运行，你应该能看到下面的画面（图四）：