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

本文链接：https://blog.csdn.net/weixin_39670511/article/details/113047257

有了整体布局后，我们剩下的事情就是填充布局内的细节。如果整体布局分四个部分，左、右两侧的露出背景，和主体部分的侧栏、主栏位的话，背景部分显然不用做什么。那么我们就盯着主体部分做即可。

主体部分的侧栏解构：

需要偏黑色的背景
需要自上而下的各个栏位

先调整背景。

给这个栏位加上 style="background-color: black;" 作为背景色。因此，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;">
        <!-- 整个页面做成一行，十二列 -->
        <div class="row">
            <!-- 左侧第一个占2列的竖向区域 -->
            <div class="col-2">
                <p>1 - 2</p>
            </div>
            <!-- 左侧第二个占2列的竖向区域 -->
            <div class="col-2" style="background-color: black;">
                <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>

我们暂时不用css文件，因为贴出代码比较方便。如果你有这方面的洁癖（lol），可以自行转化成css文件引用。

这样，看html的呈现就会如图一：

图一：主体侧栏部分添加背景

竖向部分内容有多高，这个黑色部分就会覆盖多高。现在因为内容部分只有一个<p>元素。所以黑色只有几十个像素高。在我们的文章加入后，因为该侧栏部分和属于文章列都归属于同一行，高度就会根据文章部分的高度同时变化，所以，暂时我们不需要管这一块的高度。

只管往里面添加需要的内容，如下：

添加博客名

我们把博客名部分通过Bootstrap的布局思想，整体定位一行、一列。所以，原来的侧栏部分先写上一行、一列，然后列下面再放入一个h1元素显示字眼，如下：

            <!-- 左侧第二个占2列的竖向区域 -->
            <div class="col-2" style="background-color: black;">
                <div class="row">
                    <div class="col">
                        <h1 style="color: aliceblue; padding: 15px;">博客名</h1>
                    </div>
                </div>
            </div>

注意原来用来标识栏位位置的内容已经清除了。

现在网页呈现如图二：

图二：加了博客名

上面的html代码中，颜色部分、padding部分都用了html原生的。要说明的是，Bootstrap本身提供了不少修饰颜色、padding、margin等等的实用工具。所以，我们这里可以使用它们，能少打点字，让代码看起来更"Bootstrap"一点，修改后如下代码：

            <!-- 左侧第二个占2列的竖向区域 -->
            <div class="col-2 bg-dark">
                <div class="row">
                    <div class="col">
                        <h1 class="text-light p-5">博客名</h1>
                    </div>
                </div>
            </div>

看起来是不是代码简洁了很多？呈现的样子基本没变，如图三：

图三：用Bootstrap内置的颜色、padding修改后的效果

这部分用的Bootstrap的颜色工具链接：

https://getbootstrap.com/docs/4.5/utilities/colors/getbootstrap.com

Bootstrap间距工具链接：

https://getbootstrap.com/docs/4.5/utilities/spacing/getbootstrap.com

现在能看到博客名没有在这个列内容中居中。我们继续使用Bootstrap提供的工具，修改列的属性，如下：

<div class="col d-flex justify-content-center">

也就是给列加上d-flex justify-content-center，这个会让浏览器在这个列中放置物体的时候，水平方向居中。

看一下效果，如图四：

图四：水平居中的博客名

对应的Bootstrap链接：

https://getbootstrap.com/docs/4.5/utilities/flex/getbootstrap.com

然后，我们来制作博客名下方的搜索部分。这个部分用上2行，第1行放置搜索这个标题，第2行放置搜索输入栏。所以，如果要直接写的话，我们就需要写两个 div class="row"，每个row下面都放置一个 div class="col"。这种方案读者可以自己尝试。

我这里直接使用Bootstrap的Input group组件，

Input groupgetbootstrap.com

只要这么写：

                <!-- 搜索部分组合 -->
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="inputdefault">搜索</label>
                            <input class="form-control" id="inputdefault" type="text">
                        </div>
                    </div>
                </div>

这样整体代码就变成如下：

<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 bg-dark">
                <div class="row">
                    <div class="col d-flex justify-content-center">
                        <h1 class="text-light p-5">博客名</h1>
                    </div>
                </div>
                <!-- 搜索部分组合 -->
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="inputdefault">搜索</label>
                            <input class="form-control" id="inputdefault" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6"> 
                <p>5 - 10</p>
            </div>
            <div class="col-2">
                <p>11 - 12</p>
            </div>
        </div>
    </body>
</html>

效果如图五：

图五：新增搜索部分内容

因为字颜色的关系，”搜索“两个字看不清。我们得改成跟博客名同样的亮白色。第一种方式，是直接改代码中的input元素的style，class里面添加”text-light“。但我们可以预见，往下写的时候，很多地方的字颜色我们都得这么做。有没有更简单的方式？有！

我们可以改动列上的class，让整个列用的字颜色都是”text-light“。这样属于列的范围的都会默认使用该颜色。马上来改列的这个class。改动后整体代码变成这样：

<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 bg-dark text-light ">
                <div class="row">
                    <div class="col d-flex justify-content-center">
                        <h1 class="p-5">博客名</h1>
                    </div>
                </div>
                <!-- 搜索部分组合 -->
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="inputdefault">搜索</label>
                            <input class="form-control" id="inputdefault" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6"> 
                <p>5 - 10</p>
            </div>
            <div class="col-2">
                <p>11 - 12</p>
            </div>
        </div>
    </body>
</html>

我们在原来的col-2 bg-dark后添加了text-light，这个就让属于这个列的所有元素默认的字色都被指定为亮白色。由此，原来的博客名的h1的class里面的text-light，就可以移除。

改动代码后，画面如图六：

图六：修改整个列所用的字色效果

这个时候如果对比参考网站，我们发现参考的网站，在博客名部分和搜索部分之间，有一条细线，用来隔开两个内容不同的部分。

现在我们来处理这个细节。Bootstrap也有修改border的方式：

Bordersgetbootstrap.com

用这个里面的方式，我们把博客名所在的row的样式改成：

<div class="row border-bottom border-secondary">

这句话开启元素（这里是行）下方border，用的颜色是border-secondary。

效果如下（图七）：

图七：开启博客名下方的border

图七看起来，搜索部分就直接贴在博客名内容的下方，不是很好看。所以我们可以再开启博客名部分的下方margin，让搜索部分离开它一定距离，代码如下：

<div class="row border-bottom border-secondary mb-4">

就是在上面的代码基础上加了一个mb-4。

关于元素的margin、padding部分，这里是Bootstrap的链接：

Spacinggetbootstrap.com

好了，这里是调整了加入了线框（做分割线）和调整了间距后的全部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;">
        <!-- 整个页面做成一行，十二列 -->
        <div class="row">
            <!-- 左侧第一个占2列的竖向区域 -->
            <div class="col-2">
                <p>1 - 2</p>
            </div>
            <!-- 左侧第二个占2列的竖向区域 -->
            <div class="col-2 bg-dark text-light ">
                <div class="row border-bottom border-secondary mb-4">
                    <div class="col d-flex justify-content-center">
                        <h1 class="p-5">博客名</h1>
                    </div>
                    <span class=""></span>
                </div>
                <!-- 搜索部分组合 -->
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="inputdefault">搜索</label>
                            <input class="form-control" id="inputdefault" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6"> 
                <p>5 - 10</p>
            </div>
            <div class="col-2">
                <p>11 - 12</p>
            </div>
        </div>
    </body>
</html>

画面呈现如图八：

图八：加入分割线、调整间距后

这一篇就到这里，休息，让我们下一篇继续。