bootstrap框架--常用的js插件

一.模态框

1.模态框放置的位置

务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素（以后就这么使用）），以避免其他组件影响模态框的展现和/或功能。

2.弹出的两种方式：

1. 通过 data 属性
data-toggle="modal" data-target="#myModal"

示例如下：

2. 通过JS代码
- $("#myModal").modal("show") --> 显示出来
- $("#myModal").modal("hide) --> 隐藏

示例如下：

3.控制模态框的尺寸：

模态框有两种尺寸，

模态框大小：(放在modal里面标签上的)
.modal-lg（大的模态框）
.modal-sm（小的模态框）

4.控制模态框的动画效果：（让模态框出来的时候有个效果）

使用fade（放在model的div中）

5.参数的介绍

示例：backdrop(示例)

keyboard(示例)

6.事件

7.模态框中可以插入form表单

<!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">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <title>Title</title>
</head>
<body>


<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</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">
        <form class="form-horizontal ">
                <div class="form-group">
                    <label for="inputName" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputName" placeholder="姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPhone" class="col-sm-2 control-label">手机</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputPhone" placeholder="手机">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-5">
                        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-5">
                        <input type="email" class="form-control" id="inputPassword" placeholder="密码">
                    </div>
                </div>

                <div class="form-group">
                    <label for="exampleInputFile" class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-5">
                        <input type="file" id="exampleInputFile">
                        <p class="help-block">只支持png,jpg,gif格式</p>
                    </div>
                </div>

                <hr>


                <div class="form-group">
                    <label class="col-sm-2 control-label">属性</label>
                    <div class="col-sm-5">
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                我是一个好人
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                我是一个坏人
                            </label>
                        </div>
                        <div class="radio disabled">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                                我不是一个人
                            </label>
                        </div>
                    </div>
                </div>
                <div>

                </div>


            </form>
      </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 -->
<!--模态框结束-->

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

模态框加入form表单

二.轮播图

1.轮播图默认事件是5秒，可以修改默认的时间

可以在轮播图的最后加上这个就可以控制默认的时间

<!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">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <title>Title</title>
</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="banner_1.jpg" alt="...">
      <div class="carousel-caption">
            <h3>美景图片</h3>
            <span>图片一</span>
      </div>
    </div>
    <div class="item">
      <img src="banner_2.jpg" alt="...">
      <div class="carousel-caption">
            <h3>美景图片</h3>
            <span>图片二</span>
      </div>
    </div>
    <div class="item">
      <img src="banner_3.jpg" alt="...">
      <div class="carousel-caption">
            <h3>美景图片</h3>
            <span>图片三</span>
      </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>



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

轮播图

三.左侧菜单

posted @ 2017-11-23 17:23 明-少阅读(168) 评论(0) 收藏举报

刷新页面返回顶部

明-少