Bootstrap4入门——为毕设而战

最新推荐文章于 2023-09-13 20:22:08 发布

似水灬流年

最新推荐文章于 2023-09-13 20:22:08 发布

阅读量679

点赞数

分类专栏：前端之BootStrap4

本文链接：https://blog.csdn.net/weixin_42719822/article/details/104383869

版权

前端之BootStrap4 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.颜色配置

知识点

Bootstrap4 内置颜色
前景色 text-*
背景色 bg-*

如以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <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">
    注释：引入jquery库源文件，因为bootstrap的依赖问题，必须引入

</head>
<body>
<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>

注释：引入jquery库源文件，因为bootstrap的依赖问题，必须引入

<div  class="">  欢迎收看    </div>
在未加修饰前，默认白底黑字

<div  class="bg-primary text-white"> 欢迎光临 </div>
字体即前景色为白色，背景为蓝色

<div  class="bg-secondary text-black-50"> 谢谢惠顾 </div>
前景色为黑色，背景为灰色

<div  class="bg-success text-white-50">  hello 小胡 </div>
前景色为白色，背景为绿色

<div  class="bg-danger  text-dark"> Do not go </div>
前景色为黑色，背景为红色

<div  class="bg-warning text-dark"> okey </div>
前景色为黑色，背景为黄色

</body>
</html>

效果如此
在这里插入图片描述
2.文本样式

知识点

text-center，right，left   居中，右左对齐
font-weight-normal, font-weight-bold   字体正常，加粗

修改 body的内容如下

<h2 class="font-weight-normal display-4"> Bootstrap教学</h2>
 2号标题 ，4号字体

<div class="text-center bg-light font-weight-bold"> 欢迎收看 </div>
背景为亮色

<p class="text-lowercase"> LowerCase text.</p>
单词全部小写

<p class="text-capitalize"> CAPitalize text.</p>
每个单词首字母大写

效果图
在这里插入图片描述
3.元素大小的变更
现场使用类定义大小并调用

<style>
    .my-container {
        width: 200px;
        height: 200px;
        background: #b1dfbb;  
                  }
</style>

定义样式类

<div class="my-container">
    <div class="bg-primary w-50 h-100"> love you</div>
</div>

定义的类背景色为淡绿色，高宽都是200像素
调用部分背景色为蓝色，高宽各占原类的50%，100%
在这里插入图片描述
4.余白与边框

padding 边框
margin 余白
size： 
   1：0.25rem
   2：0.5rem
   3：1.0rem
   4：1.5rem
   5：3rem

<style>
    .my-container {
        width: 200px;
        height: 200px;
        background: #ddd;
                  }
</style>
<div class="my-container pt-3 pl-3">
     主余白设置，高3左3
     
    <div class="bg-primary w-50 h-50 pt-1 pl-2"> 现场直播 </div>
     子余白设置，高1左2，各个余白相互独立
</div>
<div class="my-container px-3 py-3">
    x代表左右，左右各3，y代表上下，上下各3
    
    <div class="bg-success w-100 h-100"> 现场录播 </div>
</div>

在这里插入图片描述

margin 的使用方法：在定义的类里面加上
          margin-bottom，top，left，right: 100px;
       那么在被调用时就会留白100px
          margin: 0 auto
       设置盒子即类居中，在浏览器页面中间显示

底部留白
在这里插入图片描述
5.按钮的技巧

<button> Yes </button>     
<button  class="btn"> Yes </button>
<button  class="btn btn-primary"> Yes </button>      以上三个都是普通
<button  class="btn btn-danger btn-sm"> Yes </button>     小号
<button  class="btn btn-success btn-lg"> Yes </button>    大号

在这里插入图片描述
6.独特的网格系统 grid

Bootstrap4 将网页分割成12列

<div class="container">
    <div class="row mb-3">
         mb为下行距
        <div class="col-4 bg-danger"> COL1 </div>
        <div class="col-4 bg-success"> COL2 </div>
        <div class="col-4 bg-warning"> COL3 </div>
    </div>

    <div class="row">
        <div class="col-2 bg-danger"> COL1 </div>
        <div class="col-8 bg-success"> COL2 </div>
        <div class="col-2 bg-warning"> COL3 </div>
    </div>

    <div class="row mt-3">
         mt为上行距
        <div class="col-6 bg-danger"> COL1 </div>
        <div class="col-4 bg-success"> COL2 </div>
        <div class="col-8 bg-warning"> COL3 </div>
    </div>
</div>

其中 container 是内置类，超过12的整体会在下一行显示
在这里插入图片描述
7.响应式布局

Bootstrap4 根据客户端显示屏幕的大小，分为以下几类

超小
  -<576px 
  -.col-*
小
  ->=576px
  -.col-sm-*
中
  ->768px
  -.col-md-*
大
  ->992px
  -.col-lg-*
超大
  ->1200px
  -.col-xl-*

class = row 定义1行

body 内加入

<div class="row mb-3">
        <div class="col-6 bg-success"> Hello1  </div>
                      占一半
    </div>

    <div class="row mb-3">
        <div class="col-xl-12 col-lg-10 col-md-8 col-sm-4 col-6  bg-warning"> Hello2 </div>
               超大屏幕时占12，大屏幕占10，中等占8，小占4，特小/达不到其他标准时占6  
    </div>

    <div class="row mb-3">
        <div class="col-12 col-md-6 bg-danger"> Hello3 </div>
               一般是12，到中等时占6
    </div>

    <div class="row">
        <div class="col-12 col-md-6 bg-danger"> Hello4a </div>
        <div class="d-none d-md-block col-md-6 bg-primary"> Hello4b </div>
                一般不出现，到中等时占6，与上一行平分
</div>

随机截取2张效果图
在这里插入图片描述

8.特殊Section的使用

<main>
    <section class="py-5">
        <h2 class="text-center mb-5"> 有福利 </h2>
        <div class="container">
            <div  class="text-center mb-5">
                <h3> 柳岩 </h3>
                     <p> 柳岩（Ada），1980年11月8日出生于湖南衡阳，中国内地女演员、歌手、主持人。2000年，柳岩担任广东有线广播电视台信息频道《财经新闻》主持人，从而开始了她的主持生涯.</p>

                <img src="img1/柳岩.jpg" class="w-25 h-10" >
            </div>

            <div class="text-center mb-5">
                <h3> 古力娜扎 </h3>
                     <p>  古力娜扎（Gulnazar），1992年5月2日出生于新疆乌鲁木齐市，中国内地影视女演员、时尚模特。2011年，古力娜扎考入北京电影学院表演系本科班就读；同年，她签约上海唐人电影制作有限公司，并出演个人首部电视剧《轩辕剑之天之痕》，而她也因此被观众熟知.</p>
                <img src="img1/古力娜扎.jpg" class="w-25 h-100" >
            </div>
        </div>
    </section>
</main>

设置居中显示，效果如下
在这里插入图片描述

9.完成特殊Section

效果较好于上图

<main>
    <section class="py-5">
        <h2 class="text-center mb-5"> 有福利 </h2>
        <div class="container">
            <div  class="text-center mb-5 row">
                <div class="col-md-9">
                     <h3> 柳岩 </h3>
                        <p> 柳岩（Ada），1980年11月8日出生于湖南衡阳，中国内地女演员、歌手、主持人。2000年，柳岩担任广东有线广播电视台信息频道《财经新闻》主持人，从而开始了她的主持生涯.</p>
                </div>
                <div class="col-md-3">
                     <img src="img1/柳岩.jpg" class="w-50" >
                </div>
            </div>


            <div class="text-center mb-5 row">
                 <div class="col-md-9 order-md-2">
                      <h3> 古力娜扎 </h3>
                         <p>  古力娜扎（Gulnazar），1992年5月2日出生于新疆乌鲁木齐市，中国内地影视女演员、时尚模特。2011年，古力娜扎考入北京电影学院表演系本科班就读；同年，她签约上海唐人电影制作有限公司，并出演个人首部电视剧《轩辕剑之天之痕》，而她也因此被观众熟知.</p>
                 </div>
                 <div class="col-md-3 order-md-1">
                    <img src="img1/古力娜扎.jpg"  class="w-50">
                 </div>
            </div>
        </div>
    </section>
</main>