JavaScript教程之前端之移动端库和框架bootstrap(4)

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之前端之移动端库和框架bootstrap(4)

</script> </head> <body> <div class="container"> <div class="row"> <button class="btn btn-primary" data-toggle="modal" data-target="#modal01">弹出大模态框</button> <button class="btn btn-primary" data-toggle="modal" data-target="#modal02">弹出中等模态框</button> <button class="btn btn-primary" data-toggle="modal" data-target="#modal03">弹出小的模态框</button> <button class="btn btn-primary" id="btn01">js控制的弹框</button> </div> </div>  <div class="modal fade" id="modal01"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> 提示弹框 </div> <div class="modal-body"> <p>文字内容</p> </div> <div class="modal-footer"> <button class="btn btn-primary">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> <div class="modal fade" id="modal02"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> 提示弹框 </div> <div class="modal-body"> <p>文字内容</p> </div> <div class="modal-footer"> <button class="btn btn-primary">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> <div class="modal fade" id="modal03"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> 提示弹框 </div> <div class="modal-body"> <p>文字内容</p> </div> <div class="modal-footer"> <button class="btn btn-primary">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> <div class="modal fade" id="modal04"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> 提示弹框 </div> <div class="modal-body"> <p>js控制的弹框</p> </div> <div class="modal-footer"> <button class="btn btn-primary">确定</button> <button class="btn btn-default" id="shutoff">取消</button> </div> </div> </div> </div> </body> </html>

布局实例01
路径导航和下拉菜单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品列表</a></li>
            <li class="active">水果</li>
        </ol>
    </div>

    <br>
    <br>

    <div class="row">
        <div class="dropdown">
            <div class="btn btn-primary  dropdown-toggle" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu">
                <li><a href="#">菜单一</a></li>
                <li><a href="#">菜单二</a></li>
                <li><a href="#">菜单三</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

栅格中的row示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">

        .container {
            height: 50px;
            background-color: gold;
        }

        /*  用负边距去掉容器左右15px的间距   */
        .row {
            height: 50px;
            background-color: green;
        }

        .col-lg-5 {
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-5">col-lg-5</div>
    </div>
</div>
</body>
</html>

布局实例02
天天生鲜水果节节日活动布局实例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <title>天天生鲜-水果节</title>
</head>
<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand"><img src="images/logo.png" alt="天天生鲜logo"></a>
            </div>
            <div class="collapse navbar-collapse" id="mymenu">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</
      



  

   共6页: 
上一页
1
2
3
4
5
6
下一页

  

栏目列表