qq_32506555

Bootstrap表单布局详解

Bootstrap表单时我们前端必学的内容，所以我给大家写了一个关于表单的Bootstrap学习教程：

在Bootstrap 提供了下列类型的表单布局：

垂直表单（默认） -> 这个不好看，都是手机版了，PC版占一排不好看；

内联表单 -> 我相信这个才是你想要的，PC版响应横排，手机版响应竖排。

水平表单 -> 用栅格系统控制显示

一、垂直表单

垂直表单使用的标准步骤

元素添加 role="form"。

把标签和控件放在一个带有"form-group"的

中，获取最佳间距。

向所有的文本元素、 <span style="font-family:'宋体';">和 </span><select> <span style="font-family:'宋体';">添加</span>"form-control"<span style="font-family:'宋体';">样式。</span></span></p> <table width="543" style="border-collapse:collapse;border-spacing:0px;color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <tbody> <tr> <td valign="top" width="35" style="border:1px solid rgb(192,192,192);"> <p> <span style="font-family:Calibri;">1</span></p> <p> <span style="font-family:Calibri;">2</span></p> <p> <span style="font-family:Calibri;">3</span></p> <p> <span style="font-family:Calibri;">4</span></p> <p> <span style="font-family:Calibri;">5</span></p> <p> <span style="font-family:Calibri;">6</span></p> <p> <span style="font-family:Calibri;">7</span></p> <p> <span style="font-family:Calibri;">8</span></p> <p> <span style="font-family:Calibri;">9</span></p> <p> <span style="font-family:Calibri;">10</span></p> </td> <td valign="top" width="508" style="border-bottom-color:rgb(192,192,192);border-bottom-width:1px;border-right-color:rgb(192,192,192);border-right-width:1px;border-style:solid solid solid none;border-top-color:rgb(192,192,192);border-top-width:1px;"> <p> <span style="font-family:Calibri;"><form role="form"></span></p> <p> <span style="font-family:Calibri;"> <div class="form-group"></span></p> <p> <span style="font-family:Calibri;"> <label for="name"><span style="font-family:'宋体';">名称</span></label></span></p> <p> <span style="font-family:Calibri;"> <input type="text" id="name" placeholder="<span style="font-family:'宋体';">请输入名称</span>"></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="form-group"></span></p> <p> <span style="font-family:Calibri;"> <label for="name"><span style="font-family:'宋体';">年龄</span></label></span></p> <p> <span style="font-family:Calibri;"> <input type="text" id="name" placeholder="<span style="font-family:'宋体';">请输入年龄</span>"></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"></form></span></p> </td> </tr> </tbody> </table> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <strong><span style="font-family:Calibri;">二、内联布局</span></strong></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">内联布局与垂直布局其他完全一样，只是需要给<form role="form"><span style="font-family:'宋体';">加个</span>class=form-inline<span style="font-family:'宋体';">。</span></span></p> <table width="540" style="border-collapse:collapse;border-spacing:0px;color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <tbody> <tr> <td valign="top" width="35" style="border:1px solid rgb(192,192,192);"> <p> <span style="font-family:Calibri;">1</span></p> </td> <td valign="top" width="505" style="border-bottom-color:rgb(192,192,192);border-bottom-width:1px;border-right-color:rgb(192,192,192);border-right-width:1px;border-style:solid solid solid none;border-top-color:rgb(192,192,192);border-top-width:1px;"> <p> <span style="font-family:Calibri;"><form role="form"></span></p> </td> </tr> </tbody> </table> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">使用这样的内联布局之后，就是大屏幕横排显示，小屏幕垂直显示。</span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">小屏幕：</span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> </p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">大屏幕：</span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> </p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <strong><span style="font-family:Calibri;">三、水平表单</span></strong></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">水平表单指的是Label<span style="font-family:'宋体';">标签与控件</span>(input<span style="font-family:'宋体';">、</span>button)<span style="font-family:'宋体';">之间的水平。</span></span><span style="font-family:Calibri;"><br style="font-size:12px;"></span><span style="font-family:Calibri;">其使用步骤如下：</span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">向父 <form> <span style="font-family:'宋体';">元素添加 </span>class .form-horizontal<span style="font-family:'宋体';">。</span></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">把标签和控件放在一个带有 class .form-group <span style="font-family:'宋体';">的 </span><div> <span style="font-family:'宋体';">中。</span></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">向标签添加 class .control-label<span style="font-family:'宋体';">。</span></span></p> <table width="553" style="border-collapse:collapse;border-spacing:0px;color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <tbody> <tr> <td valign="top" width="35" style="border:1px solid rgb(192,192,192);"> <p> <span style="font-family:Calibri;">1</span></p> <p> <span style="font-family:Calibri;">2</span></p> <p> <span style="font-family:Calibri;">3</span></p> <p> <span style="font-family:Calibri;">4</span></p> <p> <span style="font-family:Calibri;">5</span></p> <p> <span style="font-family:Calibri;">6</span></p> <p> <span style="font-family:Calibri;">7</span></p> <p> <span style="font-family:Calibri;">8</span></p> <p> <span style="font-family:Calibri;">9</span></p> <p> <span style="font-family:Calibri;">10</span></p> <p> <span style="font-family:Calibri;">11</span></p> <p> <span style="font-family:Calibri;">12</span></p> <p> <span style="font-family:Calibri;">13</span></p> </td> <td valign="top" width="518" style="border-bottom-color:rgb(192,192,192);border-bottom-width:1px;border-right-color:rgb(192,192,192);border-right-width:1px;border-style:solid solid solid none;border-top-color:rgb(192,192,192);border-top-width:1px;"> <p> <span style="font-family:Calibri;"><form role="form"></span></p> <p> <span style="font-family:Calibri;"> <div class="form-group"></span></p> <p> <span style="font-family:Calibri;"> <label for="name" class="control-label col-sm-2"><span style="font-family:'宋体';">名称</span></label></span></p> <p> <span style="font-family:Calibri;"> <div class="col-sm-10"></span></p> <p> <span style="font-family:Calibri;"> <input type="text" id="name" placeholder="<span style="font-family:'宋体';">请输入名称</span>"></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="form-group"></span></p> <p> <span style="font-family:Calibri;"> <label for="name" class="control-label col-sm-2"><span style="font-family:'宋体';">年龄</span></label></span></p> <p> <span style="font-family:Calibri;"> <div class="col-sm-10"></span></p> <p> <span style="font-family:Calibri;"> <input type="text" class="form-control col-sm-10" id="name" placeholder="<span style="font-family:'宋体';">请输入年龄</span>"></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"></form></span></p> </td> </tr> </tbody> </table> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">使用了form-horizontal<span style="font-family:'宋体';">之后，才能给</span>input<span style="font-family:'宋体';">控件套</span>div<span style="font-family:'宋体';">，并且</span>div<span style="font-family:'宋体';">也能够使用网格系统了。</span>form-horizontal<span style="font-family:'宋体';">样式改变了</span>.form-group<span style="font-family:'宋体';">的行为，将其表现得像栅格中的行（</span>row<span style="font-family:'宋体';">）一样。</span></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <strong><span style="font-family:Calibri;">四、复选框Checkbox<span style="font-family:'宋体';">和单选框</span>Radio</span></strong></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">这两个控件在Bootstrap<span style="font-family:'宋体';">里面比较特殊，有时候需要横排，有时候需要竖排。</span></span><span style="font-family:Calibri;"><br style="font-size:12px;"></span><span style="font-family:Calibri;">它也跟form<span style="font-family:'宋体';">一样，也是有内联的。</span></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">如果需要内联显示，则设置其外层包围的label<span style="font-family:'宋体';">的</span>class<span style="font-family:'宋体';">为</span>checkbox-inline<span style="font-family:'宋体';">。</span></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">如果需要默认的竖排显示，则设置外层包围的label<span style="font-family:'宋体';">的</span>class<span style="font-family:'宋体';">为</span>heckbox<span style="font-family:'宋体';">。</span></span></p> <table width="562" style="border-collapse:collapse;border-spacing:0px;color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <tbody> <tr> <td valign="top" width="35" style="border:1px solid rgb(192,192,192);"> <p> <span style="font-family:Calibri;">1</span></p> <p> <span style="font-family:Calibri;">2</span></p> <p> <span style="font-family:Calibri;">3</span></p> <p> <span style="font-family:Calibri;">4</span></p> <p> <span style="font-family:Calibri;">5</span></p> <p> <span style="font-family:Calibri;">6</span></p> <p> <span style="font-family:Calibri;">7</span></p> <p> <span style="font-family:Calibri;">8</span></p> <p> <span style="font-family:Calibri;">9</span></p> <p> <span style="font-family:Calibri;">10</span></p> <p> <span style="font-family:Calibri;">11</span></p> <p> <span style="font-family:Calibri;">12</span></p> <p> <span style="font-family:Calibri;">13</span></p> <p> <span style="font-family:Calibri;">14</span></p> <p> <span style="font-family:Calibri;">15</span></p> <p> <span style="font-family:Calibri;">16</span></p> <p> <span style="font-family:Calibri;">17</span></p> <p> <span style="font-family:Calibri;">18</span></p> <p> <span style="font-family:Calibri;">19</span></p> <p> <span style="font-family:Calibri;">20</span></p> <p> <span style="font-family:Calibri;">21</span></p> <p> <span style="font-family:Calibri;">22</span></p> <p> <span style="font-family:Calibri;">23</span></p> <p> <span style="font-family:Calibri;">24</span></p> <p> <span style="font-family:Calibri;">25</span></p> <p> <span style="font-family:Calibri;">26</span></p> <p> <span style="font-family:Calibri;">27</span></p> <p> <span style="font-family:Calibri;">28</span></p> <p> <span style="font-family:Calibri;">29</span></p> <p> <span style="font-family:Calibri;">30</span></p> <p> <span style="font-family:Calibri;">31</span></p> <p> <span style="font-family:Calibri;">32</span></p> <p> <span style="font-family:Calibri;">33</span></p> <p> <span style="font-family:Calibri;">34</span></p> <p> <span style="font-family:Calibri;">35</span></p> <p> <span style="font-family:Calibri;">36</span></p> <p> <span style="font-family:Calibri;">37</span></p> <p> <span style="font-family:Calibri;">38</span></p> <p> <span style="font-family:Calibri;">39</span></p> <p> <span style="font-family:Calibri;">40</span></p> <p> <span style="font-family:Calibri;">41</span></p> <p> <span style="font-family:Calibri;">42</span></p> <p> <span style="font-family:Calibri;">43</span></p> <p> <span style="font-family:Calibri;">44</span></p> <p> <span style="font-family:Calibri;">45</span></p> </td> <td valign="top" width="527" style="border-bottom-color:rgb(192,192,192);border-bottom-width:1px;border-right-color:rgb(192,192,192);border-right-width:1px;border-style:solid solid solid none;border-top-color:rgb(192,192,192);border-top-width:1px;"> <p> <span style="font-family:Calibri;"><form role="form"></span></p> <p> <span style="font-family:Calibri;"> </span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox"></span></p> <p> <span style="font-family:Calibri;"> <label><input type="checkbox" value=""><span style="font-family:'宋体';">香蕉</span></label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox"></span></p> <p> <span style="font-family:Calibri;"> <label><input type="checkbox" value=""><span style="font-family:'宋体';">苹果</span></label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox"></span></p> <p> <span style="font-family:Calibri;"> <label><input type="checkbox" value=""><span style="font-family:'宋体';">西瓜</span></label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> </span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox-inline"></span></p> <p> <span style="font-family:Calibri;"> <label><input type="checkbox" value=""><span style="font-family:'宋体';">香蕉</span></label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox-inline"></span></p> <p> <span style="font-family:Calibri;"> <label><input type="checkbox" value=""><span style="font-family:'宋体';">苹果</span></label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox-inline"></span></p> <p> <span style="font-family:Calibri;"> <label><input type="checkbox" value=""><span style="font-family:'宋体';">西瓜</span></label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> </span></p> <p> <span style="font-family:Calibri;"> </span></p> <p> <span style="font-family:Calibri;"> <div class="radio"></span></p> <p> <span style="font-family:Calibri;"> <label></span></p> <p> <span style="font-family:Calibri;"> <input type="radio" name="optionsRadios" value="option1" checked> <span style="font-family:'宋体';">男</span></span></p> <p> <span style="font-family:Calibri;"> </label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="radio"></span></p> <p> <span style="font-family:Calibri;"> <label></span></p> <p> <span style="font-family:Calibri;"> <input type="radio" name="optionsRadios" value="option2" checked> <span style="font-family:'宋体';">女</span></span></p> <p> <span style="font-family:Calibri;"> </label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> </span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox-inline"></span></p> <p> <span style="font-family:Calibri;"> <label></span></p> <p> <span style="font-family:Calibri;"> <input type="radio" name="optionsRadios" value="option1" checked> <span style="font-family:'宋体';">男</span></span></p> <p> <span style="font-family:Calibri;"> </label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"> <div class="checkbox-inline"></span></p> <p> <span style="font-family:Calibri;"> <label></span></p> <p> <span style="font-family:Calibri;"> <input type="radio" name="optionsRadios" value="option2" checked> <span style="font-family:'宋体';">女</span></span></p> <p> <span style="font-family:Calibri;"> </label></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"></form></span></p> </td> </tr> </tbody> </table> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">其显示效果如下：</span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> </p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <strong><span style="font-family:Calibri;">五、静态控件</span></strong></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">静态控件指的是那些不能够改变值的控件，在bootstrap<span style="font-family:'宋体';">中，当您需要在一个水平表单内的表单标签后放置纯文本时，请在 </span><p> <span style="font-family:'宋体';">上使用</span>class="form-control-static"<span style="font-family:'宋体';">。</span></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> </span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> <form role="form"></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> <div></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> <label class="col-sm-1 control-label"><span style="font-family:'宋体';">名称</span></label></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> <div></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> <p><span style="font-family:'宋体';">刘玄德</span></p></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> </div></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> </div></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> </form></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"> </span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">显示效果如下：</span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> </p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <strong><span style="font-family:Calibri;">六、表单帮助文本</span></strong></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">Bootstrap<span style="font-family:'宋体';">表单帮助文本一般指的是输入录入的提示，通常在</span>input<span style="font-family:'宋体';">后面跟个</span>.help-block<span style="font-family:'宋体';">的</span>HTML<span style="font-family:'宋体';">元素就可以了。</span></span></p> <table width="559" style="border-collapse:collapse;border-spacing:0px;color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <tbody> <tr> <td valign="top" width="35" style="border:1px solid rgb(192,192,192);"> <p> <span style="font-family:Calibri;">1</span></p> <p> <span style="font-family:Calibri;">2</span></p> <p> <span style="font-family:Calibri;">3</span></p> <p> <span style="font-family:Calibri;">4</span></p> <p> <span style="font-family:Calibri;">5</span></p> <p> <span style="font-family:Calibri;">6</span></p> <p> <span style="font-family:Calibri;">7</span></p> <p> <span style="font-family:Calibri;">8</span></p> </td> <td valign="top" width="524" style="border-bottom-color:rgb(192,192,192);border-bottom-width:1px;border-right-color:rgb(192,192,192);border-right-width:1px;border-style:solid solid solid none;border-top-color:rgb(192,192,192);border-top-width:1px;"> <p> <span style="font-family:Calibri;"><form role="form"></span></p> <p> <span style="font-family:Calibri;"> <div class="form-group"></span></p> <p> <span style="font-family:Calibri;"> <input class="form-control" type="text" ></span></p> <p> <span style="font-family:Calibri;"> <span class="help-block"></span></p> <p> <span style="font-family:Calibri;"> <span style="font-family:'宋体';">特别提醒，如果你没有什么，就不要输入了。</span></span></p> <p> <span style="font-family:Calibri;"> </span></span></p> <p> <span style="font-family:Calibri;"> </div></span></p> <p> <span style="font-family:Calibri;"></form></span></p> </td> </tr> </tbody> </table> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">显示效果如下：</span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;"></span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:Calibri;">除了这些之外，Bootstrap<span style="font-family:'宋体';">还有很多用来控制</span>input<span style="font-family:'宋体';">高度啊，输入是否成功啊等等的一些列样式，这些只要查一下，找到相应的关键字就能够用，以后遇到奇葩的再记录。</span> </span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:'宋体';"> </span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:'宋体';"> </span></p> <p style="color:rgb(51,51,51);font-family:'宋体', Arial, Helvetica, sans-serif;font-size:14px;line-height:23.3333px;"> <span style="font-family:'宋体';">原文来自：博客园</span></p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1283522963345260544"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Bootstrap表单布局详解)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1883993378367008768.htm" title="无人机低成本集群技术实现详解" target="_blank">无人机低成本集群技术实现详解</a> <span class="text-muted">无人机技术圈</span> <a class="tag" taget="_blank" href="/search/%E6%97%A0%E4%BA%BA%E6%9C%BA%E6%8A%80%E6%9C%AF/1.htm">无人机技术</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E4%BA%BA%E6%9C%BA/1.htm">无人机</a> <div>在现代科技的迅猛发展中，无人机技术已广泛应用于军事侦察、环境监测、农业植保、物流配送等多个领域。其中，无人机集群技术作为提高任务效率、降低成本的重要手段，正受到越来越多的关注。本项目旨在研发一套低成本无人机集群系统，通过优化关键技术、设计合理的无人机平台、实现高效的集群编队与协同，以及智能化的自主控制，达到提升任务执行效率、降低总体成本的目标。具体目标包括：开发出高性价比的无人机单体、实现灵活的集</div> </li> <li><a href="/article/1883993378866130944.htm" title="光纤FPV无人机技术详解" target="_blank">光纤FPV无人机技术详解</a> <span class="text-muted">无人机技术圈</span> <a class="tag" taget="_blank" href="/search/%E6%97%A0%E4%BA%BA%E6%9C%BA%E6%8A%80%E6%9C%AF/1.htm">无人机技术</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E4%BA%BA%E6%9C%BA/1.htm">无人机</a> <div>1.技术基础与原理光纤FPV（FirstPersonView，第一人称视角）无人机技术，是将光纤通信技术与无人机技术相结合的一项创新技术。该技术通过光纤作为高速、低延迟的数据传输媒介，实现了无人机拍摄的高清视频信号实时回传至地面控制站，为飞行员提供身临其境的飞行体验。光纤传输以其超大带宽、超强抗干扰性和极低延迟的特性，极大地提升了FPV无人机的性能和应用范围。1、无人机类型：电动多旋翼；1、最大飞</div> </li> <li><a href="/article/1883991361988915200.htm" title="hive视图与物化视图使用详解" target="_blank">hive视图与物化视图使用详解</a> <span class="text-muted">达达玲玲</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>Hive视图和物化视图都是在数据仓库中处理数据的概念。下面对Hive视图和物化视图进行详细解释：Hive视图：1.Hive视图是一个逻辑表，它是对基础表的查询结果的引用，被视为一个新表。2.视图可以简化复杂查询，隐藏复杂的逻辑，并将查询重用。3.视图不存储数据，而是在查询时动态地返回结果。4.视图可以基于单个表或多个表创建，也可以对其他视图创建。Hive视图的使用方式：1.创建视图：```sqlC</div> </li> <li><a href="/article/1883987959842140160.htm" title="无人机+固定机巢，空地协同作业技术详解" target="_blank">无人机+固定机巢，空地协同作业技术详解</a> <span class="text-muted">无人机技术圈</span> <a class="tag" taget="_blank" href="/search/%E6%97%A0%E4%BA%BA%E6%9C%BA%E6%8A%80%E6%9C%AF/1.htm">无人机技术</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E4%BA%BA%E6%9C%BA/1.htm">无人机</a> <div>无人机与固定机巢结合的空地协同作业技术是现代无人机应用领域的一项重要创新，它结合了无人机的灵活性和固定机巢的保障性，实现了空地一体化的高效作业。以下是对该技术的详细解析：一、技术概述无人机与固定机巢结合的空地协同作业技术，主要是通过无人机搭载各种传感器和任务载荷，在固定机巢的支持下进行起飞、巡逻、监测、数据采集等任务，并通过高速通信技术将数据传输至地面控制站，实现信息的实时共享和协同决策。固定机巢</div> </li> <li><a href="/article/1883983545890828288.htm" title="python模块之psutil详解_基于python调用psutil模块过程解析" target="_blank">python模块之psutil详解_基于python调用psutil模块过程解析</a> <span class="text-muted">谢艺馨</span> <div>这篇文章主要介绍了基于python调用psutils模块过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下用Python来编写脚本简化日常的运维工作是Python的一个重要用途。在Linux下，有许多系统命令可以让我们时刻监控系统运行的状态，如ps，top，free等等。要获取这些系统信息，Python可以通过subprocess模块调用并获</div> </li> <li><a href="/article/1883981901996290048.htm" title="软件测试学习路线" target="_blank">软件测试学习路线</a> <span class="text-muted">IT菇凉</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a> <div>软件测试学习路线1.软件测试基础知识内容软件测试职业以及发展定位软件测试的概述&原则软件测试的策略及详细讲解软件测试的生命周期软件测试工作流程软件需求分析制作详解软件测试计划的编写软件测试用例的常用方法–等价类，边界值软件测试用例的常用方法–因果图，判定表测试用例的常用方法–状态迁移图;场景法软件测试环境准备&团队组织架构&职责划分bug编写规范，教你写出不low的缺陷bug的流转与状态处理缺陷编</div> </li> <li><a href="/article/1883974338407886848.htm" title="struts2" target="_blank">struts2</a> <span class="text-muted">工布之者</span> <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>s2的工作原理（图解）详解Struts2的工作原理上图来源于Struts2官方站点，是Struts2的整体结构。一个请求在Struts2框架中的处理大概分为以下几个步骤1客户端初始化一个指向Servlet容器（例如Tomcat）的请求2这个请求经过一系列的过滤器（Filter）（这些过滤器中有一个叫做ActionContextCleanUp的可选过滤器，这个过滤器对于Struts2和其他框架的集成</div> </li> <li><a href="/article/1883974212129976320.htm" title="fixture测试夹具是什么？在pytest中有何作用？" target="_blank">fixture测试夹具是什么？在pytest中有何作用？</a> <span class="text-muted">爱软测的小凡</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pytest/1.htm">pytest</a> <div>前言大家晚上好呀，今天呢来和大家唠唠pytest中的fixtures夹具的详解，废话就不多说了咱们直接进入主题哈。一、fixture的优势pytest框架的fixture测试夹具就相当于unittest框架的setup、teardown，但相对之下它的功能更加强大和灵活。命名方式灵活，不限于unittest的setup、teardown可以实现数据共享，多个模块跨文件共享前置后置可以实现多个模块跨</div> </li> <li><a href="/article/1883973706183667712.htm" title="struts2详解" target="_blank">struts2详解</a> <span class="text-muted">dyy_gusi</span> <a class="tag" taget="_blank" href="/search/webMVC/1.htm">webMVC</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>1.搭建struts2运行环境：1.1找到所需要的jar包struts2-core-xwork-core-ognl-freemarker-commons-logging-commons-fileupload-1.2编写struts2的配置文件*.jsp1.3在web.xml中加入struts2的启动配置struts2org.apache.struts2.dispatcher.ng.filter.S</div> </li> <li><a href="/article/1883973201780862976.htm" title="【软件测试】冒烟测试详解" target="_blank">【软件测试】冒烟测试详解</a> <span class="text-muted">测试杂货铺</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">自动化测试</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E5%8E%8B%E5%8A%9B%E6%B5%8B%E8%AF%95/1.htm">压力测试</a> <div>视频学习：文末有免费的配套视频可观看点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快冒烟测试介绍冒烟测试一词，来源于电路板测试：电路板拼接或组装完成后，进行通电测试，如果冒烟，则说明存在缺陷。而软件应用中，对其的定义为：在软件开发过程中的一种针对软件版本包的快速基本功能验证策略，是对软件基本功能进行确认验证的手段，并非深入测试。通过冒烟测试，可以快速判断提测软件包是否具有可测性，也可以</div> </li> <li><a href="/article/1883968156863623168.htm" title="Python标准库 subprocess 模块多进程编程详解" target="_blank">Python标准库 subprocess 模块多进程编程详解</a> <span class="text-muted">好像要长脑子了1</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.1基本功能subprocess模块，允许生成新的进程执行命令行指令，python程序，以及其它语言编写的应用程序,如java,c++,rust应用等。subprocess可连接多个进程的输入、输出、错误管道，并且获取它们的返回码。asyncio也支持subprocess.许多知名库都在使用此模块创建进程，以及做为跨语言粘合工具。典型如ansible,celery，selenium等。1.2与m</div> </li> <li><a href="/article/1883967147504365568.htm" title="「Py」模块篇之 Python中的subprocess模块详解" target="_blank">「Py」模块篇之 Python中的subprocess模块详解</a> <span class="text-muted">何曾参静谧</span> <a class="tag" taget="_blank" href="/search/%E3%80%8CPy%E3%80%8DPython%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">「Py」Python程序设计</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>✨博客主页何曾参静谧的博客（✅关注、点赞、⭐收藏、转发）全部专栏（专栏会有变化，以最新发布为准）「Win」Windows程序设计「IDE」集成开发环境「定制」定制开发集合「C/C++」C/C++程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」BlockUI集合「Py」Python程序设计「Math」探秘数学世界「PK」Paras</div> </li> <li><a href="/article/1883960465168592896.htm" title="JVM CMS垃圾收集器详解" target="_blank">JVM CMS垃圾收集器详解</a> <span class="text-muted">NewBird_jhone</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div>CMS定义和使用CMS（ConcurrentMarkSweep）垃圾收集器是一种以获取最短回收停顿时间为目标的收集器。它非常符合在注重用户体验的应用上使用。CMS垃圾收集器是一种基于“标记-清除”算法实现。在jdk8中使用CMS相关的核心参数：-XX:+UseConcMarkSweepGC：启用cms-XX:ConcGCThreads：并发的GC线程数-XX:+UseCMSCompactAtFul</div> </li> <li><a href="/article/1883954284144422912.htm" title="Typescript泛型详解解读" target="_blank">Typescript泛型详解解读</a> <span class="text-muted">黑码小帅</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%B7%B1%E6%80%BB%E7%BB%93/1.htm">自己总结</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>泛型:在定义函数、接口、类的时候不能预先确定要使用的数据的类型,而是在使用函数、接口、类的时候才能确定数据的类型普通方法示例：需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中(()=>{//需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中//定义一</div> </li> <li><a href="/article/1883946715149561856.htm" title="JVM垃圾回收器的原理和调优详解！" target="_blank">JVM垃圾回收器的原理和调优详解！</a> <span class="text-muted">喵手</span> <a class="tag" taget="_blank" href="/search/%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%AD%A6Java/1.htm">零基础学Java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div>全文目录：开篇语前言摘要概述垃圾回收器分类及原理1.Serial垃圾回收器2.Parallel垃圾回收器3.CMS垃圾回收器4.G1垃圾回收器源码解析示例代码使用案例分享案例1：Web服务的GC调优案例2：大数据任务的GC优化应用场景案例垃圾回收调优策略优缺点分析优点缺点核心类方法介绍测试用例小结总结文末开篇语哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/5</div> </li> <li><a href="/article/1883946587055517696.htm" title="Spring注解篇：@RequestParam详解！" target="_blank">Spring注解篇：@RequestParam详解！</a> <span class="text-muted">喵手</span> <a class="tag" taget="_blank" href="/search/Springboot/1.htm">Springboot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>全文目录：开篇语前言摘要概述源码解析使用案例分享应用场景案例优缺点分析核心类方法介绍测试用例测试用例分析使用场景优缺点分析测试用例小结总结文末开篇语哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。</div> </li> <li><a href="/article/1883943686472003584.htm" title="GD32F1系列同时使用多个GPIO外部中断" target="_blank">GD32F1系列同时使用多个GPIO外部中断</a> <span class="text-muted">weixin_42490907</span> <a class="tag" taget="_blank" href="/search/GD32/1.htm">GD32</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a> <div>关于GD32F1系列同时使用多个GPIO外部中断时的数据详解1、中断优先级分组和抢占优先级/响应优先级①优先级分组NVIC_PRIGROUP_PRE0_SUB4:0bit抢占优先级，4bit子优先级NVIC_PRIGROUP_PRE1_SUB3:1bit抢占优先级，3bit子优先级NVIC_PRIGROUP_PRE2_SUB2:2bit抢占优先级，2bit子优先级NVIC_PRIGROUP_PRE</div> </li> <li><a href="/article/1883943559615279104.htm" title="湿度传感器pcb遇到的问题" target="_blank">湿度传感器pcb遇到的问题</a> <span class="text-muted">司端杨</span> <div>画湿度传感器pcb遇到的问题：1.lora模块封装画反了。由于在布局时，使用快捷键X使被选中的器件左右对调，导致封装反了。重新调整lora模块部分布局。再画pcb时要注意快捷键X、Y的使用（X：被选中的器件左右对调；Y:被选中的器件上下对调）。2.去耦电容的位置摆放：几乎所有芯片的电源和地之间都会放置去耦电容，作用有两个，其一是滤除沿电源传导过来的高频干扰，其二是及时补充器件高速工作时所需的尖峰电</div> </li> <li><a href="/article/1883938643731607552.htm" title="TCP/IP 网络协议栈传输层详解" target="_blank">TCP/IP 网络协议栈传输层详解</a> <span class="text-muted">wespten</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE%E6%A0%88/1.htm">网络协议栈</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E8%AE%BE%E5%A4%87/1.htm">网络设备</a><a class="tag" taget="_blank" href="/search/5G/1.htm">5G</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7%E5%BC%80%E5%8F%91/1.htm">网络工具开发</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>传输层（TransportLayer）是OSI协议的第四层协议，是唯一负责总体的数据传输和数据控制传输层的一层协议。传输层提供端到端的交换数据机制，它不仅对会话层、表示层和应用层这高三层提供可靠的传输服务，还对网络层提供可靠的目的地站点信息。1、传输层概述网际层提供了主机之间的逻辑通道，即通过寻址的方式，把数据包从一个主机发到另一个主机上。如果一个主机有多个进程同时在使用网络连接，那么数据包到达主</div> </li> <li><a href="/article/1883932089225637888.htm" title="WebSocket 详解：全双工通信的实现与应用" target="_blank">WebSocket 详解：全双工通信的实现与应用</a> <span class="text-muted">Future_yzx</span> <a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>目录一、什么是WebSocket？（简介）二、为什么需要WebSocket？三、HTTP与WebSocket的区别WebSocket的劣势WebSocket的常见应用场景WebSocket握手过程WebSocket事件处理和生命周期一、什么是WebSocket？（简介）WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务器主动向客</div> </li> <li><a href="/article/1883923896504217600.htm" title="vue项目中所使用的element-UI / echarts" target="_blank">vue项目中所使用的element-UI / echarts</a> <span class="text-muted">Stephy_Yy</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%A0%94/1.htm">调研</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">vue学习笔记</a> <div>高清版思维导图见后台管理项目地址1.login登录页面表单在Form组件中，每一个表单域由一个Form-Item组件构成，表单域中可以放置各种类型的表单控件，包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePickerForm组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验</div> </li> <li><a href="/article/1883921750438244352.htm" title="表格组件二次封装（element+vue）" target="_blank">表格组件二次封装（element+vue）</a> <span class="text-muted">syste_m_</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>后端管理系统中，常用表格展示数据，统一维护，统一表格风格，二次封装一个基于elementUI中的el-table封装一个简单的表格组件。封装组件分为四部分，表单查询条件、头部操作按钮、表格数据展示、数据分页操作。一、表格组件封装1、表单查询条件封装表单项，定义name、label，表单项默认为输入框，scopedSlots为表单项插槽。//表单项queryForms:[{dataKey:'nick</div> </li> <li><a href="/article/1883921118360825856.htm" title="左右联动布局效果" target="_blank">左右联动布局效果</a> <span class="text-muted">qq_Girl200</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>效果图：{{item.title}}{{item}}-->基础信息组织信息教育与社会信息资产信息土地信息（7块，3.68亩）补贴信息补贴信息（7项）信用评价-->-->取消确认conststepList=ref([{title:'基础信息',id:'JCxx'},....{title:'资产信息',id:'ZCxx'},{title:'补贴信息',id:'BTxx'},{title:'信用评价',</div> </li> <li><a href="/article/1883909894290075648.htm" title="深入浅出讲解JavaWeb后端的三层架构：Controller、Service、DAO 以及详解结合MyBatis和XML映射的DAO层设计" target="_blank">深入浅出讲解JavaWeb后端的三层架构：Controller、Service、DAO 以及详解结合MyBatis和XML映射的DAO层设计</a> <span class="text-muted">给我吃茄子</span> <a class="tag" taget="_blank" href="/search/Java%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">Java后端开发</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E5%B1%82%E6%9E%B6%E6%9E%84/1.htm">三层架构</a><a class="tag" taget="_blank" href="/search/MyBatis/1.htm">MyBatis</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a> <div>目录1.控制层（Controller）(1)职责及作用(2)实现（3）总结2.服务层（Service）（1）职责与作用（2）实现（3）总结3.数据访问层（DAO）（1）职责及作用（2）实现（3）总结4.各层之间的关系5.三层架构的优势6.实际项目中的应用7.总结——三层架构1.MyBatis简介2.DAO层职责回顾3.DAO层结合MyBatis和XML映射的设计（1）项目结构（2）创建实体类（3）</div> </li> <li><a href="/article/1883897792313749504.htm" title="【Python】Python参数详解" target="_blank">【Python】Python参数详解</a> <span class="text-muted">EulerBlind</span> <a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80/1.htm">语言</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录Python参数种类Python参数定义不定参数接收限定传入参数方式具体示例位置参数示例关键词参数示例两种方法都支持的形式参数默认值（可选参数）参数默认值定义引用类型默认值异常行为参数类型声明参数类型定义申明函数返回值类型声明参数与装饰器Python参数种类总体来看，Python支持两种类型的方法参数，其类型分别为：位置参数（PositionalParameters）关键词参数（Keyword</div> </li> <li><a href="/article/1883888965371621376.htm" title="Unity-c#-协程" target="_blank">Unity-c#-协程</a> <span class="text-muted">BuHuaX</span> <a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E/1.htm">游戏引擎</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Unity协程（Coroutine）详解1.协程基础概念1.1什么是协程？协程是Unity中一种特殊的程序执行方式，它允许我们将一个长时间的操作分散到多个帧中执行，而不是在一帧内完成所有操作。可以将协程理解为一种"能够暂停执行"的函数。与普通函数相比，协程具有以下特点：可暂停性：可以在执行过程中暂停可以在特定条件下恢复执行不会阻塞主线程延时执行：可以等待指定时间后继续执行可以等待某个条件满足后继续</div> </li> <li><a href="/article/1883880403719221248.htm" title="详解AI采集框架Crawl4AI，打造智能网络爬虫" target="_blank">详解AI采集框架Crawl4AI，打造智能网络爬虫</a> <span class="text-muted">朝阳区靓仔_James</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">神经网络</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/prompt/1.htm">prompt</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a> <div>使用Crawl4AI构建高效AI爬虫与数据提取工具。1介绍Crawl4AI这个开源Python库，专门用来简化网页爬取和数据提取的工作。它不仅功能强大、灵活，而且全异步的设计让处理速度更快，稳定性更好。无论是构建AI项目还是提升语言模型的性能，Crawl4AI都能帮您简化工作流程。你可以直接在Python项目中使用，或者将其集成到RESTAPI中，实现快速、稳定的数据爬取和处理。这样，无论是数据的</div> </li> <li><a href="/article/1883879773579571200.htm" title="【Linux】Socket编程-TCP构建自己的C++服务器" target="_blank">【Linux】Socket编程-TCP构建自己的C++服务器</a> <span class="text-muted">Zfox_</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>个人主页：Zfox_系列专栏：Linux目录一：Socket编程TCPTCPsocketAPI详解多线程远程命令执行网络版计算器（应用层自定义协议与序列化）二：共勉一：Socket编程TCPTCPsocketAPI详解下面介绍程序中用到的socketAPI,这些函数都在sys/socket.h中socket#include#include//创建socket文件描述符(TCP/UDP,客户端+服务</div> </li> <li><a href="/article/1883876874753470464.htm" title="Android13源码下载和编译过程详解" target="_blank">Android13源码下载和编译过程详解</a> <span class="text-muted">龙之叶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>前言作为Android开发者人人都应该有一份自己Android源码,这样我们就可以随时对自己有疑惑的地方通过亲手调试来加强理解一源码下载1.1配置要求官方推荐配置请参考：AOSP使用入门文档，重点有如下几项：1.1.1硬件配置要求至少需要250GB可用磁盘空间；如果要进行构建，则还需要150GB。如果要进行多次构建，则需要更多空间。磁盘至少250GB，实测建议至少512G。1.1.2软件要求推荐使</div> </li> <li><a href="/article/1883873344089026560.htm" title="Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局" target="_blank">Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局</a> <span class="text-muted">LCG元</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>要使用Vue实现上传Word模板、打印并设置自定义样式和布局，可以借助一些工具和库来完成这个任务。实现步骤创建Vue项目：使用VueCLI创建一个新的Vue项目。安装依赖：安装docx-templates库来处理Word模板，file-saver库用于保存生成的Word文件。创建上传组件：在Vue组件中添加文件上传功能。处理Word模板：使用docx-templates库加载并处理Word模板。设</div> </li> <li><a href="/article/26.htm" title="设计模式介绍" target="_blank">设计模式介绍</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>设计模式来源于土木工程师克里斯托弗亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。亚历山大与萨拉-石川佳纯和穆雷西乐弗斯坦合作</div> </li> <li><a href="/article/153.htm" title="android高级组件使用(一)" target="_blank">android高级组件使用(一)</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/RatingBar/1.htm">RatingBar</a><a class="tag" taget="_blank" href="/search/Spinner/1.htm">Spinner</a> <div>1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。使用AutoCompleteTex</div> </li> <li><a href="/article/280.htm" title="[网络与通讯]路由器市场大有潜力可挖掘" target="_blank">[网络与通讯]路由器市场大有潜力可挖掘</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div> 如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题..... 这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入 &nbs</div> </li> <li><a href="/article/407.htm" title="自写简单Redis内存统计shell" target="_blank">自写简单Redis内存统计shell</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/Linux+shell/1.htm">Linux shell</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1Redis%E5%86%85%E5%AD%98/1.htm">统计Redis内存</a> <div>#!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem</div> </li> <li><a href="/article/534.htm" title="单例模式(饿汉 vs懒汉)" target="_blank">单例模式(饿汉 vs懒汉)</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva</div> </li> <li><a href="/article/661.htm" title="springMvc json支持" target="_blank">springMvc json支持</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/json+springmvc/1.htm">json springmvc</a> <div>1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() { </div> </li> <li><a href="/article/788.htm" title="android播放，掃描添加本地音頻文件" target="_blank">android播放，掃描添加本地音頻文件</a> <span class="text-muted">小桔子</span> <div> 最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，</div> </li> <li><a href="/article/915.htm" title="oracle常用命令" target="_blank">oracle常用命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dba/1.htm">dba</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">常用命令</a> <div>1 创建临时表空间 create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m autoextend on next 50m maxsize 20480m extent management local</div> </li> <li><a href="/article/1042.htm" title="25个Eclipse插件" target="_blank">25个Eclipse插件</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/eclipse%E6%8F%92%E4%BB%B6/1.htm">eclipse插件</a> <div>提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了</div> </li> <li><a href="/article/1169.htm" title="Spring MVC拦截器+注解方式实现防止表单重复提交" target="_blank">Spring MVC拦截器+注解方式实现防止表单重复提交</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。 1.新建注解： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </div> </li> <li><a href="/article/1296.htm" title="《Javascript高级程序设计(第3版)》闭包理解" target="_blank">《Javascript高级程序设计(第3版)》闭包理解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>“闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f</div> </li> <li><a href="/article/1423.htm" title="AngularJS Module类的方法" target="_blank">AngularJS Module类的方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Module/1.htm">Module</a> <div> AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。一.Main方法在哪里如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所</div> </li> <li><a href="/article/1550.htm" title="[Maven学习笔记七]Maven插件和目标" target="_blank">[Maven学习笔记七]Maven插件和目标</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven%E6%8F%92%E4%BB%B6/1.htm">maven插件</a> <div>插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标使用插件和目标使得我们可以干预</div> </li> <li><a href="/article/1677.htm" title="【Hadoop八】Yarn的资源调度策略" target="_blank">【Hadoop八】Yarn的资源调度策略</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度 2. 多用户资源共享的调度 </div> </li> <li><a href="/article/1804.htm" title="Nginx使用Linux内存加速静态文件访问" target="_blank">Nginx使用Linux内存加速静态文件访问</a> <span class="text-muted">ronin47</span> <div>Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下： </div> </li> <li><a href="/article/1931.htm" title="关于Unity3D中的Shader的知识" target="_blank">关于Unity3D中的Shader的知识</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a> <div>首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S</div> </li> <li><a href="/article/2058.htm" title="CopyOnWriteArrayList vs ArrayList" target="_blank">CopyOnWriteArrayList vs ArrayList</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO</div> </li> <li><a href="/article/2185.htm" title="内存中栈和堆的区别" target="_blank">内存中栈和堆的区别</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a> <div> 1、内存分配方面：堆：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中</div> </li> <li><a href="/article/2312.htm" title="回答一位网友对Scala的提问" target="_blank">回答一位网友对Scala的提问</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a> <div>本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。问题写道对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢先回答一点，在实际使用中，Scala毫无疑问就是这么简单。</div> </li> <li><a href="/article/2439.htm" title="mysql 取每组前几条记录" target="_blank">mysql 取每组前几条记录</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%BB%84/1.htm">分组</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E5%80%BC/1.htm">最大值</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%B0%8F%E5%80%BC/1.htm">最小值</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E7%BB%84%E4%B8%89%E6%9D%A1%E8%AE%B0%E5%BD%95/1.htm">每组三条记录</a> <div>一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a WHERE 3> (SELECT COUNT(*) FROM tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE</div> </li> <li><a href="/article/2566.htm" title="HTTP深入浅出 http请求" target="_blank">HTTP深入浅出 http请求</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a> <div> HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We</div> </li> <li><a href="/article/2693.htm" title="判断MySQL记录是否存在方法比较" target="_blank">判断MySQL记录是否存在方法比较</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。　　我这里总结了判断记录是否存在的常用方法：　　sql语句： select count ( * ) from tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。</div> </li> <li><a href="/article/2820.htm" title="对HTML XML的一点认识" target="_blank">对HTML XML的一点认识</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。节点根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点 Node 层次 </div> </li> <li><a href="/article/2947.htm" title="jquery分页插件" target="_blank">jquery分页插件</a> <span class="text-muted">genaiwei</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5/1.htm">分页</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E4%BB%B6/1.htm">插件</a> <div>//jquery页码控件// 创建一个闭包 (function($) { // 插件的定义 $.fn.pageTool = function(options) { var totalPa</div> </li> <li><a href="/article/3201.htm" title="Mybatis与Ibatis对照入门于学习" target="_blank">Mybatis与Ibatis对照入门于学习</a> <span class="text-muted">Josh_Persistence</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%88%AB/1.htm">区别</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E7%B3%BB/1.htm">联系</a> <div>一、为什么使用IBatis/Mybatis 对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、</div> </li> <li><a href="/article/3328.htm" title="C中怎样合理决定使用那种整数类型？" target="_blank">C中怎样合理决定使用那种整数类型？</a> <span class="text-muted">秋风扫落叶</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/1.htm">数据类型</a> <div>如果需要大数值(大于32767或小于32767), 使用long 型。否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。除此之外, 就使用 int 型。如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。但是, 要注意在表达式中混用有符号和无符号值的情况。 &nbs</div> </li> <li><a href="/article/3455.htm" title="maven问题" target="_blank">maven问题</a> <span class="text-muted">zhb8015</span> <a class="tag" taget="_blank" href="/search/maven%E9%97%AE%E9%A2%98/1.htm">maven问题</a> <div> 问题1： Eclipse 中新建maven项目无法添加src/main/java 问题 eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。按照maven目录结构，添加src/main/ja</div> </li> <li><a href="/article/3582.htm" title="(二)androidpn-server tomcat版源码解析之--push消息处理" target="_blank">(二)androidpn-server tomcat版源码解析之--push消息处理</a> <span class="text-muted">spjich</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/androdipn/1.htm">androdipn</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E9%80%81/1.htm">推送</a> <div>在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc</div> </li> <li><a href="/article/3709.htm" title="用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题" target="_blank">用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题</a> <span class="text-muted">中华好儿孙</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/FormData/1.htm">FormData</a> <div> var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca</div> </li> <li><a href="/article/3836.htm" title="mybatis常用jdbcType数据类型" target="_blank">mybatis常用jdbcType数据类型</a> <span class="text-muted">ysj5125094</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/mapper/1.htm">mapper</a><a class="tag" taget="_blank" href="/search/jdbcType/1.htm">jdbcType</a> <div> MyBatis 通过包含的jdbcType 类型 BIT FLOAT CHAR </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>