Bootstrap

最新推荐文章于 2022-04-17 20:33:36 发布
最新推荐文章于 2022-04-17 20:33:36 发布
阅读量84 收藏
点赞数
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59791762/article/details/123467369
版权

bootstrap

<!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">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <!-- 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="#">微博 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">视频</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">关注 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">粉丝</a></li>
                  <li><a href="#">点赞</a></li>
                  <li><a href="#">收藏</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">草稿箱</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">创作中心</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">客服</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">设置</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">创作中心 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">超话中心</a></li>
                  <li><a href="#">经常访问</a></li>
                  <li><a href="#">感兴趣</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">公益</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <div class="container-fluid ">
          <div class="row">
              <div class="col-md-3 ">
                <div class="panel panel-default">
                  <div class="panel-heading">推荐</div>
                  <div class="panel-body">
                    发现
                  </div>
                </div>
                
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">消息</h3>
                  </div>
                  <div class="panel-body">
                    更多功能
                  </div>
                </div>
              <div class="col-md-7 "></div>
              <div class="col-md-2 "></div>
          </div>
      </div>
      <!-- <div class="container"> -->
          <!-- <div class="row">
              <div class="col-md-1 bg-danger">1</div>
              <div class="col-md-1 bg-danger">2</div>
              <div class="col-md-1 bg-danger">3</div>
              <div class="col-md-1 bg-danger">4</div>
              <div class="col-md-1 bg-danger">5</div>
              <div class="col-md-1 bg-danger">6</div>
              <div class="col-md-1 bg-danger">7</div>
              <div class="col-md-1 bg-danger">8</div>
              <div class="col-md-1 bg-danger">9</div>
              <div class="col-md-1 bg-danger">10</div>
              <div class="col-md-1 bg-danger">11</div>
              <div class="col-md-1 bg-danger">12</div> -->
              <!-- <div class="col-md-1 bg-danger">13</div>
              <div class="col-md-1 bg-danger">14</div>
              <div class="col-md-1 bg-danger">15</div> -->
          <!-- </div>
      </div> -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://fastly.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>

运行结果

在这里插入图片描述

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>model-navbar</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">微博</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">微博首页</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">浏览记录</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    草稿箱
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">工具下载</a></li>
                  <li><a class="dropdown-item" href="#">创作中心</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">其他</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
     

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

运行结果

在这里插入图片描述

qq_59791762
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap_组件_导航条
zhangnan456的博客
08-29 173
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
Bootstrap作业
xdy541521的博客
04-12 807
模仿的Bootstrap中文网的练习 本以为很简单一个网页 但是必须要用Bootstrap来做硬是做了一下午才搞出来！ 记录下来以后回过头来再看看羞辱一下自己！ 样式 <style> * { list-style: none; } html { font-size: calc(1em + 1vw); } a { ..
曹鲁丹bootstrap
qq_59317372的博客
04-17 108
.navbar-brand{ padding:10px 20px; } .jumbotron{ background: url(../img/bg.jpg)center center no-repeat; padding-bottom: 0; padding-top: 10px; } .navbar{ margin-bottom: 0; } .jumbotron h2{ color: #BCE8F1; } .bg-danger{ background-color: #DDDDDD; } .bg
bootstrap作业
weixin_52765407的博客
03-13 535
bootstrap笔记 v5-导航栏------作业一 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot
3月16日bootstrap作业2
m0_61090178的博客
03-16 129
<!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个m
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图标库的设计理念是简洁...
一份Bootstrap框架的期末作业
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
bootstrap纯前端作业设计
12-08
这是我在17年大一时没学多久做的纯前端js+css页面设计，分享给刚开始学的同学参考参考，希望能帮到大家。
学生网页作品-期末作业
06-10
适合期末作业，因为做的不是很好，老师一眼就能看出你是自己做的，嗯就是这个样子。50字够了吧，还不够，再加50字
bootstrap作业（4.6）
Xnine77_的博客
04-08 434
轮播图 导航条代码部分 轮播图代码部分 效果展示（1-5页）
作业八 Bootstrap应用
qq_37655062的博客
07-04 563
【附加任务】 将商品详情页面利用Bootstrap改造成自适应页面没加的效果图：加了Bootstrap效果图：
5.4bootstrap作业-qyc
SunnyQYC的博客
05-30 887
We will now derive the probability that a given observation is part of a bootstrap sample. Suppose that we obtain a bootstrap sample from a set of n observations. (a) What is the probability that the...
bootstrap综合大作业_听说下雪天，咖啡与学长优秀的大作业很搭哦~
weixin_33328904的博客
12-21 300
也许你目前还在为大作业煎熬着，看看下面哪张图最像你呀？我希望是最后一张~大作业赶路人行为图鉴01大作业知多少02霸哥绕过我03无数次关机抢救04来自高手的目光滑动查看更多，有惊喜哦接下来让我们一起欣赏学长这份优秀的大作业吧~公共自行车系统- 2020.12.13 -选题 背景01灵感作者的选题灵感来源于其生活城市里的自行车租赁业务，并在现有APP功能上做了简化。如此一来，便恰到好处的满足...
徐子棋Bootstrap作业（2022.3.23）
Xnine77_的博客
03-25 369
导航条固定在顶部 Toggle navigation 博客-首页 <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="
bootstrap做网页那个（作业已经么有顺序了）
ITyuanhonghong的博客
09-22 696
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="styleshe...
bootstrap
06-01
, int size) { this.name = name; this.color = color; this.size = size; } public String getName() { return name;...Bootstrap最初由Twitter的前端工程师开发，现已成为最流行的前端框架之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值