BootStrap响应式项目实战之世界杯网页设计

喜欢ヅ旅行 2023-09-29 17:41 27阅读 0赞

[**视频**][Link 1]

## BootStrap实战 ##

### 目标 ###

> 响应式布局复习
> 
> HTML5的复习
> 
> CSS3的复习
> 
> 了解BootStrap

### 一.复习 ###

![ng][]

响应式布局：页面可以随着设备的变化而动态改变。  
![在这里插入图片描述][5ce8f1ae5aef41d0b781d64399c0963f.png]

淘宝：pc端一套页面：不能随着屏幕的缩小而变化；

移动端：另外一套页面，可以随着屏幕的放大、缩小改变（m.taobao.com)

阿里公司：财大气粗可以做多套页面。

苹果公司：一套页面，随着pc、pad、手机端多端变化而变化。

优点：

1.适配多端；

2.页面简介

缺点：

1.页面内容要更多，因为要适配不同的设备；

2.技术要求更广泛。

### 二.BootStrap ###

> 框架：前端框架
> 
> 所谓框架，就是一个软件的半成品，由大型软件公司（比较牛X)的架构师设计出来，供广大程序员使用，在这个框架基础上进行二次的研发,研发网页、软件系统等等。
> 
> 建筑行业，前期学的结构力学、工程学，可能去工地搬砖，最终设计师、监理等，建筑的框架，成品图纸、塔吊、等快速搭建的设备。

中文网：https://v3.bootcss.com/

#### 2.1 站点欣赏：星巴克等 ####

![在这里插入图片描述][10f0e24a81704b4eaebde2afb4295fe9.png_pic_center]

#### 2.2 下载源码 ####

![在这里插入图片描述][85633776a388423e906a6ed9a7727c90.png_pic_center]

在本地磁盘创建目录，worldcup–>拷贝下载的bootstrap代码过来。

a)新建一个index.html

b)将jquery.3.3.1.js复制到bootstrap下的js目录里面；

c)在index.html里面做下引用；引用顺序bootstrap.css->jquery 3.3.1.js–>bootstrap.js

<!DOCTYPE html>
    <html lang="en">
    <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>我的网站(世界杯、美妆）</title>
        
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <script src="bootstrap/js/jquery-3.3.1.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
    </head>
    <body>
        <h1>Hello BootStrap</h1>
    </body>
    
    </html>

#### 2.3栅格系统 ####

> Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th align="left">超小屏幕 手机 (&lt;768px)</th> 
   <th align="left">小屏幕 平板 (≥768px)</th> 
   <th align="left">中等屏幕 桌面显示器 (≥992px)</th> 
   <th align="left">大屏幕 大桌面显示器 (≥1200px)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">栅格系统行为</td> 
   <td align="left">总是水平排列</td> 
   <td align="left">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>.container</code> 最大宽度</td> 
   <td align="left">None （自动）</td> 
   <td align="left">750px</td> 
   <td align="left">970px</td> 
   <td align="left">1170px</td> 
  </tr> 
  <tr> 
   <td align="left">类前缀</td> 
   <td align="left"><code>.col-xs-</code></td> 
   <td align="left"><code>.col-sm-</code></td> 
   <td align="left"><code>.col-md-</code></td> 
   <td align="left"><code>.col-lg-</code></td> 
  </tr> 
 </tbody> 
</table>

注意：

1.屏幕适配的时候，从大到小的适配，当无法显示的时候，一行占据小屏的最大宽度；

2.当设计的是小屏幕尺寸，变为大屏的时候，向上兼容模式；

### 三.项目 ###

#### 3.1 设计布局 ####

#### 3.2 左侧效果 ####

在左侧部分设计增加logo和导航部分。

<div class="logo">
        <img src="./img/logo.jpg" title="2022世界杯">
    </div>
    <div class="nav">
     <ul>
        <li><a href="#" class="glyphicon glyphicon-eur">欧罗巴</a></li>
        <li><a href="#" class="glyphicon glyphicon-indent-left">桑巴军团</a></li>
        <li><a href="#" class="glyphicon glyphicon-heart">铁血战车</a></li>
        <li><a href="#" class="glyphicon glyphicon-tower">非洲劲旅</a></li>
        <li><a href="#" class="glyphicon glyphicon-piggy-bank">东亚雄鸡</a></li>
      </ul>
    </div>

样式设置

/* 设计世界杯自身的样式;在logo的图片设置为宽 高 各站100% */
    .logo img {
        
        width: 100%;
        height: 100%;
    }
    .nav {
        
        background-color: #eee;
    }
    /* 设计ul的列表样式为none; padding:0；设置li和ul的间隙为0；ul默认有间隙存在;
    margin:ul和它外部的元素，边界为0；
    */
    
    ul {
        
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    /* 由于a标签是行级元素，设置宽 高无效，需要让它设置为块元素;
        padding-left:左内填充，a内部左填充30px;
        line-height:50px;和元素高度一致，会垂直居中;
    */
    .nav ul a {
        
        display: block;
        color: #666;
        padding-left: 30px;
        height: 50px;
        font-size: 15px;
        line-height: 50px;
    }
    /* text-decoration: none;设置字体的下划线样式，去除 下划线； */
    .nav ul a:hover {
        
        background-color: white;
        color: #222;
        text-decoration: none;
    }
    .nav a::before {
        
        color: red;
        padding-right: 8px;
        vertical-align: middle;
    }
    li {
        }

#### 3.3 中间部分 ####

![在这里插入图片描述][175c50fd6ca4475c95dab0a36a4e08ad.png_pic_center]

先看大框架，分上下两部分.

##### 3.3.1 上面图片内容 #####

##### 3.3.2 上面样式设置 #####

.news li {
        
        float: left;
        width: 25%;
        height: 128px;
        padding-right: 10px;
        margin-bottom: 10px;
    }
    
    /* news块元素li  a下的子元素p ;position: absolute;绝对定位;
     设置位置left top right bottom;  margin-bottom: 0;外边界底部为0；
     background-color: rgba(0, 0, 0, 0.5);设置背景色半透明;
    */
    .news li a p {
        
        width: 100%;
        height: 40px;
        margin-bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        line-height: 40px;
        left: 0;
        color: white;
    }
    
    /* 由于我们的a标签需要在这里容纳img p块元素；把它转化为块元素;
     新闻news块 li  a;position: relative;相对定位；此处的作用是为了 容纳p子元素；
    */
    .news li a {
        
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    /* 设计新闻 块 li下的a标签下的图片 */
    .news li a img {
        
        width: 100%;
        height: 100%;
    }
    
    
    
    /* 这个表示类样式是one的li元素; li:nth-child(1) */
    li.one {
        
        width: 50%;
        height: 266px;
    }
    
    /* transition 延迟时间; */
    img {
        
        transition: all 2s;
    }
    
    /* 鼠标悬停;transform: scale(1.05); scale 变多大; */
    img:hover {
        
        transform: scale(1.05);
    }

##### 3.3.3 下面图文设置 #####

重新来了解一下 布局大小。

<div class="row">
        <div class="col-sm-2 aimg">
            <img src="./img/zuoxia.jpg" alt="">
        </div>
        <div class="col-sm-10">
            <p>克里斯蒂亚诺·罗纳尔多（Cristiano Ronaldo dos Santos
                Aveiro），简称“C罗”，1985年2月5日出生于葡萄牙马德拉岛丰沙尔，葡萄牙职业足球运动员司职边锋/中锋，
                现效力于英超的曼彻斯特联足球俱乐部</p>
    
            <p class="lbl">阅读(101) 查看评论 标签：C罗 葡萄牙 曼联 骡子 梅西德比</p>
        </div>
    </div>

##### 3.3.4 下面图文样式 #####

/* 中 下界面样式 */
    .aimg img {
        
        width: 100%;
        height: 100%;
    }
    
    p.lbl {
        
        color: #666
    }

效果预览：

![在这里插入图片描述][e474df6426334039af71d6804e235c3c.png_pic_center]

##### 3.4补充表格 #####

为任意 `标签添加`.table\` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

通过 `.table-striped` 类可以给 之内的每一行增加斑马条纹样式。

添加 `.table-bordered` 类为表格和其中的每个单元格增加边框。

通过添加 `.table-hover` 类可以让 中的每一行对鼠标悬停状态作出响应。

效果单图一

![在这里插入图片描述][446b200e499f4ce287008e2ed574a04c.png_pic_center]

综合排名图二

![在这里插入图片描述][665f4f79327348a18ffeff6a4077bc20.png_pic_center]

#### 3.5右侧部分 ####

##### 3.5.1 右侧实现 #####

网页数据

<aside class="col-md-3">
        <a href="#" class="banner">
            <img src="./img/you.png" alt="">
        </a>
        <a href="#" class="hot">
            <span class="btn btn-primary">热搜</span>
            <h4 class="text-primary">欢迎来到中东</h4>
            <p>足球竞猜</p>
            <img src="./img/youxia.png" alt="">
        </a>
    </aside>

样式设置

.col-lg-3 a {
        
        text-decoration: none;
    }
    .banner img {
        
        width: 100%;    height: 100%;
    }
    .hot {
        
        display: block;    margin-top: 20px;
        padding: 0 20px 20px;    border: 1px solid #eee;
    }
    .hot span {
            border-radius: 0;}
    .hot p {
            font-size: 12px;}

##### 3.5.2 轮播插件补充 #####

一般用于广告、图片等重点内容展示。

<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
        <script src="../bootstrap/js/jquery-3.3.1.js"></script>
        <script src="../bootstrap/js/bootstrap.js"></script>

效果图

![在这里插入图片描述][4ad9233188f945618975712ff9cde920.png_pic_center]

##### 3.5.3 手风琴 #####

主要用于信息展示的场景，文字为主。

//第一步还是在js中引入css jquery.js bootstrap.js文件。
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                        aria-expanded="true" aria-controls="collapseOne">
                        C骡
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    克里斯蒂亚诺·罗纳尔多（Cristiano Ronaldo dos Santos Aveiro），简称“C罗”，1985年2月5日出生于葡萄牙马德拉岛丰沙尔，葡萄牙职业足球运动员
                </div>
            </div>
        </div>
        ...可以复制多个
    </div>

效果图

![在这里插入图片描述][433daad21fcc4bdb916d9992c83e9223.png_pic_center]

#### 3.6优化 ####

BootStrap基于媒体查询（media query）实现的,栅格系统，即根据当前设备的尺寸等信息控制具体采用哪种 css样式。

>     1.max-width 最大宽度，当有多个媒体查询书写时，顺序从大到小
>     2.mix-width 最小宽度，当有多个媒体查询书写时，顺序从小到大
>     媒体查询完整写法：
>     @media 关键词  媒体类型 and (媒体特性) {
>           css代码 }
>     关键词：  
>     and 连接另外一个条件 ：
>     （min-width:768px）and (max-width:991px)
>     only 仅这一个条件满足时
>     ont 非，取反
>     媒体类型：是用来区分设备类型的，例如打印机，手机电脑等等
>     	screen 带屏幕的设备
>     	print 打印预览模式
>     	speech 屏幕阅读模式
>     	all 默认值，包含上面三种模式
> 
> 1.  `@media mediatype and|not|only (media feature) {`
>     
>     CSS-Code;\`
> 2.  `}`

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th align="left">超小屏幕手机 (&lt;768px)</th> 
   <th align="left">小屏幕平板 (≥768px)</th> 
   <th align="left">中等屏幕桌面 (≥992px)</th> 
   <th align="left">大屏幕桌面 (≥1200px)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">.visible-xs-*</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-sm-*</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-md-*</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-lg-*</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-xs</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-sm</code></td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-md</code></td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-lg</code></td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
  </tr> 
 </tbody> 
</table>

##### 3.6.1 图片小屏隐藏 #####

class="hidden-xs"

css的设计

.logo {
           background-color: #a30029;}
    /* 设计世界杯自身的样式;在logo的图片设置为宽 高 各站100% */
    .logo img {
        
        /* width: 100%; */
        max-width: 100%;
        height: 100%;
        display: block;
        margin: 0 auto;
    }

![在这里插入图片描述][5ad057cdf98c4cc69ada629415644342.png_pic_center]

##### 3.6.2小屏文字 #####

css设计

.logo span {
        
        display: block;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-style: 18px;
        text-align: center;
    }

![在这里插入图片描述][e5a1e8d4c16f410ab3e8a2863b6402a5.png_pic_center]

##### 3.6.3非大屏导航 #####

需要使用媒体查询，注意可以根据需求，自行设计，超小屏、小屏、中等屏、大屏等。

/* 
        当不再是大屏的时候，设计导航变化，为横着的效果;
        媒体查询
    */
    @media screen and (max-width:1179px) {
        
        .nav ul li {
                width: 20%;        float: left;    }
        .hot img {
                width: 100%;    }
    }
    
    @media screen and (max-width:767px) {
        
        .nav li a {
        
            font-size: 12px;
            padding-left: 2px;
        }
        .news li.one {
                width: 100%;    }
        .news ul li {
                width: 50%;    }
        .page div {
                font-size: 12px;    }  
        .hot img {
                width: 100%;    }
    }

外链图片转存中…(img-NKUwJFcP-1668781706060)\]

##### 3.6.3非大屏导航 #####

需要使用媒体查询，注意可以根据需求，自行设计，超小屏、小屏、中等屏、大屏等。

### 四.总结 ###

[Link 1]: https://edu.csdn.net/course/detail/38053
[ng]: https://img-blog.csdnimg.cn/6a5bf577f0f04a329501d833ee8b85d4.png
[5ce8f1ae5aef41d0b781d64399c0963f.png]: https://img-blog.csdnimg.cn/5ce8f1ae5aef41d0b781d64399c0963f.png
[10f0e24a81704b4eaebde2afb4295fe9.png_pic_center]: https://img-blog.csdnimg.cn/10f0e24a81704b4eaebde2afb4295fe9.png#pic_center
[85633776a388423e906a6ed9a7727c90.png_pic_center]: https://img-blog.csdnimg.cn/85633776a388423e906a6ed9a7727c90.png#pic_center
[175c50fd6ca4475c95dab0a36a4e08ad.png_pic_center]: https://img-blog.csdnimg.cn/175c50fd6ca4475c95dab0a36a4e08ad.png#pic_center
[e474df6426334039af71d6804e235c3c.png_pic_center]: https://img-blog.csdnimg.cn/e474df6426334039af71d6804e235c3c.png#pic_center
[446b200e499f4ce287008e2ed574a04c.png_pic_center]: https://img-blog.csdnimg.cn/446b200e499f4ce287008e2ed574a04c.png#pic_center
[665f4f79327348a18ffeff6a4077bc20.png_pic_center]: https://img-blog.csdnimg.cn/665f4f79327348a18ffeff6a4077bc20.png#pic_center
[4ad9233188f945618975712ff9cde920.png_pic_center]: https://img-blog.csdnimg.cn/4ad9233188f945618975712ff9cde920.png#pic_center
[433daad21fcc4bdb916d9992c83e9223.png_pic_center]: https://img-blog.csdnimg.cn/433daad21fcc4bdb916d9992c83e9223.png#pic_center
[5ad057cdf98c4cc69ada629415644342.png_pic_center]: https://img-blog.csdnimg.cn/5ad057cdf98c4cc69ada629415644342.png#pic_center
[e5a1e8d4c16f410ab3e8a2863b6402a5.png_pic_center]: https://img-blog.csdnimg.cn/e5a1e8d4c16f410ab3e8a2863b6402a5.png#pic_center