正文

重修课程day56（bootstrap之javascript组件）

方杰0410  2022-02-14  347

关键词：

一模态框

　模态框放在body标签里面的，是body标签的子元素

　静态实例：

<div 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">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

　动态实例：

<!-- 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">×</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>

　显示方式：

　　1 通过data-target属性

data-toggle="modal" data-target="#myModal"

　　2 是通过js的代码找到模态框

- $("#myModal").modal("show")  --> 显示出来
- $("#myModal").modal("hide)   --> 隐藏

　模态框大小：放在model元素里面的

.modal-lg
.modal-sm

　动态效果：放在model元素上面的。fode

<div class="modal mode" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

　一个正经的模态框：

1. .modal-header
2. .modal-body
3. .modal-footer

　参数：

backdrop:遮罩层
    true:默认，显示遮罩层
    false：不显示遮罩层
    static：点击遮罩层不会关闭
keyboard：关于按键Esc
    false：点击Esc按键不会关闭模态框
    true：点击Esc按键就会关闭模态框

　事件：

事件类型	描述
show.bs.modal	`show` 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 `relatedTarget` 属性进行访问。
shown.bs.modal	此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 `relatedTarget` 属性进行访问。
hide.bs.modal	`hide` 方法调用之后立即触发该事件。
hidden.bs.modal	此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal	从`远端的数据源`加载完数据之后触发该事件。

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

二轮播图

<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="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." 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>

　　interval：定义图片切换时间

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

三左侧菜单

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

四扩展

font awesome
   http://fontawesome.io/

   i 标签 区别于Bootstrap自带图标的span标签

sweetalert:
   https://limonte.github.io/sweetalert2/

   引用css文件和JS文件之后

   swal("标题", "内容", "success")

以下为了解内容：
   Toastr

   http://www.jq22.com/yanshi476  可以查看简单示例


   jQueryLazyLoad

五 练习
导入的文件有：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="Dashboardhtml_files/bootstrap.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="Dashboardhtml_files/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="Dashboardhtml_files/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="Dashboardhtml_files/ie-emulation-modes-warning.js"></script>

    <![endif]-->
</head>

<body>

<script src="Dashboardhtml_files/al.html" async="" type="text/javascript"></script>
<script src="Dashboardhtml_files/sl.js" type="text/javascript" async=""></script>
<script type="text/javascript">_slot_id = "5aa1f912-36db-4dd1-8ba2-39ade2e3672d";</script>
<script type="text/javascript">_slot_id = "e721a9e4-592e-477c-aac6-d27828d2f4da";</script>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input class="form-control" placeholder="Search..." type="text">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne" style="background-color:#1F1E1E">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne" style="color: #ffffee">
                                菜单一
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <ul class="nav nav-sidebar">
                                <li><a href="#">Overview </a></li>
                                <li><a href="#">Reports</a></li>
                                <li><a href="#">Analytics</a></li>
                                <li><a href="#">Export</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo" style="background-color:#1F1E1E">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                               href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color: #ffffee">
                                菜单二
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <ul class="nav nav-sidebar">
                                <li><a href="">Nav item</a></li>
                                <li><a href="">Nav item again</a></li>
                                <li><a href="">One more nav</a></li>
                                <li><a href="">Another nav item</a></li>
                                <li><a href="">More navigation</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree" style="background-color:#1F1E1E">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                               href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="color: #ffffee">
                                菜单三
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"
                         aria-labelledby="headingThree">
                        <div class="panel-body">
                            <ul class="nav nav-sidebar">
                                <li><a href="">Nav item again</a></li>
                                <li><a href="">One more nav</a></li>
                                <li><a href="">Another nav item</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">基本信息</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="搜索">
                        </div>
                        <button type="submit" class="btn btn-default btn-primary">搜索</button>
                        <button type="submit" class="btn btn-default btn-success pull-right">添加</button>
                    </form>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>姓名</th>
                                <th>爱好</th>
                                <th>邮箱</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1,001</td>
                                <td>Lorem</td>
                                <td>ipsum</td>
                                <td>dolor</td>
                                <td>
                                    <button type="button" class="btn重修课程day15（函数之内置函数一）
什么是内置函数：别人已经定义好了的函数，我们只管拿来调用就好locals：局部作用域中的变量globals：全局作用域中的变量这两者在全局执行，结果一样；在局部中locals表示函数内的名字，返回的是一个字典，globals始终不变#def...  查看详情  
                
重修课程day24（面向对象5之封装）
 type：是所有类的类型，所有类的类型默认是type。一封装　1什么叫做封装：就是将自己想要隐藏起来的内容给隐藏起来。　　封装的原则：1.1将不需要对外提供的内容隐藏起来；1,2将属性隐藏起来，提供公共方法对其访问。...  查看详情  
                
重修课程day12（函数之迭代器和生成器）
一 迭代器　集合的目的：去重，关系运算。#a={1,2,3,4,5,6,7}#b={41,52,5,26,7,4,2,9,}#print(a-b)　　isinstance：判断数据的类型，还可以判断是否可迭代。　　iterable：形容词 可迭代的：fromcollectionsimportIterable:用来检测一个对象是否...  查看详情  
                
重修课程day34（网络编程八之线程二）
一concurrent.futures模块　开启进程池和线程池模块。　　线程池和进程池的区别：进程池开启的数量范围只能在CPU对的核数以内。而线程池的数量可以自己随便的定义，默认为是核数的五倍。　相关用法：　　ThreadPoolExecutor：创建...  查看详情  
                
重修课程day25（面向对象6之模块与包）
一模块　1 什么叫做模块：一个py文件就是一个模块　　模块的分类：内置模块，第三方模块和自定义模块　　内置模块：在python产生是就有的模块叫做内置模块，我们只管拿来调用即可　　第三方模块：别人已经定义好了的...  查看详情  
                
重修课程day32（网络编程六之进程三）
　什么叫做水平扩展：增加计算机的数量，并没有提高计算机的性能　什么叫开源：开放源代码　什么叫做虚拟化：同时跑多个系统一JoinableQueue模块　JoinableQueue模块介绍：比Queue多了两个函数，一个是task_done，另一个是join，都...  查看详情  
                
重修课程day31（网络编程五之进程二）
寄存器：运行时间快，但是容量比较小一守护进程　1什么是守护进程：　　守护进程就是辅助主进程的代码的执行，守护进程会伴随着主进程的代码的运行周期的。主进程的代码执行完毕之后，守护进程就没有存在的必要，所...  查看详情  
                
重修课程day9（函数之有参函数）
一函数的作用　1减少代码的冗余　2提高了代码的重用性　3提高了代码的可读性　4增强了代码的可扩展性概念：　面向过程编程：功能与功能之间的耦合很紧密　解耦：将一个复杂的功能分解成多个简单的功能，并且将功能与...  查看详情  
                
重修课程day26（面向对象6之反射，内置函数和常用模块）
一 软件的开发规范　基本的目录结构：bin目录：里面写start.py文件，启动程序。将当前的项目目录添加到sys.path，调用core文件下的所有脚本。　　　　　　　　　core目录：放一些主脚本文件，跟类相关的文件放在里面。在创...  查看详情  
                
重修课程day22（面向对象三之继承和派生）
面向对象的三大特性：封装，继承和多态一继承　1什么是继承：1.1什么是什么的关系。一个类是另一个类的子类。　　　　　　　　1.2继承是一种创新类的方式。新建的类可以继承一个或多个父类。父类又称为基类或超类，新...  查看详情  
                
重修课程day46（前端一之html一）
一web服务器的本质　由浏览器发送一个请求。服务器接收到，然后在回应一个响应。　由于浏览器的不同，web服务器响应的内容不一定被浏览器接收。　HTTP/1.1201OK

需要发送的内容：是为了给浏览器看的。http协议名称；201：状...  查看详情  
                
重修课程day47（前端二之html二和css一）
一列表标签　ul标签：无序列表 　ol标签：有序列表　li标签：写在ul和ol标签里面的　dl标签：定义列表　　dt标签和dd标签：都写在dl里面的<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title>...  查看详情  
                
重修课程day18（模块2）
一collections模块：数据类型模块　namedtuple:可命名元组p=collections.namedtuple(‘p‘,[‘x‘,‘y‘])a=p(1,2)print(a.x+a.y)　deque：双端队列1append：后添加；2appendleft：前添加；3pop：从后向前取值；4　　popleft：从前到后取值q=collections.deque([1,...  查看详情  
                
重修课程day30（进程）
一进程的概念　1进程和程序的区别：程序就只是一段代码，在硬盘上的一堆文件，进程就时正在运行的程序的过程，进程是有优先级的过程。　一个程序别执行几次就会产生几个进程二并发和并行　什么时并发：看起来是多个...  查看详情  
                
重修课程day17（正则表达式）
一正则表达式和re模块　1什么叫做正则表达式：这则表达式是字符串的一种筛选规则　2正则表达式的好处：1,1匹配：检测字符串是否符合正则表达式的规则，否则返回False。　　　　　　　　　　　1,2切割：按照一定的规则将字...  查看详情  
                
重修课程day35（网络编程九之协程）
什么是用户态和内核态：　内核态：当一个任务（进程）执行系统调用而陷入了内核代码中执行，这就叫做内核态。　用户态：当用户在执行自己的代码时，这就叫在用户态　　内核态和用户态的详情：http://www.cnblogs.com/viviwind/a...  查看详情  
                
day14-前端之bootstrap框架
Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前...  查看详情  
                
python学习_day62_前端基础之bootstrap全局css样式
一、布局容器　　Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。分别为：<divclass="container">//.container...  查看详情