python之bootstrap（基本）

時間 2019-11-15

原文原文鏈接

導入：
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    
    
    
    
移動設備優先：    
    爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
經常使用樣式類
            1. 容器
                1. container
                2. container-fluid
            2. 柵格系統
                把一行均分紅最多12列
                能夠設置標籤佔多少列
                1. row表示一行
                2. col-xx-**表示一列
                    xx: 表示樣式適用的屏幕尺寸
                        - xs  手機
                        - sm  平板
                        - md  桌面顯示器
                        - lg  超大屏幕
                    **：表示佔多少份
                        - 取值範圍： 1~12
                3. col-xx-offset-**:
                    表示左側空幾份！
                4. 列支持再嵌套（再寫一行，分紅12份）
                5. 列排序
                    1. col-xx-push-*  --> 往右推
                    2. col-xx-pull-*  --> 往左拉
                6.clearfix：若是同一行中的標籤高度不一樣，加上這個屬性能夠以最高高度的標籤爲準統一各個標籤的高度
            3. 佈局樣式
            4. 表格
            5. 表單            6. 按鈕
            7. 圖片
            8. 輔助類
                1. 文本顏色
                2. 背景顏色
                3. 快速浮動
                4. 清除浮動
                
                
#--登陸驗證簡單實例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-Type" charset="UTF-8">
        <meta http-equiv="X-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
        <title>Title</title>
        <style>
            body{
                background-color: #dddddd;

            }
            .login-box {
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 login-box">
            <form>
                <h2 class="text-center">請登陸</h2>
              <div class="form-group">
                <label for="exampleInputEmail1">用戶名</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                  <span></span>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">密碼</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                 <span></span>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 記住我
                </label>
              </div>
              <button type="button" class="btn btn-default" id="b1">提交</button>
            </form>
            </div>
        </div>
    </div>
    <script src="../JQtest/jquery-3.4.1.min.js"></script>
    <script>
        $("#b1").click(function () {
            $("input:not([type='checkbox'])").each(function () {
                if($(this).val().length === 0){
                    var keyWord=$(this).prev().text();
                    $(this).next().text(keyWord+"不能爲空");
                    $(this).parent().addClass("has-error");
                }
            });
        });
        //獲取焦點，輸入的時候輸入框不變成警告色
        $("input:not([type='checkbox'])").focus(function () {
            $(this).next().text("");
            $(this).parent().removeClass("has-error");
        });
    </script>
    </body>
    </html>

1. BootStrap之基礎-1 BootStrap起步(基本概念、環境搭建)
2. bootstrap基本佈局
3. python之sqlalchemy基本
4. bootstrap基本整理3
5. Bootstrap基本CSS樣式
6. Bootstrap-基本的按鈕組
7. bootstrap框架基本用法
8. bootstrap基本整理1
9. Bootstrap 基本樣式-按鈕
10. bootstrap基本整理2
更多相關文章...
• Lua 基本語法 - Lua 教程
• C# 基本語法 - C#教程
• Kotlin學習（二）基本類型
• Kotlin學習（一）基本語法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。