BootStrap學習

時間 2019-12-05

原文原文鏈接

簡介：Bootstrap是最受歡迎的HTML、CSS和JS框架，用於開發響應式佈局，移動設備優先的WEB項目。由Twitter於2011年8月在GitHub上發佈，，它將常見的CSS佈局小組件和JavaScript插件進行了完整的封裝，大大提高工做效率。javascript

<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">
        <title>H</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container"> asdfasdfdsafdsaaa </div>
    </body>
</html>

柵格系統css

<!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">
        <title>H</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css"> div{ border: 1px #46B8DA solid; } </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8 col-sm-6">col-md-8</div>
                <div class="col-md-4 col-sm-6">col-md-4</div>
                <div class="col-md-8">col-md-8</div>
            </div>
        </div>
    </body>
</html>

媒體查詢：屏幕寬度小於某個值時候顯示特定的內容。html

@media (max-width:767px) { div{ background: #AC2925; } }

列偏移：java

<div class="col-md-4 col-md-offset-4"> col-md-4
</div>

列排序jquery

<div class="row">
       <div class="col-md-3 col-md-push-5"> col-md-3
       </div>
       <div class="col-md-6 col-md-pull-2"> col-md-6
       </div>
</div>

清除浮動bootstrap

默認使用float:left排列瀏覽器

<div class="row">
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 1<br>asdfasdfdsfdsa </div>
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 2
                </div>
                <div class="clearfix visible-xs">
                    
                </div>
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 3
                </div>
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 4
                </div>
            </div>