day58

巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。

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>

效果：

会不断的运动直到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

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.

Nested 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

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 的后面。

动态实例

点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

 
 
Copy
<!-- Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

  Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        ...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </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 id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <ol class="carousel-indicators">

        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

        <li data-target="#carousel-example-generic" data-slide-to="1"></li>

        <li data-target="#carousel-example-generic" data-slide-to="2"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

            <img src="./imgs/banner_1.jpg" alt="...">

            <!--图片中填文字-->

            <div class="carousel-caption">

                <h1>第一页介绍</h1>

                <p>老实人的恶毒，像...</p>

            </div>

        </div>

        <div class="item">

            <img src="./imgs/banner_2.jpg" alt="...">

            <div class="carousel-caption">

            </div>

        </div>

        <div class="item">

            <img src="./imgs/banner_3.jpg" alt="...">

            <div class="carousel-caption">

            </div>

        </div>

    </div>

    <!-- Controls 左右控制-->

    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

<hr>

                                 <!--按钮直接连接模态框     目标 -->

<button class="btn btn-success" data-toggle="modal" data-target="#i1">点我弹出</button>

<!--模态框-->

<div id="i1" class="modal fade" tabindex="-1" role="dialog">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                </button>

                <h4 class="modal-title">模态框</h4>

            </div>

            <div class="modal-body">

                <form class="form-horizontal">

                    <div class="form-group">

                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

                        <div class="col-sm-10">

                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

                        <div class="col-sm-10">

                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

                        </div>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

                <button type="button" class="btn btn-primary">保存</button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

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

<script src="bootstrap/js/bootstrap.min.js"></script>

<script>

    $('.carousel').carousel({

        interval: 2000

    });

</script>

</body>

</html>

以上包含模态框和轮播图.

效果:

可参考:https://www.cnblogs.com/liwenzhou/articles/8243227.html

调用模态框的方式:

调用方式：

1.通过data属性

通过在一个触发弹出模态框的元素（例如：按钮）上添加 data-toggle="modal"属性，然后设置 data-target="#foo"属性或 href="#foo"属性，用来指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">显示模态框</button>

2.通过JS代码调用

$('#myModal').modal("show");  // 显示

$('#myModal').modal("hide")   // 隐藏

Bootstrap框架（二）的更多相关文章

  1. H5框架之Bootstrap（二）

    H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经 ...

  2. .NET MVC 学习笔记（二）— Bootstrap框架

    二..NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...

  3. 响应式开发(二)-----Bootstrap框架的介绍

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...

  4. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  5. 初学者 bootstrap（二）----在路上（4）

    ---------------------------------------------------------曾经认真书写的笔记啊,别来无恙啊--------------------------- ...

  6. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  7. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  8. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  9. bootstrap框架应用

    ---------------------------------------------------------------bootstrap---------------------------- ...

  10. Bootstrap框架中的字形图标的理解

    最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...

随机推荐

  1. Restful API设计要点

    1 Restful API时面向资源,不能面向动作: 2 充分利用http协议的GET, HEAD, OPTION, PUT, POST, DELETE几种方法: 3 GET方法用于获取资源,是幂等和 ...

  2. mstsc本地驱动器

    mstsc 可以把本地驱动器 挂载到服务器上

  3. easyui datagrid 分页 客户分页

    1.写好json 数据 {                                                              "total":21,     ...

  4. tomcat 时间相差8个小时，百度上查到的，备份下

    通常网上一查都是 修改 tomcat 的参数 ,如catalina 文件,jvm parameters 等.如果都不起作用,可以使用如下方式.. 你可以修改jdk的时间校正了,你这么来.进入 \hom ...

  5. socketpair初识

    #include <stdio.h>  #include <string.h>  #include <unistd.h>  #include <sys/typ ...

  6. 【Java】JavaWeb文件上传和下载

    文件上传和下载在web应用中非常普遍,要在jsp环境中实现文件上传功能是非常容易的,因为网上有许多用java开发的文件上传组件,本文以commons-fileupload组件为例,为jsp应用添加文件 ...

  7. KBMMW 4.82.00 发布

    作者最近加紧了更新进度,赞一个. 时间都去哪儿了? 还没好好看4.81, 新版就来了. 这个版本主要是增强日志管理,已经强大到替换delphi 本身的异常处理了. We are happy to an ...

  8. 前端之css笔记1

    1  css引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. 2018.10.19 NOIP训练 桌子（快速幂优化dp）

    传送门 勉强算一道dp好题. 显然第kkk列和第k+nk+nk+n列放的棋子数是相同的. 因此只需要统计出前nnn列的选法数. 对于前mmm%nnn列,一共有(m−1)/n+1(m-1)/n+1(m− ...

  10. phalApi数据库操作

    在很多时候,我们会遇到数据库表里面的某个值需要+1操作,我们不能简单地在update的时候写入array('key' => 'key+1'),因为在解析sql的时候,key+1 会带上引号作为一 ...