Bootstrap

最新推荐文章于 2024-07-14 09:37:06 发布
最新推荐文章于 2024-07-14 09:37:06 发布
阅读量21 收藏
点赞数
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58801166/article/details/131923798
版权 
<!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-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #top {
            background-color: #fff;
            box-shadow: 0 2px 3px rgb(214, 214, 214);
        }

        #top a {
            color: rgb(128, 128, 128);
        }

        #daohang {}

        #daohang nav img {
            margin-top: 5px;
        }

        #daohang nav a {
            color: black;
        }

        #lunbo img {
            width: 100%;
            height: 410px;
        }

        #hot h3,
        #hot p {
            display: inline-block;

        }

        #hot h3 {
            margin-top: 10px;
        }

        #top_text {
            height: 50px;
            line-height: 50px;
        }
        #hot #down_img #left,
        #hot #down_img #right {
            height: 400px;
        }
        #hot #down_img #left img{
            height: 400px;
              width: 100%;
        }
        #hot  #down_img #right>div{
            height:200px;           
        }
        #hot #down_img #right>:nth-child(2)>:nth-child(n+1):nth-child(-n+2){
            padding-top: 7.5px;
        }
        

        #footer h3{
            text-align: center;
            color: rgb(128, 128, 128);
        }
        #footer>:nth-child(n+3):nth-child(-n+5){
            padding-top: 10px;
        }

    </style>

</head>

<body>
    <!-- 顶部 -->
    <div class="container-fluid row" id="top">
        <div class="col-lg-6 text-center"><a href="#">dlwiadnlandlawd</a></div>
        <div class="col-lg-6 text-center"><a href="#">dwadadawdwadawdwa</a></div>
    </div>

    <!-- 导航 -->
    <div class="container" id="daohang">
        <nav class="navbar ">
            <!-- 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">
                    <li class="active"><img src="../image/tmlogo.png" width="100px"
                            height="40px"></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>

            </div><!-- /.container-fluid -->
        </nav>


    </div>

    <!-- 轮播 -->
    <div class="container" id="lunbo">
        <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="../image/bg111.PNG" alt="...">
                </div>
                <div class="item">
                    <img src="../image/bg222.PNG" alt="...">
                </div>
                <div class="item">
                    <img src="../image/bg333.PNG" alt="...">
                </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="container" id="hot">
        <div id="top_text" class="row">
            <h3 class="col-lg-3">热门商品</h3>
            <p class="col-lg-9">根据您的喜好精心为您推荐优质商品</p>
        </div>
        <div id="down_img" class="row">
            <div class="col-lg-3" id="left"><img src="../image/clo.PNG" alt=""></div>
            <div class="col-lg-9" id="right">
                <div class="row">
                    <img src="../image/nnn.PNG" alt="" class="col-lg-6 ">
                    <img src="../image/cb44.jpg" alt="" class="col-lg-3 ">
                    <img src="../image/fd4.jpg" alt="" class="col-lg-3 ">
                </div>
                <div class="row">
                    <img src="../image/ac2.jpg" alt="" class="col-lg-3">
                    <img src="../image/q2.jpg" alt="" class="col-lg-3">
                    <img src="../image/nnn.PNG" alt="" class="col-lg-6">
                </div>
            </div>
        </div>
    </div>


    <!-- 潮牌来袭 -->
    <div class="container" id="footer">
        <div id="footer_text" class="row">
               <h3 class="col-lg-12">潮牌来袭</h3>              
        </div>

        
            <div class="row">
                <img src="../image/cb44.jpg" alt="" class="col-lg-3 ">
                <img src="../image/cb44.jpg" alt="" class="col-lg-3 ">
                <img src="../image/fd4.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqq067.jpg" alt="" class="col-lg-3 " >
            </div>
            <div class="row">
                <img src="../image/qqq28ab.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqq6c35.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqqcd8.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqqdd12.jpg" alt="" class="col-lg-3 " >
            </div>
            <div class="row">
                <img src="../image/qqqdd55.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqq28ab.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqqdd12.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqq1.jpg" alt="" class="col-lg-3 " >
            </div>
            <div class="row">
                <img src="../image/qqq28ab.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqq6c35.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqqcd8.jpg" alt="" class="col-lg-3 ">
                <img src="../image/qqqdd12.jpg" alt="" class="col-lg-3 " >
            </div>
          
       
    </div>
     <script src="../js/jquery.js"></script>
    <script src="../bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

 

 

weixin_58801166
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Bootstrap使用
m0_57774967的博客
04-24 5131
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
Bootstrap入门
橘猫吃不胖的博客
01-14 2106
Bootstrap入门1 Bootstrap概述1.1 什么是Bootstrap1.2 Bootstrap的特点1.3 Bootstrap框架的组成2 Bootstrap环境配置2.1 Bootstrap下载2.2 使用时需要导入的文件2.3 文件的引用3 全局CSS样式3.1 布局容器3.2 标题3.3 页面主体3.4 内联文本元素3.5 文本对齐3.6 改变大小写3.7 列表3.8 表格 1 Bootstrap概述 1.1 什么是Bootstrap Bootstrap是一个基于HTML、CSS和Java
Bootstrap简介
归兮的博客
08-18 8306
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
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-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图标库的设计理念是简洁...
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 308
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
更新商品前端接口编写
weixin_55639995的博客
07-12 344
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 280
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 202
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 916
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1063
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
Webkit简介以及工作流程
读心悦
07-10 331
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
Power Apps使用oData访问表数据并赋值前端
最新发布
weixin_41850878的博客
07-14 208
console.log需要F12打开浏览器开发者工具查看。方法过滤数据时，你可以指定一个OData。方法成功的例子，它使用了OData。在使用OData查询语法通过。参数来限制返回的记录集。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 381
【代码】​​ 翻页 上一页/下一页。
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
发出的红包

打赏作者

weixin_58801166

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值