用bootstrap制作一个简单的页面

最新推荐文章于 2023-06-11 12:36:48 发布
最新推荐文章于 2023-06-11 12:36:48 发布
阅读量1.4k 收藏 12
点赞数 1
文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59998808/article/details/120186598
版权 
<!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">
  <!-- 上述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">
  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
  <style>
    #navLogin{
      margin-top: 25px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <img src="../img/logo.png">
      </div>
     <div class="col-md-4">
       <img src="../img/header.png">
     </div>
      <div class="col-md-4">
        <ul class="list-inline" id="navLogin">
          <li><a href="#">登录</a></li>
          <li><a href="#">注册</a></li>
          <li><a href="#">购物车</a></li>
        </ul>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-default">
    <div class="container-fluid navbar-inverse">
      <!-- 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="#">首页</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">
          <li class="active"><a href="#">手机数码</a></li>
          <li><a href="#">电脑办公</a></li>
          <li><a href="#">电脑办公</a></li>
          <li><a href="#">电脑办公</a></li>
        </ul>
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
<div>
  <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="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <h1>热门商品</h1>
      </div>
      <div class="col-md-10">
        <img src="../img/title2.jpg" style="padding-top: 30px">
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <img src="../img/big01.jpg" alt="">
      </div>
      <div class="col-md-10">
          <div class="row">
            <div class="col-md-6">
              <img src="../img/middle01.jpg" width="100%" height="236" alt="">
            </div>
            <div class="col-md-2" style="text-align: center">
              <img src="../img/small03.jpg" alt="">
              <h3>冬瓜</h3>
              <h4>￥299.00</h4>
            </div>
            <div class="col-md-2" style="text-align: center">
              <img src="../img/small04.jpg" alt="">
              <h3>冬瓜</h3>
              <h4>￥299.00</h4>
            </div>
            <div class="col-md-2" style="text-align: center">
              <img src="../img/small05.jpg" alt="">
              <h3>冬瓜</h3>
              <h4>￥299.00</h4>
            </div>
          </div>
        <div class="row" style="margin-top: 10px">
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small03.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small04.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small05.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small03.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small04.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small05.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <img src="../img/ad.jpg" width="100%" alt="">
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <h1>热门商品</h1>
      </div>
      <div class="col-md-10">
        <img src="../img/title2.jpg" style="padding-top: 30px">
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <img src="../img/big01.jpg" alt="">
      </div>
      <div class="col-md-10">
        <div class="row">
          <div class="col-md-6">
            <img src="../img/middle01.jpg" width="100%" height="236" alt="">
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small03.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small04.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small05.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
        </div>
        <div class="row" style="margin-top: 10px">
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small03.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small04.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small05.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small03.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small04.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
          <div class="col-md-2" style="text-align: center">
            <img src="../img/small05.jpg" alt="">
            <h3>冬瓜</h3>
            <h4>￥299.00</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid" style="margin-top: 10px">
      <img src="../img/footer.jpg" width="100%"  alt="">
  </div>
  <div class="container-fluid" align="center" style="margin-top: 10px">
    <a href="">关于我们</a>
    <a href="">联系我们</a>
    <a href="">招贤纳士</a>
    <a href="">法律声明</a>
    <a href="">友情链接</a>
    <a href="">支付方式</a>
    <a href="">配送方式</a>
    <a href="">服务声明</a>
    <a href="">广告声明</a><br />
    <div style="margin: 20px 0 100px 0">
      Copyright &copy; 2017-2018 指针商城 版权所有
    </div>
  </div>
  <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>
昴星团781
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用BootStrap制作网页页面
m0_65725031的博客
05-05 9089
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
Bootstrap 创建一个网页
最新发布
lsx202406的博客
06-15 375
Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网页。它由 Twitter 开发，并得到了世界各地开发者的广泛使用。Bootstrap 提供了一套丰富的预定义样式和组件，以及强大的 JavaScript 插件，使得网页开发变得更加快捷和简单。在本教程中，我们将学习如何使用 Bootstrap 创建一个基本的网页。
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
前端：使用BootStrap搭建一个简单的网页
qq_44845785的博客
02-27 7078
之前有想法学习一下前端框架的，后来没有坚持下来。连最基础的栅格系统都忘记了。于是，花了一点时间，重新温习了一下。写了一个简单的网页。页面大致是下面这张图。做得比较一般，不过能够自适应各种设备大小了。 说下制作过程吧，首先下载bootstrap提供的css,js文件，（之前看文档的时候，直接引用了CDN，不知道什么原因，用了没效果。），在html代码里引用这些文件。 接下来，就是制作网页的过程。要实现自适应网页，首先要加入这段代码 <meta name="viewport" content="init
自己动手搭网站（四）：用bootstrap写几个简单的页面
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
前端——bootstrap响应式网页制作-星游记主题（大作业+源码）
Pan_peter的博客
06-11 1万+
【自制星游记续】十年后，我们再飞行！！！_哔哩哔哩_bilibili六一快乐，伙伴们。！！！！！！！！！！！！！！！！，相关视频：【自制星游记第28站】迷失的方向，最后的倒计时！，【自制星游记第27站】把彩虹海画下来，为自己而活，𝐓𝐌耗时𝟏𝟏𝟒𝟓𝟏𝟒秒修复的星游记《再飞行》，只为让你们带着梦想再次高高的飞起来啊！，纳米核心 第一季，2023，再等星游！，九年相识，三年等待！终将再一次响彻整个宇宙！，星游记，一部曾经有机会触碰那个天花板的作品。
simple:用bootstrap4制作的简单登录页面
04-16
这个"simple:用bootstrap4制作的简单登录页面"项目是利用Bootstrap 4 的组件和网格系统来创建一个简洁、高效的登录界面。下面将详细介绍如何使用Bootstrap 4 创建登录页面以及涉及到的相关知识点。 1. **Bootstrap ...
简单使用bootstrap制作ASP.NET的登录页面
03-10
本篇文章将深入探讨如何利用Bootstrap来设计一个简单的ASP.NET登录页面。 首先，你需要在你的ASP.NET项目中引入Bootstrap的CSS和JavaScript库。这通常通过在页面头部添加引用到Bootstrap的CDN链接完成。例如： ```...
使用Bootstrap框架制作查询页面的界面实例代码
09-02
主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下
20分钟成功编写bootstrap响应式页面 就这么简单
11-23
本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。 图 1. 移动优先，适应不同设备 一、安装 最简单的方式是直接在网页中引用内容分发网络（CDN）提供的 Bootstrap，当用户访问网页时，会从就近...
Bootstrap制作登录注册页面（完整项目，已配置）
12-03
总的来说，这个项目提供了一个实践Bootstrap技能的机会，尤其是对于那些希望快速构建美观且功能齐全的登录注册页面的开发者。通过学习和应用这些知识点，你可以提高自己的前端开发能力，创造出更加专业和用户友好的...
前端页面制作Bootstrap
02-17
Bootstrap可制作美观的前端页面，拥有丰富的组件及外部插件，更适用于前端的开发
bootstrap页面生成器
10-21
bootstrap页面生成器，可直接生产LIST页面跟添加修改删除页面
startbootstrap 最简单的网页框架
03-10
套用startbootstrap 最简单的网页框架
利用bootstrap制作的一套生产类门户网页
10-09
利用bootstrap制作的一套生产类门户网页，包含index.html — companyPro.html — develop.html — newsCenter.html — produces.html等网页，可作为新手学习bootstrap参考。
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5642
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
用bootstrap 制作一个简洁美观的页面
iteye_8081的博客
08-02 6360
今天学习了bootstrap的一些基础组件，然后用了其中的一些组件制作了一个页面，在这里分享一下，希望大家不要嫌弃 &lt;span style="font-size:18px;"&gt;&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;
bootstrap——简单页面1
spfLinux的博客
12-27 722
Document div{ border: 1px solid red; } Bootstrap CSS Type 1111 2222 3333 4444 5555
使用Bootstrap制作网页主界面、增加界面
yifei_345678的博客
05-03 2242
使用Bootstrap排出好看的界面👌
使用bootstrap制作一个简单页面布局实例网站
06-11
好的，下面是一个基于Bootstrap的简单页面布局示例网站： ...<!... <title>Bootstrap Page Layout Example <!-- 引入Bootstrap CSS文件 --> ...希望这个示例可以帮助你了解如何使用Bootstrap制作简单页面布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值