Web开发笔记；bootstrap4的简单使用；使用自定义字体等

2022年6月22日 214次阅读 来源: 捉不住的鼬鼠

前端开发做得不多，最近又要搞一个小网站，静态页面，自适应，所以作为一个前端入门人员，免不了又踩了坑，简单记录一些知识点。

现在我用的是bootstrap4，head部分一般如下：

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/style.css">

    <title>音乐</title>
</head>

这里声明字符集utf-8，有时候还有声明lang的，如en，我没太研究这个有多少影响，这里也没有写，好像不会出问题。

接着是视口，一般就按照上面的写即可，初始宽度为设备宽度，缩放比例为1。

然后是bootstrap的css文件，以前还下载放在自己的服务器，现在习惯用cdn了。后面的css文件是我自己写的，除此之外，要在</body>之前放js：

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

一般就这三个。

对于bootstrap4，col变化了一些，原来写xs的现在变成了直接col了，否则还按照版本3中的写自适应会出问题：

《Web开发笔记；bootstrap4的简单使用；使用自定义字体等》

接着，一个新手问题，bootstrap不换行，参考：

https://blog.csdn.net/u013288190/article/details/52745166

就是我测试的时候一不小心打了一大串字符，没有空格，调试了半天没有效果，才发现不换行是因为没有空格则认为是一个单词，添加一些空格再进行调试即可。

如果使用了非12格占满的宽度，如col-md-8，还想要其居中，可以用下面的方法：

.col-centered{
    float: none;
    margin: 0 auto;
}

接着关于margin-bottom或者padding-left之类的变量调节，在浏览器中实时看效果，然后抄到代码中即可。经过学习，发现用rem是很好的选择，r表示的root，这样相对根大小调节能更好进行自适应。

对于网页背景，设置代码如下：

body{
    background-color: rgba(39, 40, 52, 1);
    font-family: 'HYQiHei-50S';
}

这里的rgba指定颜色，其中rgb都是0-255的整数，而透明通道则是0-1的浮点数。如果透明度设置为0则是纯白的页面背景，设置为1完全覆盖默认白色背景。这里面出现的字体的配置是我自定义的，如下：

@font-face { 
    font-family: 'HYQiHei-50S'; 
    src: url('../fonts/HYQiHei-50S.otf'); 
}

我设置了字体名称也就是font-family，接着给出其路径即可。根据测试，只需要这两项即可正常工作，otf格式也被较多的浏览器支持，我用chrome测试的没有问题。

接着，可以对div单独设置一个背景色：

.device-div-color{
    background: rgba(64, 67, 81, 0.16);
}

这里根据测试结果，body的背景颜色设置后，再设置div的颜色，实际上二者不会叠加，也就是，body在下，div在上，div设置多少rgba就是多少，而不会与body叠加得到新的颜色结果再显示出来。

然后还有对bootstrap的按钮自定义颜色：

.btn-primary-my{
    background-color: rgb(85, 153, 221);
    border-color:rgb(85, 153, 221);
}

暂时就记录这些。

    原文作者：捉不住的鼬鼠
    原文地址: https://blog.csdn.net/u012911347/article/details/88666910
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞