Day07响应式 bootstrap 腾讯全端案例

最新推荐文章于 2024-08-28 11:59:16 发布
最新推荐文章于 2024-08-28 11:59:16 发布
阅读量97 收藏 2
点赞数
分类专栏： 移动web 文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52284271/article/details/131923156
版权

ctrl+alt+下箭头：一次选中多行

媒体查询
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

display属性在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
腾讯全端(响应式布局)

<!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="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>

    <!-- 头部 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">首页</a></li>
              <li><a href="#">博客</a></li>
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Tweb Conf</a></li>
              <li><a href="#">SuperStar</a></li>
              <li><a href="#">Web前端导航</a></li>
              <li><a href="#">关于</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    
    
    <!-- 头部结束 -->
    <!-- banner -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./uploads/banner_1.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_2.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_3.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_4.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    <!-- banner -->

    <!-- 开源项目 -->
    <div class="project">
        <h3 class="h2">OpenSourse / 开源项目</h3>
        <p>种类众多的开源项目，让你爱不释手</p>
        <div class="container">
            <div class="col-sm-6 col-md-3"><a href="#">1</a></div>
            <div class="col-sm-6 col-md-3"><a href="#">1</a></div>
            <div class="col-sm-6 col-md-3"><a href="#">1</a></div>
            <div class="col-sm-6 col-md-3"><a href="#">1</a></div>
        </div>
    </div>
    <!-- 开源项目结束 -->
    
    




    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

less样式表

// banner
.carousel {
    // 如果视口<768, 图250 max-width
    // 如果视口<992, 图400 max-width
    // 如果视口>992, 图500 min-width

    img {
        height: 100%!important;
    }
    @media (max-width:992px) {
        .item {
            height: 400px;
        }
    }
    @media (max-width:768px) {
        .item {
            height: 250px;
        }
    }
    @media (min-width:992px) {
        .item {
            height: 500px;
        }
    }
}
// 头部
.navbar-default {
    background-color: transparent;
    border: 0;
}
.project {
    text-align: center;
    padding-top: 30px;
    .container {
        div {
            // background-color: skyblue;
            a {
                display: block;
                height: 200px;
                background-color: skyblue;
            }
        }
    }
}

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

瑜 ～
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
腾讯全端Bootstrap响应式布局
06-07
在腾讯全端响应式布局中，我们可以利用Bootstrap的栅格系统（Grid System）来划分网页区域，根据屏幕宽度自动调整元素的排布。Bootstrap的栅格系统通常基于12列布局，通过类名如.col-xs-*, .col-sm-*, .col-md-*, ....
bootstrap响应式星巴克网站
11-19
Bootstrap响应式设计是一种广泛应用于网页开发的技术框架，它使得网页能够在不同设备上，如桌面、平板电脑和手机，提供良好的视觉体验。这个“bootstrap响应式星巴克网站”项目，显然是一个基于Bootstrap框架创建的...
腾讯地图API的应用
热门推荐
jdk_wangtaida的博客
01-29 1万+
腾讯地图JavaScript API的应用 前言 随着社会的高速发展，手机地图已经成为了生活中不可或缺的一部分，他出现在各种app中，比如外卖app需要展示配送的路线和距离，导航的app需要路线规划和显示路线拥挤情况，社交app需要显示自己所在的位置和附近用户的位置。基本上只要你做的产品涉及到地图板块，你都需要引进相关地图api。那么对于开发者来说，怎么使用地图的api来完成我们的功能点就变的至关重要啦，这篇博客就讲解下腾讯地图JavaScript API的应用。 正文 注册腾讯位置服务账号 腾讯
Bootstrap系列之卡片（Cards）
老__L的博客
05-29 5824
Bootstrap卡片提供了一个灵活的、可扩展的内容容器，具有多个变体和选项。卡片是一种灵活的、可扩展的内容容器。它包括页眉和页脚选项、各种各样的内容、背景颜色和强大的显示选项。如果你熟悉Bootstrap 3，卡片可以代替我们的旧面板、井和缩略图。与这些组件类似的功能可用作纸牌的修饰类。卡片使用尽可能少的标记和样式，但仍然设法提供大量的控制和定制。建立与flexbox，他们提供容易对齐和混合好与其他Bootstrap组件。默认情况下它们没有空白，因此需要时使用间距实用程序。下面是一个混合内容和固定宽度的基
谈腾讯地图web api如何实现类似百度地图内置的城市切换、关键字输入提示功能
chuangxin的专栏
03-19 4321
PC WEB端新增客户的时候需要填写客户地址和联系人信息，包括：省市区、街道、详细地址和经纬度以及联系人、固话和移动电话。获取客户地址信息之前用的是百度地图，由于小程序中客户拜访时，需要对客户进行定位、距离计算，所以客户经纬度都转换成了gcj02坐标。由于之前的百度地图经纬度坐标是百度自己坐标，因此需要获取经纬度时进行坐标转换，根据坐标点在百度地图上显示时需要二次转换，所以打算将百度地图替换成腾讯地图。本文讨论基于腾讯地图如何实现类似百度地图的城市切换、关键字搜索提示功能。
腾讯地图定位
small_animation的博客
06-06 970
第一个页面 html文件 <div> <span class="title">地址</span> <a href="map.html"> <input type="" style="width: 100%;" name="" id="map" value="" /> </a> </div&...
Day14：响应式网页
EmulateStep的博客
06-07 1086
day14：本文主要讲了媒体查询和 Bootstrap 框架，媒体查询讲解了媒体查询的完整写法和简易写法，还讲了几个常用媒体特性：min-width 、max-width 等以及书写顺序，如果媒体查询用到的场景很多，可以使用link标签在引入外部CSS时进行媒体查询。关于Bootstrap框架，主要讲了怎么下载和使用，讲了框架里面的栅格系统、button、组件等，怎么使用这个框架进行响应式布局，最后通过一个综合实例，巩固今日所学。
Web进阶：Day7 响应式、BootStrap、实战演练
CaptainDrake的博客
01-14 380
Web进阶：Day7 响应式、BootStrap、实战演练
60套HTML5+CSS3后台管理登录模板 响应式 bootstrap
04-05
Bootstrap框架是响应式前端开发的常用工具，它包含了一系列预定义的CSS类和JavaScript插件，可以快速构建响应式的网页和应用程序。Bootstrap的网格系统、导航栏、按钮、表单、模态框等功能组件，都为开发者提供了极...
bootstrap响应式表格实例详解
08-30
Bootstrap 响应式表格实例详解 Bootstrap 响应式表格实例详解是指使用 Bootstrap 框架来实现响应式表格的设计和开发。响应式表格是指可以根据不同设备和屏幕尺寸自动调整布局和样式的表格。Bootstrap 提供了一些预...
腾讯地图DEMO
weixin_33698823的博客
03-19 1678
1、腾讯地图DEMO 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name=...
vue ref和reactive区别
灰海
08-25 1525
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
AI 大模型时代，对前端工程师有哪些机遇和挑战？
最新发布
Z4400840的博客
08-28 384
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 1659
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
前端宝典十六：深入浅出8大设计模式
franktaoge的博客
08-24 1415
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
【React】React事件和HTML事件的区别
owo_ovo的博客
08-23 650
【React】React事件和HTML事件的区别
BootStrap响应式布局案例分析
"本资源是一份关于使用BootStrap进行响应式布局的教程，通过六个经典案例详细讲解了BootStrap在窄屏模式网页、固定布局模式网页、登录界面、流动布局、营销类页面设计以及网页顶部与底部粘贴效果等应用场景的实战...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值