zoukankan      html  css  js  c++  java

  • 前端——Bootstrap

    Bootstrap框架

    bootstrap文件划分

    • js

      只需要留一个bootstrap.min.js即可

    • css

      只需要一个bootstrap.min.css即可

    • fonts

      都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

    布局容器

    • container与container-fluid

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
            border: 3px solid black;
        }
        @media screen and (max- 600px) {
            .c1 {
            background-color: green;
            height: 50px;
            border: 3px solid black;
        }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-6 c1"></div>
        <div class="col-md-6 col-xs-6 c1"></div>
        <br>
        <div class="col-md-3 c1"></div>
        <div class="col-md-9 c1"></div>
        <br>
        <div class="col-md-1 c1">
            <div class="row">
                <div class="col-md-6 c1"></div>
                <div class="col-md-6 c1"></div>
            </div>
        </div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>

    </div>
    <div class="row">
        <div class="col-md-9 c1"></div>
    </div>
</div>
</body>
</html>
    container

    栅格系统

    <style>
        .red {
            background-color: red;
            border: 3px solid green;
            height: 100px;
        }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>
        <div class="col-md-6 red"></div>
    </div>
</div>
<!--
        6，6
        2，10
        1～12
        再次理解class里面写的属性值到底是干啥的
-->
<!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->

    　　

    媒体查询

    <style>
				.c1 {
            background-color: red;
        }
        @media screen and (max- 600px){
            .c1 {
                background-color: green;
            }
        }
</style>				
<div class="col-md-6 red c1"></div>

    列偏移

    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
         .c1 {
            background-color: red;
            height: 50px;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <h1>虹桥校区脱产七期最牛逼!</h1>
        <h1>虹桥校区脱产七期最牛逼!<small>确实牛逼</small></h1>
            <p>电视剧发行的风景和史蒂<p class="lead">芬霍金说的，电视剧发</p>行的风景和史蒂芬霍金说的，电视剧发行的风景和史蒂芬霍金说的，电视剧发行的风景和史蒂芬霍金说的电视剧发行的风景和史蒂芬霍金说的</p>
        <abbr title="egon同志就是一个大帅比" class="initialism">egondsb</abbr>





            <blockquote>
  <p>20岁超越30岁，40岁，50岁的人,衣锦还乡,技多不压身</p>
  <footer>上海第一帅:<cite title="Source Title">Jason</cite></footer>
</blockquote>


            <ul class="list-unstyled">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>


            <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

        </div>


    </div>
</div>
</body>
</html>
    列偏移

    表格

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-hover table-bordered table-striped">
                <thead>
                    <tr class="info">
                        <th>name</th>
                        <th>password</th>
                        <th>hobby</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="danger">
                        <td class="text-center">Jason</td>
                        <td>123</td>
                        <td>学习</td>
                    </tr>
                    <tr class="warning">
                        <td>Egon</td>
                        <td>123</td>
                        <td>减肥</td>
                    </tr>
                    <tr class="success">
                        <td>Kevin</td>
                        <td>123</td>
                        <td>腰子汤</td>
                    </tr>
                    <tr class="active">
                        <td>Tank</td>
                        <td>123</td>
                        <td>吃生蚝</td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
</body>
</html>
    表格

    表单

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="awesome/css/font-awesome.css">
    <style>

        .c1 {
            margin-top: 100px;
        }

        body {
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4 c1">
            <form class="form-horizontal">
                <div class="form-group has-error">
                    <h1 class="text-center">会员登录 <span class="glyphicon glyphicon-user"></span></h1>
                    <label for="inputEmail3" class="col-sm-3 control-label ">用户名</label>
                    <div class="col-sm-9 ">
                        <input type="email" class="form-control " id="inputEmail3" placeholder="用户名">
                        <span class="error help-block">用户名错误</span>
                    </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">
                    <div class="col-sm-offset-3 col-sm-9">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="submit" class="btn btn-primary active">Sign in<i class="fa fa-bath" aria-hidden="true"></i></button>
                    </div>
                </div>
            </form>


        </div>
    </div>
</div>

<script>
    $('input').on('focus',function () {
        $(this).next().text('').parent().parent().removeClass('has-error')
    })
</script>
</body>
</html>
    表单

    button按钮

    OCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <button class="btn btn-success">button</button>
            <button class="btn btn-info">button</button>
            <button class="btn btn-warning">button</button>
            <button class="btn btn-danger">button</button>
            <button class="btn btn-primary">button</button>
            <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>
        </div>
    </div>
</div>
</body>
</html>
    按钮

    字体图标

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        span {
            color: green;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <span class="glyphicon glyphicon-heart"></span>
            <span class="glyphicon glyphicon-heart-empty"></span>

        </div>
    </div>
</div>
</body>
</html>
    字体图标

    导航条

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
    <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <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>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <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>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="page-header">
            <h1>Example page header
                <small>Subtext for header</small>
            </h1>
        </div>
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>...</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>


        <div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>
        <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>

        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li class="active"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>
    导航条

    模态框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 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>
</body>
</html>
    模态框
  • 相关阅读:
    C++学习：explicit关键字
    CMake入门——简单CMakeLists的编写
    EOJ Monthly 2020.1 E. 数的变幻
    CF #610Div2 B2.K for the Price of One (Hard Version) (dp解法 && 贪心解法）
    hdu 5147 Sequence II【树状数组/线段树】
    hdu 6581 Vacation【思维】
    dubbo源码学习(一)之ExtensionLoader
    xsd学习教程
    spring自定义schema学习
    如何更好地学习dubbo源代码（转）
  • 原文地址：https://www.cnblogs.com/king-home/p/10976015.html
Copyright © 2011-2022 走看看