使用boostrap完成简单的网页

最新推荐文章于 2023-01-10 17:37:05 发布
最新推荐文章于 2023-01-10 17:37:05 发布
阅读量552 收藏 7
点赞数 1
分类专栏： Java学习知识点分析 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42788363/article/details/120186836
版权

注意：
div的各种class
class=“container-fluid” 表示自动填满
class=“container” 表示固定大小
class=“row” 表示一整行
至于 col-sm-12/col-md-12/col-lg-12等分别是在小、中、大屏幕的等分，函数将其分为12块
但是-12表示占满一整行，-1表示占据一行的1/12 可以嵌套使用，通常使用col-md-并嵌套在 class=“row” 内。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <img src="img/logo.png" alt="这里是标志">
        </div>
        <div class="col-md-3">
            <img src="img/header.jpg">
        </div>
        <div class="col-md-3">

        </div>
        <div class="col-md-3">
            <ul class="list-unstyled list-inline" style="margin-top: 30px">
                <li><a href="#">登陆</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">购物车</a></li>
            </ul>

        </div>
    </div>
    <div class="row">
        <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>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="img/1.jpg" alt="...">
                    <div class="carousel-caption">
                        这里是提示信息
                    </div>
                </div>
                <div class="item">
                    <img src="img/2.jpg" alt="...">
                    <div class="carousel-caption">
                        这里是提示信息
                    </div>
                </div>
                <div class="item">
                    <img src="img/3.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>
    </div>
    <div class="row">
        <div class="col-md-2" style="font-size:32px">热门商品</div>
        <div class="col-md-3" >
            <img src="img/title2.jpg" style="margin-top: 15px" width="100%">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <img src="img/big01.jpg" width="100%">
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-6">
                        <img src="img/middle01.jpg" width="100%">
                </div>
                <div class="col-md-2"style="text-align: center;margin-top: 20px">
                        <img src="img/small01.jpg">
                    <font style="color: red;">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center;margin-top: 20px">
                    <img src="img/small02.jpg">
                    <div class="row">
                    <font style="color: red;">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                </div>
                <div class="col-md-2" style="text-align: center;margin-top: 20px">
                    <img src="img/small03.jpg">
                    <font style="color: red">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small04.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small05.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small06.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small07.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small08.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small09.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <img src="img/ad.jpg" width="100%">
    </div>
    <div class="row">
        <div class="col-md-2" style="font-size:32px">热门商品</div>
        <div class="col-md-3" >
            <img src="img/title2.jpg" style="margin-top: 15px" width="100%">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <img src="img/big01.jpg" width="100%">
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-6">
                    <img src="img/middle01.jpg" width="100%">
                </div>
                <div class="col-md-2"style="text-align: center;margin-top: 20px">
                    <img src="img/small01.jpg">
                    <font style="color: red;">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center;margin-top: 20px">
                    <img src="img/small02.jpg">
                    <div class="row">
                        <font style="color: red;">
                            <p>东瓜</p>
                            <p>￥2999</p>
                        </font>
                    </div>
                </div>
                <div class="col-md-2" style="text-align: center;margin-top: 20px">
                    <img src="img/small03.jpg">
                    <font style="color: red">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small04.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small05.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small06.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small07.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small08.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
                <div class="col-md-2" style="text-align: center">
                    <img src="img/small09.jpg">
                    <font style="color: red; text-align: center">
                        <p>东瓜</p>
                        <p>￥2999</p>
                    </font>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <img src="img/footer.jpg" width="100%">
    </div>
    <div class="row" style="text-align: center">
        <a href="../案例一：网站信息显示页面/网站信息显示页面.html">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">招贤纳士</a>
        <a href="#">法律声明</a>
        <a href="../案例三：网站友情链接显示页面/网站友情链接显示页面.html">友情链接</a>
        <a href="#">支付方式</a>
        <a href="#">配送方式</a>
        <a href="#">服务声明</a>
        <a href="#">广告声明</a>
        <p>
            Copyright © 2016-2017 XX商城 版权所有
        </p>
    </div>
</div>

<script src="js/bootstrap.min.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

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

墨辰柒
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap学习下
后知后觉的博客
11-07 1264
Bootstrap学习下
bootstrap网页框架的使用方法
09-02
Bootstrap网页框架是一个流行的开源前端开发框架，用于快速构建响应式、移动优先的网站。它由Twitter的开发者创建，现在已经成为全球...学习和掌握Bootstrap的使用方法，对于提高开发效率和提升网页质量具有重要意义。
栅格系统
qq_45178972的博客
12-02 155
1.class="row"可以去除父容器作用15px的边距 2.每一列默认有左右15像素的padding 3.列嵌套最好加1个行 row ,这样可以取消父元素的padding值，而且高度可以与父级一样 4.子绝对定位则父相对定位
后端小白的Bootstrap笔记 一
终极冥帝
12-23 908
栅格系统免费小说 https://wap.kuwx.net/ 下面这张图是Bootstrap对栅格系统有关系数的规定 什么是栅格体统? 栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 1200px 一行最多盛放12列, 从上图中也能看出一共是5种响应尺寸(分别对应不同的尺寸的屏幕) 其实大白话讲 : 就是当我们用鼠标拖动浏览...
bootstrap布局
m0_45301039的博客
01-10 403
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理： 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边
css常用效果总结
一条宝鱼的专栏
07-28 299
css有不少常用的效果，你在平时浏览网站的时候可能会看到，但是真的要自己写的时候，有时候会突然忘记，今天稍微对那些常见的效果做一下小结。 1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。 代码如下： html { filter: grayscale(100%);//IE浏览器 -webkit-filter: g...
Bootstrap5 网格系统讲解
qq_65552364的博客
05-22 2521
一、列样式 二、网格类 三、网格系统规则 四、使用案例 五、列偏移 六、列顺序 七、对齐方式 前言 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统。随着视口尺寸的变化，根据视口的大小进行重新排布。在BootStrap5中，行(.row)是较为重要的元素，行是列的包装器，每一列最好包含在类名为row的容器之中。而每行又分为12个模板列，允许创建跨任意数量列的不同元素组合。列类指示要跨越的模板列数(例如，col-4 即跨越4个列，col-6即跨越6个列)，宽度是按百分比..
bootstrap Class样式学习笔记
pspxuan的博客
09-20 1206
1. 设置bootstrap响应式页面 引入bootstrap css文件 将html内容放置在 class为container-fluid的盒子中 2. 图片适应手机端 class = ‘img-responsive’ 3. 文本的居中以及样式 class = ‘text-center’ // 文本居中 class = ‘text-primary | text-info | text-...
bootstrap中col-*-offset、col-*-push和col-*-pull的使用说明
落日长烟
06-28 5035
在使用bootstrap做前端开发的时候，经常会用到列移动、列排列，那么对col--offset，col--push，col-*-pull一定不会默认，下面对其使用说明做简单介绍。 首先看这3个英文单词的中文含义解释： offset 本意：补偿（我们习惯叫做“偏移”），其实就是在左侧补列（1~11列） push 推，不是补列，而是将元素向左浮动 pull 拉，将元素向右浮动 下面主要看一下push和pull的对比效果 <div class="container" style="background-c
bootstrap后台管理系统模板
b422761838的专栏
07-08 3037
资料管理系统 .panel-group{max-height:770px;overflow-y:auto;} .leftMenu{margin:10px;margin-top:5px;} .leftMenu .panel-heading{font-size:14px;padding-left
BootStrap响应式网页布局实例.rar
06-18
使用BootStrap完成的响应式网页布局，适合初学者学习参考使用
BootStrapValidator初使用教程详解
08-31
BootStrapValidator是一款基于Bootstrap框架的数据验证插件，它提供了丰富的验证规则和用户友好的反馈效果，使得在网页表单中实现数据验证变得更加便捷。在本文中，我们将深入探讨BootStrapValidator的基本使用方法...
bootstrap响应式星巴克网站
11-19
以bootstrap完成的响应式星巴克网站源码，本网站也是借鉴成品网站完成，仅供开发人员下载学习，如用作商业用途，本人概不负责。
html设置col-md-,bootstrap中col-xs-*和col-sm-* 和col-md-*是怎么样对应的
weixin_31368913的博客
06-19 1855
栅格系统中的列是通过指定1到12的值来表示其跨越的范围 所以不会有col-**-15 ，最大也就是12。这个应该是说：屏幕大于(≥992px) ，使用col-md-* 而不是col-sm-*；如果屏幕大于(≥768px)，小雨<=992px，使用col-sm-* 而不是col-md-*。所以col-md-8对应的是col-sm-10。.col-xs-超小屏幕 手机 (<768px),....
JQuery学习笔记
最爱谭先森的博客
06-18 299
项目开发 html5 + css3 + javascript 第一阶段的重构网页 页面仔 复杂，比较慢，DOM驱动 bootstrap + jQuery + ajax 省略很多DOM操作，比较快捷，DOM驱动 vue + element-ui + axios 非常快，几乎不涉及DOM操作，数据驱动 bootstrap 1、介绍 利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架...
django中常用到的前端样式
weixin_30765577的博客
11-24 547
注：这里的样式都是导入bootstrap后经常用到的 1.栅格系统 col-md　　　　　　中型设备台式电脑（>=992px）,以折叠开始，断点以上是水平的。列数量和：12。 col-md-offset-3　　 偏移3个单位 class='row'　　　　row就是一行 col-md-6　　　　　是这行中一个块占6份，2个6份就是12份占满一行 label标签　　...
html居中通用办法
true_2009的博客
02-03 1408
首先需要一整行。   row自带block，所以占满一行，然后它会有margin-left和margin-right，保证左右都会超出一点点，大概30px。 这时候如果需要4块区域来展示的话，这样写 以此类推，根据需求划分区域，如果是奇数的话，只能自己写col-md-1.5这种样式了，其实很简单，把官方有的样式复制过来一套即可。 这个时候需要想一下每块区域里面的内容了，一般是一个居中
HTML创建12列小屏幕网格,Foundation 网格系统
weixin_29967003的博客
06-28 294
Foundation 网格系统Foundation 网格系统为 12 列。如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。网格列Foundation 网格系统有三个列：.small (手机端).medium (平板设备).large (电脑...
使用bootstrap设计淘宝网页
最新发布
05-12
由于淘宝网页具有复杂的布局和功能，需要较长时间和大量的代码才能完成。以下是一些基本的步骤和代码示例： 1. 下载Bootstrap并引入相关的CSS和JS文件： ```html <!-- 引入Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <!-- 引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入Bootstrap JS --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> ``` 2. 创建一个基本的HTML骨架： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>淘宝网</title> <!-- 引入Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">淘宝网</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">我的淘宝</a> </li> <li class="nav-item"> <a class="nav-link" href="#">购物车</a> </li> <li class="nav-item"> <a class="nav-link" href="#">收藏夹</a> </li> <li class="nav-item"> <a class="nav-link" href="#">商品分类</a> </li> </ul> </div> </nav> <!-- 主体内容 --> <div class="container mt-3"> <div class="row"> <div class="col-md-3"> <!-- 左侧菜单 --> <ul class="list-group"> <li class="list-group-item active">手机数码</li> <li class="list-group-item">电脑办公</li> <li class="list-group-item">家用电器</li> <li class="list-group-item">美妆个护</li> <li class="list-group-item">运动户外</li> <li class="list-group-item">汽车用品</li> </ul> </div> <div class="col-md-9"> <!-- 广告轮播 --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://dummyimage.com/900x300/000/fff" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://dummyimage.com/900x300/000/fff" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://dummyimage.com/900x300/000/fff" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- 商品列表 --> <div class="row mt-3"> <div class="col-md-4"> <div class="card"> <img src="https://dummyimage.com/400x400/000/fff" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">商品名称</h5> <p class="card-text">商品描述</p> <a href="#" class="btn btn-primary">立即购买</a> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img src="https://dummyimage.com/400x400/000/fff" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">商品名称</h5> <p class="card-text">商品描述</p> <a href="#" class="btn btn-primary">立即购买</a> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img src="https://dummyimage.com/400x400/000/fff" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">商品名称</h5> <p class="card-text">商品描述</p> <a href="#" class="btn btn-primary">立即购买</a> </div> </div> </div> </div> </div> </div> </div> <!-- 引入Bootstrap JS --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> </body> </html> ``` 3. 根据需要进行样式、布局和功能的调整。 以上仅为示例代码，实际的淘宝网页需要根据具体需求进行设计和开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值