bootstrap插件及其他插件 


fonts文件的问题：
    如果图标的样式不正确的时候，要把fonts文件放到同级目录

js插件

body页面布局:
    导航条
    网页内容
    模态框
    script引入文件


模态框：
    注意事项：
        不要同时开启多个模态框
        模态框的代码要作为body的子元素

    弹出方式：
        data绑定：
            添加 data-toggle="modal" 属性，或者 data-target="id值" 属性，
            再或者 href="id值" 属性
        通过 JavaScript 调用：
            只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：
            $('#myModal').modal("show/hide")

    大小：放在模态框内部的标签上
        modal-lg    大
        modal-sm    小

    动画效果：fade  放到模态框标签上

    模态框布局：
        modal-header
        modal-body
        modal-footer

    参数：可以将选项通过 data 属性或 JavaScript 代码传递。
        backdrop：遮罩层设置：
            'static'有遮罩层但是点击遮罩层不关闭modal
            默认参数是true，点击关闭
            false 不显示遮罩层

        keyboard：esc按键设置
            true   键盘上的 esc 键被按下时关闭模态框。
            false  键盘上的 esc 键被按下时不会关闭模态框。

    方法：
        .modal('toggle')：手动打开或关闭模态框。

    事件：
        show.bs.modal  show 方法调用之后立即触发该事件。
        shown.bs.modal     此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。
        hide.bs.modal  hide 方法调用之后立即触发该事件。
        hidden.bs.modal    此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。

轮播图：Carousel
    参数：
        interval：5000  控制单位间隔

菜单：
    data-toggle="collapse"   弹出方式


课外插件补充：
    fontawesome
        i标签  区别于bootstrap自带的span标签

    sweetAlert
        swal("标题","内容","类型")

    toastr
        toastr[文本]("内容")

    懒加载：绑定点击事件，触发事件后才会显示原图，但是多张图片的情况下，第一张图片就是原图

课外模板补充：
    metronic


示例及部分模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>示例</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--引入fontawesome文件-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <!--引入sweetalert文件-->
    <link rel="stylesheet" href="sweetalert/sweetalert2.min.css">
</head>
<body>


<!--data控制模态框-->
<!--<button type="button" data-toggle="modal" data-target="#myModal">模态框点击按钮</button>-->


<!--模态框插件-->
<!--<div id="myModal" 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">Modal title</h4>-->
<!--</div>-->
<!--<div class="modal-body">-->
<!--<p>One fine body&hellip;</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>&lt;!&ndash; /.modal-content &ndash;&gt;-->
<!--</div>&lt;!&ndash; /.modal-dialog &ndash;&gt;-->
<!--</div>&lt;!&ndash; /.modal &ndash;&gt;-->


<!--轮播图-->
<!--<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">-->
<!--&lt;!&ndash; Indicators &ndash;&gt;-->
<!--<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>-->

<!--&lt;!&ndash; Wrapper for slides &ndash;&gt;-->
<!--<div class="carousel-inner" role="listbox">-->
<!--<div class="item active">-->
<!--<img src="banner_1.jpg" alt="...">-->
<!--<div class="carousel-caption">-->
<!--One-->
<!--</div>-->
<!--</div>-->
<!--<div class="item">-->
<!--<img src="banner_2.jpg" alt="...">-->
<!--<div class="carousel-caption">-->
<!--Two-->
<!--</div>-->
<!--</div>-->
<!--<div class="item">-->
<!--<img src="banner_3.jpg" alt="...">-->
<!--<div class="carousel-caption">-->
<!--Three-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<!--&lt;!&ndash; Controls &ndash;&gt;-->
<!--<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>-->


<!--菜单示例-->
<!--<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">-->
<!--菜单一-->
<!--</a>-->
<!--</h4>-->
<!--</div>-->
<!--<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">-->
<!--<div class="panel-body">-->
<!--111-->
<!--</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">-->
<!--菜单二-->
<!--</a>-->
<!--</h4>-->
<!--</div>-->
<!--<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">-->
<!--<div class="panel-body">-->
<!--222-->
<!--</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">-->
<!--菜单三-->
<!--</a>-->
<!--</h4>-->
<!--</div>-->
<!--<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">-->
<!--<div class="panel-body">-->
<!--333-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->


<!--fontswesome示例-->

<!--普通图标引入-->
<!--<i class="fa fa-camera-retro fa-lg"></i> fa-lg-->
<!--&lt;!&ndash;比之前的大33%&ndash;&gt;-->
<!--<i class="fa fa-camera-retro fa-2x"></i> fa-2x-->
<!--<br>-->


<!--动态图标-->
<!--<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>-->
<!--<span class="sr-only">Loading...</span>-->
<!--<br>-->


<!--旋转-->
<!--<i class="fa fa-shield"></i> normal<br>-->
<!--<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>-->
<!--<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>-->
<!--<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>-->
<!--<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>-->
<!--<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical-->


<!--组合的图标示例-->
<!--<span class="fa-stack fa-lg">-->
<!--<i class="fa fa-square-o fa-stack-2x"></i>-->
<!--<i class="fa fa-twitter fa-stack-1x"></i>-->
<!--</span>-->
<!--fa-twitter on fa-square-o-->


<!--sweetAlert示例-->

<!--<button class="btn btn-success">点击</button>-->


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


<script>
    // js控制模态框
    //    $('#myModal').modal("show");   // 显示
    //    $('#myModal').modal("hide");   // 隐藏


    // 在模态框出来之前就会先出发这个事件
    //$("#myModal").on("show.bs.modal",function () {
    //    alert("ahahaha")
    //})

    // 设置轮播图的时间间隔
    //    $(".carousel").carousel({
    //        interval:5000
    //    })

    // sweetalert的使用
    //    $("button").on("click",function () {
    //        swal("标题","内容","success");
    //        swal("标题","内容","warning")
    //    })

</script>


</body>
</html>
插件示例

 


















posted @ 2017-11-23 16:45  chitalu  阅读(136)  评论(0)    收藏  举报