Bootstrap

最新推荐文章于 2023-08-03 22:44:30 发布
最新推荐文章于 2023-08-03 22:44:30 发布
阅读量792 收藏 15
点赞数 1
文章标签： bootstrap html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sh2001824/article/details/126429935
版权

 一、文本样式

1.使用类名h1-h6

2.使用display：1-4

代码：

<!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>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <h1>h标签</h1>
    <h2>h标签</h2>
    <h3>h标签</h3>
    <h4>h标签</h4>
    <h5>h标签</h5>
    <h6>h标签</h6>
    <hr>
    <!-- display -->
    <p class="display-1">display属性</p>
    <p class="display-2">display属性</p>
    <p class="display-3">display属性</p>
    <p class="display-4">display属性</p>
    <hr>
    <!-- 属性h1-h6 -->
    <div class="h1">属性h1-h6 </div>
    <div class="h2">属性h1-h6 </div>
    <div class="h3">属性h1-h6 </div>
    <div class="h4">属性h1-h6 </div>
    <div class="h5">属性h1-h6 </div>
    <div class="h6">属性h1-h6 </div>

</body>

</html>

效果：

 

二、响应式图片

img-fluid 类让图片支持响应式布局其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放

图片缩略

img-thumbnail 使图片的外观具有 1px 宽度的圆形边框

<img src="..." class="img-thumbnail" alt="...">

通过以上完成一个简单的项目

<!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>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <style>
        #carouselExampleIndicators {
            margin-top: 66px;
        }
        
        .trend-skill h1,
        .trend-style h1,
        .new h1 {
            color: #EA13DB;
        }
        
        .a {
            font-size: 25px;
        }
        
        .trend-style {
            background-color: #F8F9FB;
        }
        
        footer {
            height: 200px;
            background-color: #353A40;
            padding-top: 30px;
        }
        
        hr {
            background-color: #999;
        }
        
        .b {
            line-height: 10px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- 头部导航 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">
            <img src="images/logo.png" alt="" width="40px">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></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>
                <li class="nav-item">
                    <a class="nav-link" href="#">发现</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">搜索&nbsp;<i class="fa fa-search"></i></button>
            </form>
        </div>
    </nav>
    <!-- 轮播图 -->
    <div id="carouselExampleIndicators" class="carousel slide carousel-fade" 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>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/banner-1.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="images/banner-2.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="images/banner-3.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="images/banner-4.jpg" class="d-block w-100">
            </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="trend-skill">
        <div class="container">
            <h1 class="mt-5 mb-4 text-center">潮流穿搭技巧</h1>
            <p class="text-center text-muted a">懂得如何穿搭的人，可以提升自己的时尚度，快来一起学习吧</p>
            <div class="row mt-5">
                <div class="col-md-6 mb-5">
                    <div class="media">
                        <img src="images/tab-1.png" class="align-self-center mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mb-2">保证着装干净整洁</h5>
                            <p class="text-muted">干净整洁是每一种造型最基础的要求，即使是白T恤+牛仔裤+运动鞋这样最简单的基础穿搭，也能够提升你整体的气质，帮你散发出强大的气场</p>

                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="media">
                        <img src="images/tab-2.png" class="align-self-center mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-2">模仿杂志、街拍潮人的穿搭</h5>
                            <p class="text-muted">当你不知道今天该怎么穿搭的时候,不妨去看一下杂志上的、或者是街拍潮人们是怎么进行穿搭的，模仿他们穿搭的方法，对培养自身的时尚感和提升自己的时尚敏感度是有很大帮助的</p>

                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="media">
                        <img src="images/tab-3.png" class="align-self-center mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-2">配饰的选择</h5>
                            <p class="text-muted">配饰能给你整体的装扮提升一个层次，配饰搭配不应该超过3个</p>

                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="media">
                        <img src="images/tab-4.png" class="align-self-center mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-2">尽量避开一些太花哨的衣服</h5>
                            <p class="text-muted">选择合适自己的服装，尽量避开一些太花哨的衣服</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 潮流穿搭风格 -->
    <div class="trend-style mt-5">
        <div class="container pt-3 pb-4">
            <h1 class="mt-5 mb-4 text-center">潮流穿搭风格</h1>
            <p class="text-center text-muted a">多种风格任你选</p>
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <img src="images/chao-1.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">通常会选择衬衫搭配深色萝卜裤，很有青春的样子，并且上身很舒服，有些许懒惰帅气的样子</p>
                            <a href="#" class="btn btn-outline-secondary float-right">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <img src="images/chao-2.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">帅气风格，酷酷的感觉，通常女生穿衣比较宽大，发型高马尾或者短发，配上夸张的口红色</p>
                            <a href="#" class="btn btn-outline-secondary float-right">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <img src="images/chao-3.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">甜美风格，衣服的几个主要元素，蝴蝶结，心形图案，浅粉色，浅紫色等少女感十足的颜色</p>
                            <a href="#" class="btn btn-outline-secondary float-right">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-5">
                        <img src="images/chao-4.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">帅气风格，这种穿搭看起来酷酷的感觉，通常男生穿的衣服衬衫搭配单肩包，带一个帽子</p>
                            <a href="#" class="btn btn-outline-secondary float-right">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-5">
                        <img src="images/chao-2.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">甜美风格，衣服的几个主要元素，蝴蝶结，心形图案，浅粉色，浅紫色等少女感十足的颜色</p>
                            <a href="#" class="btn btn-outline-secondary float-right">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-5">
                        <img src="images/chao-1.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">休闲风格，选择衬衫搭配深色萝卜裤，很有青春的样子，并且上身很舒服，有些许懒惰帅气的样子</p>
                            <a href="#" class="btn btn-outline-secondary float-right">更多>></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- 新闻专区 -->
    <div class="new">
        <div class="container">
            <h1 class="mt-5 mb-4 text-center">潮流穿搭新闻专区</h1>
            <p class="text-center text-muted a">快来一起get吧</p>
            <div class="row  pb-4">
                <div class="col-sm-3 mt-2 d-none d-sm-block">
                    <img src="images/new-1.png" class="w-100" alt="">
                </div>
                <div class="col-sm-9">
                    <h4>趣味简笔画--童装图案趋势</h4>
                    <p class="text-muted d-none d-sm-block">dabai 发布于2019-12-23</p>
                    <p class="d-none d-sm-block">
                        简笔涂鸦中蕴含作者的想象力，笔触中携带着情感张力，简简单单的勾画就呈现出事物本来的特质，是童装图案中不可或缺的组成部分。本篇报告集合了众多充满趣味性的原创涂鸦小小图案供设计师参考使用
                    </p>
                    <p class="text-muted">阅读(102321)评论(400)赞(800)<span class="d-none d-sm-block">标签:健康/衣服/杂志/模特/服装/电商/趣味生活</span></p>
                </div>
            </div>
            <hr>
            <div class="row mt-4 mb-4">
                <div class="col-sm-3 d-none d-sm-block">
                    <img src="images/new-2.jpg" class="w-100" alt="">
                </div>
                <div class="col-sm-9">
                    <h4>Vogue将举行全球时尚会议 邀请你来参加</h4>
                    <p class="text-muted d-none d-sm-block">meixi20 发布于2015-11-23</p>
                    <p class="d-none d-sm-block">
                        为了讨论行业做出努力的时尚未来走向，Vogue将和Vogue GLobal Network、Vogue Runway携手，在下周推出杂志有史以来第一场全球会议————邀请每个人来参加。
                    </p>
                    <p class="text-muted">阅读(2417)评论(20)赞(18)<span class="d-none d-sm-block">标签:健康/衣服/杂志/模特/服装/电商/趣味生活</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="container-fluid">
        <h4 class="text-center text-white">合作伙伴</h4>
        <p class="text-center">
            <i class="fa fa-cc-discover fa-2x text-white"></i>
            <i class="fa fa-dropbox fa-2x ml-1 text-white"></i>
            <i class="fa fa-eercast fa-2x ml-1 text-white"></i>
            <i class="fa fa-google-wallet ml-1 fa-2x text-white"></i>
            <i class="fa fa-youtube fa-2x ml-1 text-white"></i>
            <i class="fa fa-reddit-alien ml-1 fa-2x text-white"></i>
            <i class="fa fa-renren fa-2x ml-1 text-white"></i>
            <i class="fa fa-skype fa-2x ml-1 text-white"></i>
            <i class="fa fa-wpexplorer ml-1 fa-2x text-white"></i>
        </p>
        <p class="text-center text-white b">
            企业培训|合作事宜|版权投诉
        </p>
        <p class="text-center text-white b">
            冀ICP备12345678.© 2019-2025 chaoliuchuanda.Powered by chaopai
        </p>
    </footer>
</body>

</html>

效果：

 

sh2001824
关注
时尚服装商城Bootstrap响应式网站模板
06-06
一款多图展示型时尚服装商城Bootstrap响应式网站模板，该模板有14个html有效文件，包含了服饰商城所需的一切页面，分类齐全，布局合理，是您电子商城建站的不二之选。
流行男女服饰bootstrap网站模板
03-31
流行男女服饰bootstrap网站模板
HTML网页设计作业个性潮流服装商城模板
xunmaw001的博客
01-29 2111
该网站模板由首页热门服装模块、服装分类模块、服装详情模块、服装品牌展示页面、包含注册登录、和我联系及各类资源库等组成。全站由HTML5和CSS结合Javascript、bootstrap动画等制作，具有非常好的屏幕适配，整站运行性能良好，所有页面打开速度都在1秒以内。
通过bootstrap4框架制作商城网页
m0_55366658的博客
05-28 3571
这是整个页面显示出来的效果 下面来解析: 最上面显示的是导航栏用到椭圆形头像，下拉列表，文本框，button里设置font-awesome图标，因为bootstrap4没有自带图标了，所以我们就用font awesome。Font Awesome 品牌图标 | 菜鸟教程 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" > <img src=...
boostrap网站代码首页实现
w2019424的博客
07-26 1603
代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--最新版本的Bootstrap核心css文件--> <link rel="stylesheet" href="css/bootstrap.css...
【附源码】Java计算机毕业设计潮流服饰网店平台（程序+LW+部署）
花昔 计算机毕设源码程序
03-03 121
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：java+ mybatis + Maven等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA。
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
bootstrap响应式web开发课程的潮流穿搭网站手敲代码
11-16
bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的
时尚穿衣搭配网站模板
11-30
时尚穿衣搭配网站模板是一款大气好看的时尚生活HTML5模板下载。
HTML网站源码-时尚潮流服饰介绍网页模板-适配移动端&PC端.zip
最新发布
03-30
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手，帮助您展示自己的才华和技能。通过使用这套源代码文件，您可以轻松地完成网站搭建任务，为您的课程设计或毕业设计增添亮点。总的来说，这套HTML源代码文件是一个高效、实用、易用的工具，无论你是专业的网页设计师，还是业余的编程爱好者，都值得拥有。
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
BootStrap响应式网页开发
xfChen2的博客
02-23 334
1. VSCode官网下载缓慢或下载失败的解决办法： 链接改成：http://vscode.cdn.azure.cn/stable/78a4c91400152c0f27ba4d363eb56d2835f9903a/VSCodeUserSetup-x64-1.52.1.exe 转自：https://blog.csdn.net/zhaomengszu/article/details/112261258 ...
“穿搭速递”首页制作
满天星的博客
02-09 2518
“穿搭速递”首页制作
Bootstrap 类样式中的 mt mb ml mr mx my pt pb pl pr px py 的意思
weixin_45428910的博客
08-03 951
Bootstrap 类样式中的 mt mb ml mr mx my pt pb pl pr px py 的意思
HTML作业-潮流服装网页
学生期末作业
06-15 3352
HTML期末作业-潮流服装衣服网页，HTML+css+JavaScript,有视频注册登录页面! 部分网页截图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel..
bootstrap
06-01
, int size) { this.name = name; this.color = color; this.size = size; } public String getName() { return name;...Bootstrap最初由Twitter的前端工程师开发，现已成为最流行的前端框架之一。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值