Bootstrap轮播

最新推荐文章于 2022-06-04 10:22:23 发布

吃西瓜的刘备

最新推荐文章于 2022-06-04 10:22:23 发布

阅读量634

点赞数

分类专栏： bootstrap 文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/qinggezhiweini/article/details/48440537

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

《ONE一个》这个网站使用了Bootstrap进行网站布局，网站很利落。

今天在学习Bootstrap的时候对这个网站进行了研究，初学Bootstrap的同学们可以研究一些这个网站的前端源码。

接下来说说我今天的Bootstrap的学习情况。

完成后的效果

（图片素材来自于《ONE一个》）

这里写图片描述

上源码

（源码学习了菜鸟教程）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Bootstrap Basic</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
     <div class="row">
      <div clas="col-sm-7 col-md-6 col-lg-6">
        <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="../image/custom.jpg" alt="first">
              <div class="carousel-caption">图片标题</div>
            </div>
            <div class="item">
              <img src="../image/custom(1).jpg" alt="second">
              <div class="carousel-caption">图片标题</div>
            </div>
            <div class="item">
              <img src="../image/custom(2).jpg" alt="third">
              <div class="carousel-caption">图片标题</div>
            </div>
          </div>
          <!-- 轮播(Carousel)导航 -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
    </div>
  </div>
  </body>
</html>

学习心得

三个部分：轮播指标（carousel-indicators）、轮播项目（carousel-inner）、轮播导航（Carousel-control）
2.使用开源中国在线工具可以在研究在线网站时候，对于压缩了的CSS代码进行格式化，方便学习。

吃西瓜的刘备

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap轮播

《ONE一个》这个网站使用了Bootstrap进行网站布局，网站很利落。今天在学习Bootstrap的时候对这个网站进行了研究，初学Bootstrap的同学们可以研究一些这个网站的前端源码。接下来说说我今天的Bootstrap的学习情况。完成后的效果（图片素材来自于《ONE一个》）上源码（源码学习了菜鸟教程）<!DOCTYPE html><html> <head> <meta char
复制链接

扫一扫

专栏目录