Bootstrap练习

✾℡南风未恋̶̶ღ̶̶

已于 2023-12-01 21:32:54 修改

阅读量27

点赞数

文章标签： bootstrap 前端 html

于 2023-12-01 21:31:26 首次发布

本文链接：https://blog.csdn.net/qq_61990666/article/details/134744173

版权

字体图标与全局样式/表单和表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Bootstrap/bootstrap.css">
    <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
</head>
<body>
    <!-- 都是小写 -->
    <button class="btn">1</button>
    <button class="btn btn-success">1</button>
    <button class="btn btn-primary ">1</button>
    <button class="btn btn-warning ">1</button>
    <!-- 和上面一样都是基础上干嘛,否则无效和字体图标一样 -->
       <!-- 都是小写 -->
    <table class="table  table-warning">
        <!-- 继承是父类最终设置的样式能继承就会给子类设置. -->
        <tr class="table-info">
            <th class="bi bi-umbrella">1</th>
            <!-- bi -->
            <th >1</th>
            <th>1</th>
        </tr>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
    </table>
</body>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" type="image/x-icon"  href="favicon1(1).jpg">
    <link rel="stylesheet" href="./Bootatrap/bootstrap.min.css">
    <!-- iconfont,和类名都需要整个文件夹。这里bi和bi-需要整个文件夹 -->
    <link rel="stylesheet" href="./Bootatrap/fonts/bootstrap-icons.min.css">
    <!-- css和js不需要别的，只是文件当中设定了。都是bootstrap开头的文件名 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <script src="./Bootatrap/js/bootstrap.min.js"></script>
    <!-- 照片如何居中？？？ 图片text-align可以使得水平居中.这个设行高还可以垂直
    居中-->

    <!-- 该框架内container好几个视口宽度都设定了。可以让居中。盒子宽度也会帮你设，固定的。然后
    会设左右居中auto -->
    <!-- flex是减去没设定flex宽度，再平分，无论是否设定宽度。
        flex-grow是如果设定宽度，减去盒子宽度，然后平分占多少份，然后加上盒子原本宽度 -->
    <nav class="nav fixed-top ">
        <div class="container fix ">
        <a class="nav-link active" aria-current="page" href="#"><img src="./uploads/w1.jpg" alt=""></a>
        <p>
        <a class="nav-link" href="#">首页</a>
        <a class="nav-link" href="#">博客</a>
        <a class="nav-link ">Github</a>
        <a class="nav-link" href="#">Tweb Conf</a>
        <a class="nav-link" href="#">SuperStar</a>
        <a class="nav-link ">Web前端导航</a>
        <a class="nav-link ">关于</a>
        <!-- disabled什么意思啊？ -->
        </p>
    </div> 
      </nav>
      <!-- 轮播图 -->
      <!-- 轮播图，这个高是没设的，不设宽，背景图设高，才能换盒子。div宽都是百分之百。没高。框架要自己设，无论设置总的还是里面图片的div的似乎都可以换。 -->
      <div id="carouselExampleIndicators" class="carousel slide">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <!-- 轮播图是选这个div的背景，因为点击换也是让第几个显示，点击让下面的换。如果是大背景
            的话不行，指定这个歌div是否显示。所以要换的时候背景换，只能在这个盒子,让这些盒子撑开设置宽度
            都是百分百，然后只是让这些盒子是否显示。所以最外层的即使点击，里面不换，外面也可以换，写背景
            但是这里框架是写的里面的盒子换了position位置，且写了transition。隐藏就是外面对于文档流没有。也不是
            不占位置。每次一按按钮就换盒子且让定位的让它动以下。动到下一个循环。 -->
            </div>
            <div class="carousel-item">
       
            </div>
            <div class="carousel-item ">

       <!-- 只能一个active -->
            </div>
            <div class="carousel-item ">
       
            </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
     
     
      </div>
       <!-- 开源区域 -->
      <div class="origin container">
        <!-- 类名叫标签名无事 -->
        <h1>OpenSource/开源项目</h1>
        <p>种类众多的开源项目</p>
        <div class="row">
           <a href="#"  class="col-lg-3 col-md-6">
                <div class="c">

                </div>
        
           </a>
           <a href="#" class="col-lg-3 col-md-6">
                <div class="c">

                </div>

           </a>
           <a href="#" class="col-lg-3 col-md-6">
                <div class="c">

                </div>

           </a>
           <a href="#" class="col-lg-3 col-md-6">
                <div class="c">

                </div>
                 
           </a>
        </div>
   <img src="./uploads/w1.jpg" alt="" id="img">
</body>
</html>

//out: ../css/
.nav-link{
    display: inline-block;
}
.nav{
    background-color: #333; 
}
.active {
 
   
    img{
        width: 100px;
        height: 30px;
        display: inline-block;
    }

}
.fix{
    display: flex;
    justify-content: space-between;
    
    
}
p{
.nav-link{
    color:#fff;
   
   }
    text-align: center;
}
p .nav-link{
    line-height: 56px;
    display: inline-block;
    height:56px;
    font-size: 10px;
    padding:0 3px;
}
.active .t{
    width: 1000px;
    height: 50px;;
}
// max是最大这么多
@media (max-width:768px){
    .carousel-item{
    height:250px;
    }
}
@media (min-width:768px){
    .carousel-item{
    height:400px;}
}
@media (min-width:992px){
    .carousel-item{
    height:500px;}
}
/* 视图html变了，只能是改了因为显示一定会显示的，只不过有滑轮，一定那个大小 */
.carousel-item{
  
    // 如果1是px是图片左上角距离上和左的位置，如果是方位名词是放的位置。如果是center，也是放的位置
    //是从把盒子放在中间，盒子的水平居中。即使盒子大了也是中间居中。
    /* 和object-fit的值是一个意思，缩放包括缩小。如果数字就是数字咯缩放背景图这个图片的大小 */
    // 背景图的cover和contain一个是缩放到完全覆盖，至少一条边相同，缩放。，一个是盒子全部放进去，且有一条边相同
    background-position:center 0;

  background-size: cover;
   background-repeat: no-repeat;
}
.carousel-item:nth-child(4){
  

    background-image: url(http://cdn.alloyteam.com/assets/img/banner_0-c9e792.jpg)
}
.carousel-item:first-child{
    background-image: url(http://cdn.alloyteam.com/assets/img/banner_1-ec70a4.jpg);
}
.carousel-item:nth-child(2){
    background-image: url(http://cdn.alloyteam.com/assets/img/banner_tweb2019-47723f.png);
}
.carousel-item:nth-child(3){
    background-image: url(http://cdn.alloyteam.com/assets/img/banner_2-37b0e7.jpg);
}
.c{
   
    margin-bottom: 20px;
}
img{
    vertical-align: baseline;
    line-height: 100px;;
}
.origin{
    margin-top: 60px;
    text-align: center;
    h1,p{font-size:16px;}
    a{
       
       
            
               
            
            &:nth-child(1) div{
                background-color: pink;
            }
            &:nth-child(2) div{
                background-color: green;
            }
            &:nth-child(3)   div{
                background-color: yellow;
            }
            &:nth-child(4)  div{
                background-color: rgb(0, 128, 92);
            }
            div{
                height:200px;
            }
        }
    }
    .fixed-top{
        height: 40px;
        a{
            height: 40px;
           
        }
    }
    .fix .nav-link{
        line-height:40px;
    }
    p{margin: 0;}
    .nav-link{
        height: 40px;
    }

// 只要加这个类就行了，没必要自己写媒体查询，自己写框架的类
/* 框架上写了媒体查询,你写这个类,引用了,时刻看着,一旦视口变了
就会变宽度.这里因为每一个宽度一样,一行只能几个盒子.这肯定是flex换行
但是换行只要放不下就会换行,但是每个盒子设置宽度一样,如果我们做,肯定
不同视口宽度,下给一样的宽度盒子,但是让它能几个换行.这里这个类就可以
它让占百分比,可在视口范围上都只放几个盒子,设置换行,设置宽度,可以达到
宽度在缩小且一个范围内只占几份.但是这个框架设置宽度我们一行占四个
100%,但是盒子整个.如果要边距就会超过父级盒子.我们用套一个盒子,用里面盒子
做,就可以用空格.,如果就要用用外层盒子有边距看出来,没有那种
 */