Live2d Test Env

bootstrap笔记

Bootstrap简介

Bootstrap是最受喜欢的Html  css  和js框架，用于响应式布局，移动优先开发的web项目

Api:　　https://v3.bootcss.com/css/#forms

Bootstrap的下载安装，文件的创建

1.下载网址：http://www.bootcss.com/

2.引入文件：

1 <head>
2     <meta charset="UTF-8">
3     <title>Title</title>
4     <meta name="viewport" content="width=device-width,initial-scale=1">
5     <link rel="stylesheet" href="./css/bootstrap.css">
6     <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
7     <script type="text/javascript" src="./js/bootstrap.js"></script>
8 
9 </head>
View Code

Bootstrap的全局样式

1布局容器：

　　a:固定宽度响应式容器，样式名：container

　　　　宽度：1170px      屏幕宽度大于等于1200px

　　　　宽度：970px      屏幕宽度大于等于992px

　　　　宽度：950px      屏幕宽度大于等于768px

　　　　宽度：100%      屏幕宽度大于等于768px

　　b:流体容器，宽度为100%，样式名：container-fluid

2栅格系统：

　　

　　  

 bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度的样式类，这些样式类组成一套响应式，移动设备优先的流式栅格布局系统：

　　　　a: col-lg-*         大于1200排成一行，小于1200分别占一行

　　　　b: col-md-*         大于992排成一行，小于992分别占一行

　　　　a: col-sm-*         大于768排成一行，小于768分别占一行

　　　　a: col-xs-*        始终排成一行

偏移：<div class="col-lg-4 col-lg-offset-2" >col-lg-3</div>偏移两个单位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width,initial-scale=1">
 7     <link rel="stylesheet" href="./css/bootstrap.css">
 8     <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
 9     <script type="text/javascript" src="./js/bootstrap.js"></script>
10 <!--栅格系统-->
11     <style type="text/css">
12         div[class*='col-']{
13             background-color:gold ;
14             border: 1px solid red;
15             height: 40px;
16         }
17     </style>
18 </head>
19 <body>
20 <div class="container" style="background: #2aabd2">
21 
22     <div class="row"><!--a: col-lg-*         大于1200排成一行，小于1200分别占一行-->
23         <div class="col-lg-3">col-lg-3</div>
24         <div class="col-lg-3">col-lg-3</div>
25         <div class="col-lg-3">col-lg-3</div>
26         <div class="col-lg-3">col-lg-3</div>
27     </div>
28     <div class="row"><!--b: col-md-*         大于992排成一行，小于992分别占一行-->
29         <div class="col-md-3">col-lg-3</div>
30         <div class="col-md-3">col-lg-3</div>
31         <div class="col-md-3">col-lg-3</div>
32         <div class="col-md-3">col-lg-3</div>
33     </div>
34     <div class="row"><!--a: col-sm-*         大于768排成一行，小于768分别占一行-->
35         <div class="col-sm-3">col-lg-3</div>
36         <div class="col-sm-3">col-lg-3</div>
37         <div class="col-sm-3">col-lg-3</div>
38         <div class="col-sm-3">col-lg-3</div>
39     </div>
40     <div class="row"><!--a: col-xs-*        始终排成一行-->
41         <div class="col-xs-3">col-lg-3</div>
42         <div class="col-xs-3">col-lg-3</div>
43         <div class="col-xs-3">col-lg-3</div>
44         <div class="col-xs-3">col-lg-3</div>
45     </div>
46     <div class="row"><!--列偏移-->
47         <div class="col-lg-4 col-lg-offset-2" >col-lg-3</div>
48         <div class="col-lg-4">col-lg-3</div>
49     </div>
50 </div>
51 </body>
52 </html>
View Code

 3.按钮

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width,initial-scale=1">
 7     <link rel="stylesheet" href="./css/bootstrap.css">
 8     <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
 9     <script type="text/javascript" src="./js/bootstrap.js"></script>
10 </head>
11 <body>
12 <div class="container">
13     <h1>按钮</h1>
14     <a href="#" class="btn btn-default">默认按钮</a>
15     <a href="#" class="btn btn-primary">默认按钮</a>
16     <a href="#" class="btn btn-success">默认按钮</a>
17     <a href="#" class="btn btn-info">默认按钮</a>
18     <a href="#" class="btn btn-warning">默认按钮</a>
19     <a href="#" class="btn btn-danger">默认按钮</a>
20 </div>
21 </body>
22 </html>
View Code

 4.Glyphicons 字体图标的使用

 

在class加入图标的name即可：

 

 <span class="input-group-btn"><a class="btn btn-default glyphicon glyphicon-search"> 搜索</a></span>

还可以利用css将图标进行调整；哈哈

响应式布局

1.class:

没错就是设置这玩意：根据栅格来调整

col-lg-*:对于>=1200px显示的列为*;

col-md-*:对于>=992px显示的列为*;

col-sm-*:对于>=768px显示的列为*;

col-xs-*:对于<=768px显示的列为*;

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
        <!-- 说明：每row行共12列，分个2div，第1个div占4列，第2个div则占8列，即4列+8列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-3">col-md-3</div>
        <!-- 说明：每row行共12列，分个3div，每1,3个div占3列，第2个div则占6列，即3列+6列+3列=12列 -->
    </div>
</div>
View Code

 

2.js function:

不知道，还没学，就这样

3.媒体查询：

@media (max-width: 768px) {  //当小于768px的时候 .logo-list .col-lg-2的宽度变成100%，左浮动
    .logo-list .col-lg-2{
        width: 100%;
        float: left;
    }
}
View Code

 bootstrap表单验证bootstrap validator

第一步：导入文件：

 

第二：开干

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/common/common.js"></script>
</head>
<body style="padding: 50px">
<form class="form-horizontal" action="/addbook" id="addbooks" method="post">
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">书籍编号</label>
        <div class="col-sm-10">
            <input name="bookId" class="form-control" id="" placeholder="请输入">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">书籍名称</label>
        <div class="col-sm-10">
            <input name="bookName" class="form-control"  placeholder="请输入">
        </div>
    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">书籍类型</label>
        <div class="col-sm-10">
            <select name="bookType" class="form-control">
                <option value="1">青春</option>
                <option value="2">小说</option>
                <option value="3">文学</option>
                <option value="4">艺术</option>
                <option value="5">动漫/幽默</option>
                <option value="6">娱乐时尚</option>
                <option value="7">旅游</option>
                <option value="8">地图/地理</option>
                <option value="9">生活</option>
                <option value="10">婚恋/性</option>
                <option value="11">育儿/成长</option>
                <option value="12">保健/心理健康</option>
                <option value="13">体育</option>
                <option value="14">自我实现/励志</option>
                <option value="15">管理</option>
                <option value="16">经济</option>
                <option value="17">法律</option>
                <option value="18">政治/军事</option>
                <option value="19">哲学/宗教</option>
                <option value="20">社会科学</option>
                <option value="21">古籍</option>
                <option value="22">文化</option>
                <option value="23">历史</option>
                <option value="24">传记</option>
                <option value="25">少儿</option>
                <option value="26">中小学教辅</option>
                <option value="27">外语</option>
                <option value="28">考试</option>
                <option value="29">教材</option>
                <option value="30">工具书</option>
                <option value="31">科普读物</option>
                <option value="32">计算机/网络</option>
                <option value="33">医学</option>
                <option value="34">原版书</option>
                <option value="35">科学技术</option>
                <option value="36">科文商科教材</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">书籍数量</label>
        <div class="col-sm-10">
            <input name="bookNum"  class="form-control" placeholder="请输入">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">书籍作者</label>
        <div class="col-sm-10">
            <input name="bookAuthor" class="form-control" placeholder="请输入">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">书籍简介</label>
        <div class="col-sm-10">
    <textarea name="bookDetail" class="form-control" rows="3"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary" id="btn1">确认添加</button>
        </div>
    </div>
</form>
</div>
</body>
<script>

    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                bookId: {
                    message: '验证失败',
                    validators: {
                        notEmpty: {
                            message: '书籍编号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '书籍编号只能是数字'
                        },
                        stringLength: {
                            min: 2,
                            max: 18,
                            message: '书籍编号长度必须在6到18位之间'
                        },
                    }
                },
                bookName: {
                    validators: {
                        notEmpty: {
                            message: '书籍名称不能为空'
                        }
                    }
                },
                bookDetail: {
                    validators: {
                        notEmpty: {
                            message: '书籍简介不能为空'
                        }
                    }
                },
                bookType: {
                    validators: {
                        notEmpty: {
                            message: '书籍类型不能为空'
                        }
                    }
                },
                bookNum: {
                    validators: {
                        notEmpty: {
                            message: '书籍数量不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '书籍数量只能是数字'
                        },
                    }
                },
                bookAuthor: {
                    validators: {
                        notEmpty: {
                            message: '书籍作者不能为空'
                        }
                    }
                }
            }
        })}).on("success.form.bv",function(e){
                $("#message" , parent.document).text("添加成功");
                $("#mes" , parent.document).click();
    });
</script>
</html>
实例

 

posted @ 2018-09-21 17:56  麦奇  阅读(208)  评论(0)  编辑  收藏  举报