简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

用Bootstrap编写页面

Original 2019-01-27 18:44:39 239
abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="D:/Bootstrap/css/bootstrap.min.css&

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="D:/Bootstrap/css/bootstrap.min.css">

<script type="text/javascript" src="D:/Bootstrap/js/bootstrap.js"></script>

<script type="text/javascript" src="D:/Bootstrap/js/jquery.min.js"></script>


</head>

<body>

<div>

<div>

  <div>

<nav class="navbar navbar-inverse">

  <div>

    <div>

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span>Toggle navigation</span>

        <span></span>

        <span></span>

        <span></span>

      </button>

      <a href="#">知天下</a>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li><a href="#">首页<span>(current)</span></a></li>

        <li><a href="#">视频</a></li>

        <li>

          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端知识<span></span></a>

          <ul>

            <li><a href="#">HTML</a></li>

            <li><a href="#">CSS</a></li>

            <li><a href="#">Javascript</a></li>

            <li role="separator"></li>

            <li><a href="#">Jquery</a></li>

            <li role="separator"></li>

            <li><a href="#">Bootstrap</a></li>

          </ul>

        </li>

      </ul>

      <form class="navbar-form navbar-right">

        <div>

          <input type="text" 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>

          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端视频<span></span></a>

          <ul>

            <li><a href="#">HTML</a></li>

            <li><a href="#">CSS</a></li>

            <li><a href="#">Javascript</a></li>

            <li role="separator"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

    </div>

  </div>

</nav>

  </div>

</div>

</div>

<div>

<div>

<div id="slider" class="carousel slide" data-ride="carousel">

    <ol >

        <li data-target="#slider" data-slide-to="0"></li>

        <li data-target="#slider" data-slide-to="1"></li>

        <li data-target="#slider" data-slide-to="2"></li>

    </ol>

    <div>

        <div class="item active">

            <img src="D:/daima/menu/images/img6.jpg" alt="" style="width:100%;height: 400px;">

            <div></div>

        </div>

        <div>

            <img src="D:/daima/menu/images/img2.jpg" alt="" style="width:100%;height: 400px;">

            <div></div>

        </div>

        <div>

            <img src="D:/daima/menu/images/img3.jpg" alt="" style="width:100%;height: 400px;">

            <div></div>

        </div>

    </div>

    <a href="#slider" class="carousel-control left" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>


    <a href="#slider" class="carousel-control right" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

</div>

</div>

<div>

<div>

<div>

      <img src="D:/daima/menu/images/img3.jpg" alt="">

      <div>

        <h3>Bootstrap</h3>

        <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。...</p>

        <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">收藏</a></p>

      </div>

    </div>

<div>

      <img src="D:/daima/menu/images/img5.jpg" alt="">

      <div>

        <h3>Bootstrap</h3>

        <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。...</p>

        <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">收藏</a></p>

      </div>

    </div>

    <div>

      <img src="D:/daima/menu/images/img4.jpg" alt="">

      <div>

        <h3>Bootstrap</h3>

        <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。...</p>

        <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">收藏</a></p>

      </div>

    </div>




</div>

<div>

<div>

<h3>最新动态</h3>

  <a href="#" class="list-group-item list-group-item-success">按钮组中的工具提示和弹出框需要特别的设置</a>

  <a href="#" class="list-group-item list-group-item-info">确保设置正确的 role 属性并提供一个 label 标签</a>

  <a href="#" class="list-group-item list-group-item-warning">可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</a>

  <a href="#" class="list-group-item list-group-item-danger">图标类只能应用在不包含任何文本内容或子元素的元素上。</a>

  <a href="#" class="list-group-item list-group-item-success">无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。</a>

  <a href="#" class="list-group-item list-group-item-info">漫威暗黑英雄霸气登场</a>

  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>

  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>

   <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>

  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>

  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>

  <a href="#" class="list-group-item list-group-item-danger">魔术师砸重金千里追爱</a>

   <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>

  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>

  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>

  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>

  <a href="#" class="list-group-item list-group-item-success">按钮组中的工具提示和弹出框需要特别的设置</a>

  <a href="#" class="list-group-item list-group-item-info">确保设置正确的 role 属性并提供一个 label 标签</a>

  <a href="#" class="list-group-item list-group-item-warning">可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</a>

  <a href="#" class="list-group-item list-group-item-danger">图标类只能应用在不包含任何文本内容或子元素的元素上。</a>

  <a href="#" class="list-group-item list-group-item-success">无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。</a>

  <a href="#" class="list-group-item list-group-item-info">漫威暗黑英雄霸气登场</a>

  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>

  <a href="#" class="list-group-item list-group-item-success">按钮组中的工具提示和弹出框需要特别的设置</a>

  <a href="#" class="list-group-item list-group-item-info">确保设置正确的 role 属性并提供一个 label 标签</a>

  <a href="#" class="list-group-item list-group-item-warning">可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</a>

  <a href="#" class="list-group-item list-group-item-danger">图标类只能应用在不包含任何文本内容或子元素的元素上。</a>

  <a href="#" class="list-group-item list-group-item-success">无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。</a>

  <a href="#" class="list-group-item list-group-item-info">漫威暗黑英雄霸气登场</a>

</div>

<nav aria-label="Page navigation">

  <ul class="pagination pagination-lg">

    <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true" >&laquo;</span>

      </a>

    </li>

    

    <li><a href="#" >1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li><a href="#">6</a></li>

    <li><a href="#">7</a></li>

    <li><a href="#">8</a></li>

    <li><a href="#">9</a></li>

    <li><a href="#">10</a></li>

     <li><a href="#" >11</a></li>

    <li><a href="#">12</a></li>

    <li><a href="#">13</a></li>

    <li><a href="#">14</a></li>

    <li><a href="#">15</a></li>

    <li>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">&raquo;</span>

      </a>

    </li>

  </ul>

</nav>

</div>

</div>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</body>

</html>

2019-01-27_184251.png


2019-01-27_184315.png

Correcting teacher：灭绝师太Correction time：2019-01-28 09:10:42
Teacher's summary：完成的不错，主要是在布局中熟练bootstrap组件……继续加油……

Release Notes

Popular Entries

php.cn：Public welfare online PHP training，Help PHP learners grow quickly！ ICP License:苏B2-20210495

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved Su ICP Filing No 2020058653号-1 About usDisclaimer