Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Copy

<div class="jumbotron">
  <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

Copy

<div class="jumbotron">
  <div class="container"> ... </div> </div>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>老实人的恶毒 ， 像饭里的砂粒 ， 或者出骨鱼片里未净的刺 ， 会给你一种不期待的伤痛。</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

实现：

参考：https://v3.bootcss.com/components/#jumbotron

动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

Copy

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>


示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="progress">
        <div id="myBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0"
             aria-valuemax="100" style="width: 0%">
            0%
        </div>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
    // 定义一个进度条宽度的全局变量
    var width = 0;
    // 定义一个保存定时器的变量
    var t;

    var $myBar = $("#myBar");
    function changeWidth() {
        if (width < 100){
            // 自加1
            width = width+1;
            // 修改width属性
            $myBar.css("width",width+"%").text(width+"%");//.css改变style
        }else {
            // 清除定时器
            clearInterval(t);
        }
    }
    //
//    for (var i=0;i<100;i++){
//        changeWidth(i);
//    }
    // 每隔200ms运行一次
    t = setInterval(changeWidth, 200)//不断运行

</script>
</body>
</html>

效果：

扫描二维码关注公众号，回复： 4911329 查看本文章

会不断的运动直到100% 。

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

默认样式

默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Nested media heading

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Copy

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。

Bootstrap框架（二）

巨幕

Hello, world!

动画效果

媒体对象

默认样式

Media heading

Media heading

Nested media heading

Media heading

Media heading

猜你喜欢