Python之路【第十三篇】jQuery案例-Form表单&插件及扩展

来源：互联网发布：淘宝的数据分析编辑：程序博客网时间：2024/06/05 02:58

jQuery案例-Form表单

学完这个form表单的案例，如果有人说这个表单（功能）还不够NB（此文不包含样式，样式是CSS比较简单可以根据需求自己添加），那么找武Sir他帮你搞定。

一步一步来

注意事项（目录结构）：

在写前端html代码的时候要注意（任何代码都一样），一定要规划好目录结构方便其他的人来看你的代码！

如果还有其他的html页面可以在加一个html存储的文件夹。

1、首先看下HTML主体

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>     <style>        .edit-mode{            background-color: #b3b3b3;            padding: 8px;            text-decoration: none;            color: white;        }        .editing{            background-color: #f0ad4e;        }    </style></head><body>    <div>        <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />        <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />        <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />        <a id="edit_mode" class="edit-mode" href="javascript:void(0);"           onclick="EditMode(this, '#tb1');">进入编辑模式</a>    </div>    <table style="margin-top: 20px;" border="1">        <thead>            <tr>                <th>选择</th>                <th>主机名</th>                <th>端口</th>                <th>业务</th>                <th class="tb1">状态</th>            </tr>        </thead>        <tbody id="tb1">            <tr>                <td><input type="checkbox" /></td>                <td edit="true">111 </td>                <td>v11</td>                <td edit="true" edit-type="select" global-key="BUSINESS"  select-val="2" >二手车</td>                <td edit="true" edit-type="select" global-key="STATUS"  select-val="1" >在线</td>            </tr>            <tr>                <td><input type="checkbox" /></td>                <td edit="true">v1</td>                <td>v11</td>                <td edit="true" edit-type="select" global-key="BUSINESS"  select-val="3">大保健</td>                <td edit="true" edit-type="select" global-key="STATUS"  select-val="1">在线</td>            </tr>            <tr>                <td><input type="checkbox" /></td>                <td edit="true">v1</td>                <td>v11</td>                <td edit="true" edit-type="select" global-key="BUSINESS" select-val="3" >大保健</td>                <td edit="true" edit-type="select" global-key="STATUS" select-val="2">下线</td>            </tr>        </tbody>    </table>    <script src="js/jquery-1.8.2.min.js"></script>    <script src="js/Form_menu.js"></script></body></html>

html主体

显示效果：

2、功能实现

2.1、导入jQuery

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>    <!--导入自定义的jQuery脚本-->    <script type="text/javascript" src="js/Form_menu.js"></script>

这里需要注意：自定义的jQuery是否可以放在原生的jQuery上面呢？不可以：咱们自己写的jQuery调用的也是原生的jQuery，如果原生的jQuery没有加载，咱们自定义的也是不可以用的。

2.2、首先我们要给，右上角的“进入编辑模式”添加一个事件，我们可以通过这个事件给“进入编辑模式”新增一个属性，或者样式，通过这个属性和样式，来判断是否进入了编辑模式，在上一篇我自己写的是使用的属性，这次我们来使用样式来判断。

在css文件里新增两个样式：

/*定义编辑按钮的样式*/.edit-mode{    background-color: #b3b3b3;    padding: 8px;    text-decoration: none;    color: white;}/*定义点击编辑按钮后的样式*/.editing{    background-color: #f0ad4e;}

2.3、在js目录下增加自定义的js文件实现各个功能

/** * Created by luo_t on 3/1/2016. */STATUS = [    {'id': 1, 'text': "在线"},    {'id': 2, 'text': "下线"}];BUSINESS = [    {'id': 1, 'text': "车上会"},    {'id': 2, 'text': "二手车"},    {'id': 3, 'text': "大保健"}];$(function(){    // checkbox默认事件优先，然后执行自定义的事件    $('#tb1').find(':checkbox').click(function(){        var tr = $(this).parent().parent();        if($("#edit_mode").hasClass('editing')){            if($(this).prop('checked')){                // 当前行进入编辑状态                RowIntoEditMode(tr);            }else{                // 当前行退出编辑状态                RowOutEditMode(tr);            }        }    });});//退出编辑模式，函数（被下面掉用）function RowOutEditMode(tr){    tr.children().each(function(){  //tr下面的自标签        var td = $(this);        if(td.attr('edit') == 'true'){ //如果在编辑状态            var inp  = td.children(':first');//获取td里面的第一个元素            var input_value = inp.val();//取出里面的值            td.text(input_value);//并复制给td标签        }    });}//进入编辑模式，函数（被下面掉用）function RowIntoEditMode(tr){    tr.children().each(function(){ //获取tr下面的所有td，循环        var td = $(this);        if(td.attr('edit') == 'true'){ //判断是否为可编辑状态            if(td.attr('edit-type') == "select"){  //判断是否为input的select标签                var all_values = window[td.attr('global-key')]; //获取全局变量判断获取当前的项目类型，                var select_val = td.attr('select-val'); //获取当前类型的下的值                select_val = parseInt(select_val); //把字符串转换为数字                var options = "";//定义一个空值，把标签循环加上。                $.each(all_values, function(index, value){ //循环这个项目类型                    if(select_val == value.id){ //判断，当前选中的值和项目类型的ID的值是否相等，如果相等使用这个值                        options += "<option selected='selected'>" + value.text + "</option>";                    }else{//没有，使用默认的项目类型                        options += "<option>" + value.text + "</option>";                    }                });                //当input标签，类型为select的标签发生改变时执行                var temp = "<select onchange='MultiChange(this);'>" + options + "</select>";                td.html(temp);            }else{ //如果不是select类型的那么                var text = td.text(); //获取td里的val值                var temp = "<input type='text' value='"  + text+    "' />";  //把值赋给input标签的value                td.html(temp);            }        }    })}globalCtrlKeyPress = false;// 如果按下键盘的任意键，执行 functionwindow.onkeydown = function(event){    console.log(event.keyCode);    //如果按下ctrl键    if(event && event.keyCode == 17){        //设置globalCtrlKeyPress为true        window.globalCtrlKeyPress = true;    }else{        //按下其他的键盘为false        window.globalCtrlKeyPress = false;    }};//如果任意键放开执行functionwindow.onkeyup = function (event) { //这里需要传入evnent    //如果ctrl键up    if(event && event.keyCode == 17 ){        //设置globalCtrlKeyPress为false        window.globalCtrlKeyPress = false;    }};//提升逼格多行修改function MultiChange(ths){    // 检测是否按下ctr键    if(window.globalCtrlKeyPress == true){        // 获取当前td所在的tr中的索引位置        var index = $(ths).parent().index();        //获取当前td内的值        var value = $(ths).val();        //找到当前td下的所有的选中的(tr)标签，并循环        $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){            //找到当前选中标签（:checked）的上面获取的index索引值的的td标签，的子标签的值。            $(this).parent().parent().children().eq(index).children().val(value);        });    }}//进入编辑模式 按钮触发功能function EditMode(ths, tb){ //ths & tb 就是在html页面中我们传入的参数：onclick="EditMode(this, '#tb1');"    // ths =this,    var isEditing = $(ths).hasClass('editing');  //判断是否有这个editing的样式    if(isEditing){  //如果有说明当前是编辑状态，那么点击的时候应该退出编辑状态        // 退出编辑模式        $(ths).text('进入编辑模式');  //修改他的内容，提升逼格用的。        $(ths).removeClass('editing'); //移除这个editing样式        $(tb).children().each(function(){ //获取这个form表单下的所有tr，并循环             var tr = $(this); //当前的tr            if(tr.find(':checkbox').prop('checked')){ //找到当选中的行                // 当前行，推出编辑状态                RowOutEditMode(tr);  //这里我们把代码进行了缩写，可以理解为python中调用函数的意思，我传入参数执行函数            }        });    }else{        // 进入编辑模式        $(ths).text('退出编辑模式'); //修改他的内容，提升逼格用的。        $(ths).addClass('editing'); //添加这个这个editing样式        $(tb).children().each(function(){ //找到每个一个form表单下面的tr循环            // $(this) 表示循环过程中,每一个tr，每一行数据            var tr = $(this);            var isChecked = $(this).find(':checkbox').prop('checked'); //获取当前tr下的checkbox的checked属性，用来判断是否为选中状态            if(isChecked==true){//如果为选中状态                // 当前行进入编辑状态                RowIntoEditMode(tr);//我们可以把重复的代码进行简化，类似于python中的函数！            }        });    }}//设置全选功能function CheckAll(mode, tb){    // 1、选中checkbox    // 2、如果已经进入编辑模式，让选中行进入编辑状态    // tb = #tb1    //$(tb) = $('#tb1')    $(tb).children().each(function(){//找到tb下面的所有tr，循环        // $(this) 表示循环过程中,每一个tr，每一行数据        var tr = $(this);        var isChecked = $(this).find(':checkbox').prop('checked');//找到所有选中的tr标签        if(isChecked==true){//如果选中什么都不做        }else{//如果没有选中            $(this).find(':checkbox').prop('checked',true);//如果没有选中首先把他设置为选中状态            // 如果已经进入编辑模式，让选中行进入编辑状态            var isEditMode = $(mode).hasClass('editing');            if(isEditMode){                // 当前行进入编辑状态                RowIntoEditMode(tr);            }        }    });}//设置反选功能function CheckReverse(mode, tb){    // 是否进入了编辑模式    if($(mode).hasClass('editing')){//如果进入编辑模式        $(tb).children().each(function(){//循环所有的tr            // 遍历所有tr            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');//找到所有的input的checkbox标签            if(check_box.prop('checked')){  //判断如果选中                check_box.prop('checked',false);//给他取消                RowOutEditMode(tr);//并退出编辑模式            }else{//如果没有选中                check_box.prop('checked',true);//给他选中                RowIntoEditMode(tr);//并进入编辑模式            }        });    }else{//如果没有进入编辑模式        $(tb).children().each(function(){ //找到所有的tr并循环            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');//周到所有的checkbox标签            if(check_box.prop('checked')){ //判断是否选中                check_box.prop('checked',false);//如果选中，给他设置为为选中            }else{                check_box.prop('checked',true);//如果没有选中，给他设置为选中            }        });    }}//设置取消功能function CheckCancel(mode, tb){    // 1、取消选中checkbox    // 2、如果已经进入编辑模式，行退出编辑状态    $(tb).children().each(function(){ //渠道所有的tr标签，并循环        var tr = $(this);        if(tr.find(':checkbox').prop('checked')){//找到所有选中的checked标签            // 移除选中            tr.find(':checkbox').prop('checked', false);            //获取是否为编辑状态            var isEditing = $(mode).hasClass('editing');            if(isEditing == true){ //如果为编辑状态                // 当前行，推出编辑状态                RowOutEditMode(tr);            }        }    });}

注：重点是jQuery的应用，要仔细一个一个实现，如果这里看不懂，需要注意以下几点：

有没有和武Sir或Alex学习

jQuery基础是否会

返回去看我上一张的的博客：Python之路【第十二篇续】jQuery案例详解

原理是否懂，是否一步一步的实现了功能

jQuery案例-文档处理

看下面的图片效果：

问：我想在点击加的时候在下面新增一个搜索条件框体，点击减号的时候删除当前这个框体怎么实现？

1、文档操作基础

看下面的例子：

在后面追加内容（可以是文本，可以是标签类型）：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige</title></head><body>    <div id="i1">    </div>    <div id="i2" style="background-color:red">    </div>    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>    <script>        $('#i1').append('<a>Hello Test Append</a>');//对这个id#i1的标签内尾部增加一条数据        $('#i1').append('<div>Test Continue</div>');//对这个id#i1的标签内尾部增加一条数据        $('#i1').prepend('<div>Prepend on the chiled tables</div>');//对这个id为i1的自标签内顶部增加一条数据        $('#i1').appendTo('#i2'); //想让某一个标签添加到某一个和标签，可以用到appendTo，把i1放到i2里面了        $('#i1').before('<h1>append content  same level up</h1>');//放在找到的'#i1'同级标签上面增加        $('#i1').after('<h2>append content same level down</h2>');//放在知道的'#i1'统计标签下面增加    </script></body></html>

2、分析

上面的例子，按照行分割一步一步的写，看效果。那么返回来看上上面开始说的

我想在点击加的时候在下面新增一个搜索条件框体，点击减号的时候删除当前这个框体怎么实现？

我要增加，怎么实现呢。clone （克隆-复制）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige</title></head><body>    <div id="search_conditions">        <div class="condition">            <a onclick="AddCondition(this,'#search_conditions')">+</a>            <input/>        </div>    </div>    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>    <script>        //添加新增内容        function AddCondition(ths,condition){            //copy condition div            //在吧copy的div追加到id="search_condition"的标签内下面            var cp = $(ths).parent().clone();            console.log(cp);            //修改里面的内容,和属性            cp.children(':first').text('-').attr('onclick',"RemoveCondition(this,'#search_conditions')");            cp.appendTo('#search_conditions');        }        //新增完后的标签内新增的内容        function RemoveCondition(ths,condition){            $(ths).parent().remove();        }    </script></body></html>

效果图如下（样式可以后续加上）：

jQuery扩展

1、什么是jQuery的扩展

首先要了解下，python中给咱们提供和很多现成的模块，但是他的模块够用吗？不够用那怎么办？导入第三方的模块，使用现成的模块操作快捷方便！

http://www.php100.com/manual/jquery/，中有一个叫做“插件机制”：

jQuery.fn.extend(object)

jQuery.extend(object)

2、jQuery.extend(object)

html代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige</title></head><body>    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>    <!--这里必须优先导入jQuery原生的js，在导入扩展的jQuery-->    <script type="text/javascript" src="extends.js"></script>    <script>        console.log($.luotianshuai())    </script></body></html>

jQuery代码如下：

/** * Created by luotim on 16/2/28. *///扩展使用自执行函数来写,逼格比较高点(function (arg) {    arg.extend({        'luotianshuai':function (){            return 123;        },        'login':function(){}  //他的代码是以字典形式存储的扩展jQuery    })})(jQuery);//jQuery为传进去的函数他的方程式:(function (arg) {})();第一个括号为函数,第二个括号内存储参数

3、jQuery.fn.extend(object)

jQuery.fn.extend(object) 这个方法和jQuery.extend(object)的区别就是，jQuery.fn.extend(object)可以传入搜索参数

jQuery.fn.extend({  check: function() {    return this.each(function() { this.checked = true; });  },  uncheck: function() {    return this.each(function() { this.checked = false; });  }});

结果：

$("input[type=checkbox]").check();$("input[type=radio]").uncheck();

4、form表单验证（下面的两个例子基本上功能就够用了）

看下面的jQuery代码和html代码

/** * Created by luo_t on 3/2/2016. */(function(jq){    function ErrorMessage(container,msg){        $error = container.find("label[class='input-error']");        if($error.length>0){            $error.text(msg);        }else{            var temp = "<label class='input-error'>"+msg+"</label>";            container.append(temp);        }    }    function EmptyError(container){        $error = container.find("label[class='input-error']");        if($error.length>0){            $error.remove();        }    }    jq.extend({        'register':function(form,summaryStatusId){            $(form).find(':submit').click(function(){                var flag = true;                $(form).find(':text,:password').each(function(){                    var name = $(this).attr('name');                    var label = $(this).attr('label');                    var val = $(this).val();                    var $parent = $(this).parent();                    //<label class='input-error'>用户名长度只能在4-20位字符之间</label>                    //<label class='input-error'>用户名只能由中文、英文、数字及"-"、"_"组成</label>                    var required = $(this).attr('require');                    if(required){                        if(!val || val.trim() == ''){                            flag = false;                            ErrorMessage($parent,label+'不能为空.');                            return false;                        }                    }                    var confirm_to = $(this).attr('confirm-to');                    if(confirm_to){                        var $original = $(form).find("input[name='"+confirm_to+"']");                        if($original.val().trim()!=val.trim()){                            flag = false;                            ErrorMessage($parent,'两次密码输入不一致.');                            return false;                        }                    }                    var number = $(this).attr('number');                    if(number){                        if(!$.isNumeric(number)){                            flag = false;                            ErrorMessage($parent,label+'必须为数字.');                            return false;                        }                    }                    var mobile = $(this).attr('mobile');                    if(mobile){                        var reg = /^1[3|5|8]\d{9}$/;                        if(!reg.test(val)){                            flag = false;                            ErrorMessage($parent,label+'格式错误.');                            return false;                        }                    }                    var min = $(this).attr('min-len');                    if(min){                        var len = parseInt(min)                        if(val.length<len){                            flag = false;                            ErrorMessage($parent,label+'最小长度为'+min+'.');                            return false;                        }                    }                    var max = $(this).attr('max-len');                    if(max){                        var len = parseInt(max)                        if(val.length>len){                            flag = false;                            ErrorMessage($parent,label+'最大长度为'+max+'.');                            return false;                        }                    }                    var range = $(this).attr('range');                    if(range){                        var len = range.split('-');                        if(val.length<parseInt(len[0])||val.length>parseInt(len[1])){                            flag = false;                            ErrorMessage($parent,label+'长度只能在'+len[0]+'-'+len[1]+'位字符之间.');                            return false;                        }                    }                    var field = $(this).attr('Field');                    if(field=='string'){                        var reg = /^\w+$/;                        if(!reg.test(val)){                            flag = false;                            ErrorMessage($parent,label+'只能由英文、数字及"_"组成.');                            return false;                        }                    }                    EmptyError($parent);                });                var check = $("#protocol").prop('checked');                if(!check){                    flag = false;                    try{                        ErrorMessage($("#protocol").parent().parent(),'请阅读用户注册协议.');                    }catch(e){                        flag = false;                    }                }else{                    EmptyError($("#protocol").parent().parent());                }                return flag;            });        },        'login':function(form,summaryStatusId){            $(form).find(':submit').click(function(){                var flag = true;                $(form).find(':text,:password').each(function(){                    var name = $(this).attr('name');                    var label = $(this).attr('label');                    var val = $(this).val();                    var $parent = $(this).parent();                    var required = $(this).attr('require');                    if(required){                        if(!val || val.trim() == ''){                            flag = false;                            ErrorMessage($parent,label+'不能为空.');                            return false;                        }                    }                    EmptyError($parent);                });                return flag;            });        }    });})(jQuery);

form_authentication_extend

<form id='Form' action='/account/login' method='POST'>                                        <div class='group mt10'>                        <label class='tip'><span class="red">*</span>用户名：</label>                        <input type='text' require='true' label='用户名' Field='string' range='4-40' name='username' />                        <i class='i-name'></i>                    </div>                                      <div class='group'>                        <label class='tip'><span class="red">*</span>密码：</label>                        <input  type='password' require='true'  label='密码' min-len='6' name='pwd' />                        <i class='i-pwd'></i>                    </div>                                       <div class='group'>                        <label class='tip'><span class="red">*</span>验证码：</label>                        <input  type='text' require='true' label='验证码' style='width:80px;' name='checkcode' />                        <a style='width:125px;display:inline-block;'><img class='checkcode' onclick='ChangeCode();' id='imgCode' src='/account/check' /></a>                    </div>                    <div class='group font12 mb0'>                        <label class='tip'></label>                        <label style='width:246px;display: inline-block;'>                            <input id='protocol' name='protocol' type='checkbox' checked='checked' />                            <span>自动登录</span>                            <span class='ml10'><a href='#'>忘记密码？</a></span>                        </label>                    </div>                    <div class='group mt0'>                        <label class='tip'></label>                        <input type='submit' class='submit' value='登    录' />                    </div>                </form>

login_form_html

                        <form id='Form' method='POST' action='/account/register'>                            <div class='group'>                                <label class='tip'><span class="red">*</span>用户名：</label>                                <input type='text' require='true' label='用户名' Field='string' range='4-40' name='username' />                                <i class='i-name'></i>                                                            </div>                            <div class='group'>                                <label class='tip'><span class="red">*</span>手机号：</label>                                <input  type='text' require='true' label='手机号' mobile='true' name='telphone' />                                <i class='i-phone'></i>                            </div>                            <div class='group'>                                <label class='tip'><span class="red">*</span>登录密码：</label>                                <input  type='password' require='true'  label='登录密码' min-len='6' name='pwd' />                                <i class='i-pwd'></i>                            </div>                            <div class='group'>                                <label class='tip'><span class="red">*</span>确认密码：</label>                                <input  type='password' require='true' label='确认密码' confirm-to='pwd' name='confirmpwd' />                                <i class='i-pwd'></i>                            </div>                            <div class='group'>                                <label class='tip'><span class="red">*</span>验证码：</label>                                <input  type='text' require='true' label='验证码' style='width:80px;' name='checkcode' />                                <a style='width:125px;display:inline-block;'><img class='checkcode' onclick='ChangeCode();' id='imgCode' src='/account/check' /></a>                            </div>                            <div class='group font12'>                                <label class='tip'></label>                                <label style='width:246px;display: inline-block;'>                                    <input id='protocol' name='protocol' type='checkbox' checked='checked' /><span>我已阅读并同意<a href='#'>《用户注册协议》</a></span>                                </label>                            </div>                                                        <div class='group'>                                <label class='tip'></label>                                <input type='submit' class='submit' value='同意以上协议并注册' />                            </div>                        </form>

register_form_html

还有两个比较不错的扩展连接：

-- parsleyjs    http://parsleyjs.org/-- jQuery Validate    http://jqueryvalidation.org/如果是简单功能自己写就行了，毕竟链接里的东西，比较多简单功能咱们自己实现即可。

插件

1、页面顶部的浏览窗口点击切换图片，如下图

连接地址：http://bxslider.com/

1.1、首先要说的还是目录结构

1.2、下载插件

1.3、应用插件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige</title>    <!--引入第三方的css-->    <link href="extend_plugin-in/jquery.bxslider/jquery.bxslider.css" rel="stylesheet"></head><body>        <!--按照要求的格式书写-->        <ul class="bxslider">            <li><img src="images/image_1.jpg" /></li>          <li><img src="images/image_2.jpg" /></li>          <li><img src="images/image_3.jpg" /></li>        </ul>        <!--导入js文件-->    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>        <!--然后在导入插件内的js文件-->    <script type="text/javascript" src="extend_plugin-in/jquery.bxslider/jquery.bxslider.min.js"></script>    <script>        $(document).ready(function(){ //当整个页面加载完成执行的函数          $('.bxslider').bxSlider();        });    </script></body></html>

1.4根据自己的需求修改他的样式和图片

BootStrap框架

1、BootStrap介绍

说BootStrap其实他是一个类库，定了一些js方法和css

网页编程：http://v3.bootcss.com/getting-started/ （从起步开始一步一步学）

Bootstrap 是一个用于构建响应式网站的前端框架。无论你想构建应用程序、博客还是 CMS 网站,Bootstrap 都完美适用,只要你想得到, 它都能行。

Bootstrap 把 HTML、CSS 和 JavaScript 组合起来,为构建稳定的网站提供了基础设施,也能提高开发效率。

基于默认的网格系统,布局变成了小菜一碟,按钮、导航和表格也都活脱脱地赏心悦目。十几个 JavaScript 插件更为我们赋予网站交互能力提供了强大保障。

响应式布局：根据用户设备的不同，进行相应的布局！（根据浏览器的宽度设置）

Bootstrap 是 Mark Otto 和 Jacob Thornton 共同开发的一个开源框架。最初发布 Bootstrap 的时候,他们两位都在 Twitter 工作。当时,他们面临着为公司内部提供一套标准化的前端开发工具的需求。在发布 Bootstrap 的那篇博客中,Mark Otto 这样介绍他们的新项目:
Twitter诞生初期,为了完成前端开发任务,工程师们几乎尝试了自己熟悉的所有库。应用之间的不一致性导致它们难以扩展和维护。Bootstrap最初就是这个问题的一个解决方案,而且在Twitter内部第一次Hackweek上得到了认可。Hackweek结束后,我们手头上的项目已经相当稳定,可以在公司内部部署使用了。
--Mark Otto
https://dev.twitter.com
Bootstrap 是 2011 年 8 月发布的,发布之后就迅速走红。而且,它也从最初 CSS 驱动的项目,发展到内置了很多 JavaScript 插件和图标, 并且涵盖了表单和按钮元素。Bootstrap 本身支持响应式 Web 设计, 而且拥有一个非常稳健的 12 列、940 像素宽的网格布局系统。值得一提的是,Bootstrap 网站(http://getbootstrap.com)上还提供了一个构建工具,让你根据自己的需求选择 CSS 和 JavaScript 功能。所有这一切让前端 Web 开发有了前瞻性的设计和开发基础,开发效率倍增。上手使用 Bootstrap 非常简单,跟在网站中整合 CSS 和 JavaScript 没有什么区别。

2、文件结构

bootstrap2
    ├── css
    │   ├── bootstrap-responsive.css //不使用响应式布局
    │   ├── bootstrap-responsive.min.css //不使用响应式布局
    │   ├── bootstrap.css
    │   └── bootstrap.min.css
    ├── img
    │   ├── glyphicons-halflings-white.png //大图通过“扣洞移动照片”的方式来显示图标
    │   └── glyphicons-halflings.png //大图通过“扣洞移动照片”的方式来显示图标
    └── js
        ├── bootstrap.js
        └── bootstrap.min.js

bootstrap3
    ├── css
    │   ├── bootstrap-theme.css //主题类型，生产上一般用不到
    │   ├── bootstrap-theme.css.map //主题类型，生产上一般用不到
    │   ├── bootstrap-theme.min.css //主题类型，生产上一般用不到
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map //做映射的，可以理解为 shuaige = “luotianshuai” 那么掉shuaige的时候就相当于掉luotianshuai
    │   └── bootstrap.min.css
    ├── fonts //包含了字体图标文件，他也是做的对应。下面的文件包含了不同系统下的字体图标
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   └── glyphicons-halflings-regular.woff2
    └── js
        ├── bootstrap.js
        ├── bootstrap.min.js

"""eot、svg、ttf、woff、woff2    @font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。    而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。    eot  EOT– Embedded Open Type         EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。    SVG Scalable Vector Graphics        SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。    ttf TrueType        Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。    woff WOFF–WebOpen Font Format        WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。"""

3、HTML样板（根据自己需求修改）

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <!--指定告诉ID用高版本的解析-->    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title>Shuaige</title>    <!-- Bootstrap -->    <link href="extend_plugin-in_bootstrap/css/bootstrap.min.css" rel="stylesheet">  </head>  <body>    <h1>你好，世界！</h1>    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    <script src="js/jquery-1.8.2.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="extend_plugin-in_bootstrap/js/bootstrap.min.js"></script>  </body></html>

"""<meta charset="utf-8">    编码<meta http-equiv="X-UA-Compatible" content="IE=edge">    Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最高级别的可用模式渲染显示内容<meta name="viewport" content="width=device-width, initial-scale=1">    为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。    在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。　　 注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！<meta name="renderer" content="webkit">    国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。　　 幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了,目前只有360浏览器支持此 <meta> 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代！"""

4、实际操作

一定要一步一步的去看bootstrap官方文档，然后查看效果。

这里要说几点自己遇到的问题：

　　4.1、首先bootstrap是个插件要活用

　　4.2、整体的框架和布局需要咱们自己来写，就是顶部、中心、左侧、右侧的框体，咱们在向里面填充东西就好

　　4.3、多做

阅读全文

0 0