Bootstrap3学习（二）

最新推荐文章于 2024-04-24 15:41:29 发布

qq_42497197

最新推荐文章于 2024-04-24 15:41:29 发布

阅读量333

点赞数

本文链接：https://blog.csdn.net/qq_42497197/article/details/90698433

版权

音乐网站的简单代码实现：
参考链接：https://www.runoob.com/bootstrap/bootstrap-make-a-website.html
https://www.cnblogs.com/jipinglong/p/9032640.html

一.Jumbotron：
Jumbotron：超大屏幕，该组件可以增加标题的大小，并为登陆页面内容添加更多外边距
用法：创建一个带有 class .jumbotron 的容器

二.导航栏
navbar-toggle：设置button为导航栏的切换钮
container-fluid:自适应屏幕宽度
data-toggle：以什么事件触发
data-target：事件的目标

三：轮播
轮播插件是一种灵活的响应式的向站点添加滑块的方式。它的内容很灵活，可以是图像、视频等以及其他想要放置的任何类型的内容。
img-responsive center-block：使轮播图居中显示

基本模板：
参考：https://v3.bootcss.com/getting-started/#template

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好，世界！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

网站页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <style>
        body{
            margin:30px;
            }
   </style>
   <script src="jquery-3.3.1.min.js"></script>
   <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron" style="margin-bottom:0"><h1 class="text-center"><em>更多精彩音乐</em></h1><br>
<h1 class="text-center"><em>等你发现 !</em></h1></div>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      </div>
    <div class="collapse navbar-collapse" style="text-align:center" id="myNavbar">
      <ul class="nav navbar-nav" style="display:inline-block;float:none;">
      <a class="navbar-brand" href="#">首页</a>
        <li class="center"><a href="#">新歌速听</a></li>
        <li><a href="#">民谣</a></li>
        <li><a href="#">摇滚</a></li>
        <li><a href="#">流行</a></li>
        <li><a href="#">轻音乐</a></li>
        <li><a href="#">歌手</a></li>
        <li><a href="#">主播电台</a></li>
        <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="歌手/歌曲">
    </div>
        <button type="submit" class="btn btn-default">搜索</button>
        <button id="fat-btn" class="btn btn-intervse"
    type="button" > 登录
</button>
    </form>
    </ul>
    </div>
    </div>
    </nav>

<div id="myCarousel" class="carousel slide">
  <!-- 轮播（Carousel）指标 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="img-558a5e2197d492508c71126256bdbff3.jpg" alt="" class="img-responsive center-block">
    </div>
    <div class="item">
      <img src="4a21e421a21c82acf24c54254fc39c59_109951164110504414.jpg" alt="" class="img-responsive center-block">
    </div>
    <div class="item">
      <img src="99dd282f53a1adfcc7f0e6a9dedbc063_109951164111078419.jpg" alt="" class="img-responsive center-block">
    </div>
  </div>
  <!-- 轮播（Carousel）导航 -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>关于网站  |  反馈建议  |  网站导航  </p>
</div>
</body>
</html>

实现效果：
在这里插入图片描述

qq_42497197

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap3学习（二）

音乐网站的简单代码实现：参考链接：https://www.runoob.com/bootstrap/bootstrap-make-a-website.htmlhttps://www.cnblogs.com/jipinglong/p/9032640.html一.Jumbotron：Jumbotron：超大屏幕，该组件可以增加标题的大小，并为登陆页面内容添加更多外边距用法：创建一个带有 cl...
复制链接

扫一扫