day 60 Bootstrip学习

 

图标地址

http://fontawesome.io/icons/

图标用法地址

http://fontawesome.io/examples/

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css">
//这句是引入图标
    <link rel="stylesheet" href="../day%2058%20bootstrip/bootstrap-3.3.7-dist/css/bootstrap.min.css">
//这句是引入bootstrap的写法
</head>
<body>
     //通过这两句实现了带删除图标的按键  将a标签弄成一个按钮
  
    <a class="btn btn-danger" href="#">
    <i class="fa fa-trash-o fa-lg"></i> Delete</a>

    <script src="../day%2058%20bootstrip/jquery-3.2.1.min.js"></script>
    <script src="../day%2058%20bootstrip/bootstrap-3.3.7-dist/js/bootstrap.min.js "></script>
</body>
</html>

 弹出模态框

模态框和绑定模态框的按钮

<!-- 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>
View Code

触发模态框发生的JS代码   注意要引入Bootstrap的min.js文件

<script src="../day%2058%20bootstrip/jquery-3.2.1.min.js"></script>
<!--除了要引入jQuery  还要引入bootstrap 的js 文件-->
<script src="../day%2058%20bootstrip/bootstrap-3.3.7-dist/js/bootstrap.min.js "></script>
<script>
   
        //注意弹出模态框的写法。  .modal这个是固定的写法，后边的也是固定写法
       $("#myModal").modal({
                backdrop: true,
                keyboard: false
            });

</script>

 下拉菜单（用到了ul ）

http://v3.bootcss.com/components/

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

 

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    //小三角
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    //分割线
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

 

创建表单代码  内有重要结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css">
    <link rel="stylesheet" href="../day%2058%20bootstrip/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <!--页头-->
    <div class="page-header">
        <h1>信息卡收集
            <small>共三步</small>
        </h1>
    </div>
    <!--进度条-->
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 30%;">
            30%
        </div>
    </div>
    面板
    <div class="panel panel-primary">
        <!--面板内容-->
        <!--起始框-->
        <div class=" panel-heading">
            <h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right" aria-hidden="true"></span>
            </h3>

        </div>
        <!--剩下的空间-->
        <div class="row panel-body ">
            <!--设置表单块 占据左半边而且像右偏移-->
            <div class="col-md-offset-1 col-md-4">
                <!--表单-->
                <form class="form-horizontal">
                    <!--姓名-->
                    <div class="form-group">
                        <!--这里注意设置成块级的  label占3个位置-->
                        <label for="inputName" class="col-sm-3 control-label">姓名</label>
                        <!--输入框在9个位置-->
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="inputName" placeholder="姓名">
                        </div>
                    </div>
                    <!--手机号-->
                    <div class="form-group">
                        <label for="inputNumber" class="col-sm-3 control-label">手机</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="inputNumber" placeholder="请输入手机号">
                        </div>
                    </div>
                    <!--Email-->
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">邮箱</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <!--密码-->
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
                        </div>
                    </div>
                    <!--上传-->
                    <div class="form-group">
                        <!---->
                        <label for="exampleInputFile" class="col-sm-3 control-label">头像</label>
                        <div >
                             <input class=" col-md-offset-0.3" type="file" id="exampleInputFile">
                             <p class="help-block col-md-offset-3">Example block-level help text here.</p>
                        </div>

                    </div>
                    <!--选项-->
                    <div class="form-group">
                        <label class="col-md-2 col-md-offset-1">选择</label>
                        <div class="checkbox col-md-6">
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                        </div>
                        </div>
                    <!--按钮-->
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="../day%2058%20bootstrip/jquery-3.2.1.min.js"></script>
</body>
</html>
View Code

 模态框

注意按键button 中代码要这样写

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
还有就是 模态框一定要是body的直系子元素，才能正常弹出
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
//注意，目标一定模态框的ID 按键类型是 button
  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>
View Code

 

posted on 2018-01-09 22:42  王大拿  阅读(187)  评论(0)  编辑  收藏  举报

导航