think2me
think2me

bootstrap学习笔记-第3章 表单

bootstrap学习笔记-第3章 表单

更好排版：https://www.zybuluo.com/phper/note/81007

这一篇继续学习一下bootstrap里的表单。

基础表单

表单就是

标签，其中包括文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

bootstrap里面的form风格一般是这样。先外围来一个然后，中间的每个元素，都会被

围住。比如：下面这个简单的：

   
   
   
   
    
    
    
    
    
  1.  role="form">
    2. 
    
    
    
    
  2.    class="form-group">
    3. 
    
    
    
    
  3.      for="exampleInputEmail1">邮箱：
    4. 
    
    
    
    
  4.      type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
    5. 
    
    
    
    
  5.
  • class="form-group">
  • for="exampleInputPassword1">密码
  • type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
  • class="checkbox">
  • type="checkbox"> 记住密码
  • type="submit" class="btn btn-default">进入邮箱

    • 效果如图： 
    bootstrap学习笔记-第3章 表单_第1张图片

    水平表单

    Bootstrap框架默认的表单是垂直显示风格，见上图。但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。 

    加上一个.form-horizontalclass就可以了。还有就是得改变里面元素外面也必须套一层
    ，并加上网格布局标识col-sm-2类似这样的。以后会讲到：

       
   
   
   
      
    
    
    
    
    1.  class="form-horizontal" role="form">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      for="inputEmail3" class="col-sm-2 control-label">邮箱
      4. 
    
    
    
    
    4.      class="col-sm-10">
      5. 
    
    
    
    
    5.        type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
      6. 
    
    
    
    
    6.
  • class="form-group">
  • for="inputPassword3" class="col-sm-2 control-label">密码
  • class="col-sm-10">
  • type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  • class="form-group">
  • class="col-sm-offset-2 col-sm-10">
  • class="checkbox">
  • type="checkbox"> 记住密码
  • class="form-group">
  • class="col-sm-offset-2 col-sm-10">
  • type="submit" class="btn btn-default">进入邮箱

    • 效果如图： 
    bootstrap学习笔记-第3章 表单_第2张图片

    内联表单

    内联表单的意思是将表单的控件都在一行内显示。类似于： 

    很简单，只要在上加上.form-line的class 就可以了。还是这个例子：

       
   
   
   
      
    
    
    
    
    1.  class="form-inline" role="form">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      for="exampleInputEmail2">邮箱
      4. 
    
    
    
    
    4.      type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
      5. 
    
    
    
    
    5.   
      6. 
    
    
    
    
    6.    class="form-group">
      7. 
    
    
    
    
    7.      for="exampleInputPassword2">密码
      8. 
    
    
    
    
    8.      type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
      9. 
    
    
    
    
    9.   
      10. 
    
    
    
    
    10.    class="checkbox">
      11. 
    
    
    
    
    11.     
      12. 
    
    
    
    
    12.        type="checkbox"> 记住密码
      13. 
    
    
    
    
    13.     
      14. 
    
    
    
    
    14.   
      15. 
    
    
    
    
    15.    type="submit" class="btn btn-default">进入邮箱
      16. 
    
    
    
    
    16.   
      17.

    运行结果如上图。

    表单控件(输入框input)

     框是很常见的，在bootstrap中也优化的蛮不错。type=?如果为了设配更多的类型，必须要填：email, text, password,button, submit等。为了让控件在各种表单风格中样式不出错，需要添加类名form-control的class，如：

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      type="email" class="form-control" placeholder="Enter email">
      4. 
    
    
    
    
    4.    
      5. 
    
    
    
    
    5.    
      6.

    效果图： 

    下拉选择框select

    select 分为下拉单个选择和多个多行选择，有它的参数multiple决定。同样，为了让控件在各种表单风格中样式不出错，需要添加类名form-control的class，如：

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      class="form-control"> 
      4. 
    
    
    
    
    4.       1 
      5. 
    
    
    
    
    5.       2 
      6. 
    
    
    
    
    6.       3 
      7. 
    
    
    
    
    7.       4 
      8. 
    
    
    
    
    8.       5 
      9. 
    
    
    
    
    9.       
      10. 
    
    
    
    
    10.   
      11. 
    
    
    
    
    11.    class="form-group">
      12. 
    
    
    
    
    12.        multiple class="form-control"> 
      13. 
    
    
    
    
    13.         1 
      14. 
    
    
    
    
    14.         2 
      15. 
    
    
    
    
    15.         3 
      16. 
    
    
    
    
    16.         4 
      17. 
    
    
    
    
    17.         5 
      18. 
    
    
    
    
    18.       
      19. 
    
    
    
    
    19.   
      20. 
    
    
    
    
      21.

    效果如图： 

    文本域textarea

    文本域一般用来填写较多的文字，在bootstrap中它和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      class="form-control" rows="3">
      4. 
    
    
    
    
    4.   
      5. 
    
    
    
    
      6.

    复选框checkbox和单选择按钮radio

    之前我用原生的checkbox 和 radio 最蛋疼的问题，就是文字对齐问题，太蛋疼了。css我又用的很烂，所以bootstrap把它优化了下。很傻很爽。用对应的div class=radio checkbox包住就可以了。

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.   
      案例1
      3. 
    
    
    
    
    3.    class="checkbox">
      4. 
    
    
    
    
    4.     
      5. 
    
    
    
    
    5.        type="checkbox" value="">
      6. 
    
    
    
    
    6.       记住密码
      7. 
    
    
    
    
    7.     
      8. 
    
    
    
    
    8.   
      9. 
    
    
    
    
    9.    class="radio">
      10. 
    
    
    
    
    10.     
      11. 
    
    
    
    
    11.        type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      12. 
    
    
    
    
    12.       喜欢
      13. 
    
    
    
    
    13.     
      14. 
    
    
    
    
    14.   
      15. 
    
    
    
    
    15.      class="radio">
      16. 
    
    
    
    
    16.     
      17. 
    
    
    
    
    17.        type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      18. 
    
    
    
    
    18.       不喜欢
      19. 
    
    
    
    
    19.     
      20. 
    
    
    
    
    20.   
      21. 
    
    
    
    
    21.   
      22.

    效果如图：对的齐齐的。 
    bootstrap学习笔记-第3章 表单_第3张图片

    复选框checkbox和单选择按钮radio 水平排列。

    上面的是换行了的，有的时候是需要水平一行显示的。 
    1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline” 
    2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

    像上面那样的div=checkbox radio就不要了，因为他们就是换行用的

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      class="checkbox-inline">
      4. 
    
    
    
    
    4.        type="checkbox"  value="option1">游戏
      5. 
    
    
    
    
    5.     
      6. 
    
    
    
    
    6.      class="checkbox-inline">
      7. 
    
    
    
    
    7.        type="checkbox"  value="option2">摄影
      8. 
    
    
    
    
    8.     
      9. 
    
    
    
    
    9.      class="checkbox-inline">
      10. 
    
    
    
    
    10.      type="checkbox"  value="option3">旅游
      11. 
    
    
    
    
    11.     
      12. 
    
    
    
    
    12.   
      13. 
    
    
    
    
    13.    class="form-group">
      14. 
    
    
    
    
    14.      class="radio-inline">
      15. 
    
    
    
    
    15.        type="radio"  value="option1" name="sex">男性
      16. 
    
    
    
    
    16.     
      17. 
    
    
    
    
    17.      class="radio-inline">
      18. 
    
    
    
    
    18.        type="radio"  value="option2" name="sex">女性
      19. 
    
    
    
    
    19.     
      20. 
    
    
    
    
    20.      class="radio-inline">
      21. 
    
    
    
    
    21.        type="radio"  value="option3" name="sex">中性
      22. 
    
    
    
    
    22.     
      23. 
    
    
    
    
    23.   
      24. 
    
    
    
    
      25.

    效果如图： 

    表单控件大小

    之前我们用表单都是默认的大小，有的会随着窗口变化而变化。Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 
    1、input-sm:让控件比正常大小更小 
    2、input-lg:让控件比正常大小更大

    我们试一下：

       
   
   
   
      
    
    
    
    
    1.  class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
      2. 
    
    
    
    
    2.  class="form-control" type="text" placeholder="正常大小">
      3. 
    
    
    
    
    3.  class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
      4.

    效果如图： 
    bootstrap学习笔记-第3章 表单_第4张图片

    但是，因为它只是高度变化了，宽度还是100%显示的。

    所以，如果我们也想控制长度的话，那就必须用到网格系统了，类似：col-xs-4来控制：

    首先要用到前面我们说到的水平表单form-horizontal

       
   
   
   
      
    
    
    
    
    1.  role="form" class="form-horizontal">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      class="col-xs-4">
      4. 
    
    
    
    
    4.          class="form-control input-lg" type="text" placeholder=".col-xs-4">
      5. 
    
    
    
    
    5.     
      6. 
    
    
    
    
    6.      class="col-xs-4">
      7. 
    
    
    
    
    7.          class="form-control input-lg" type="text" placeholder=".col-xs-4">
      8. 
    
    
    
    
    8.     
      9. 
    
    
    
    
    9.      class="col-xs-4">
      10. 
    
    
    
    
    10.          class="form-control input-lg" type="text" placeholder=".col-xs-4">
      11. 
    
    
    
    
    11.     
      12. 
    
    
    
    
    12.   
      13. 
    
    
    
    
    13.     …
      14. 
    
    
    
    
      15.

    效果如图： 

    表单控件状态(焦点状态)

    焦点状态是通过伪类“:focus”来实现。在form-control已经定义好了，所以我们只需要添加这个类就可以了。

       
   
   
   
      
    
    
    
    
    1.  role="form" class="form-horizontal">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      class="col-xs-6">
      4. 
    
    
    
    
    4.        class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
      5. 
    
    
    
    
    5.     
      6. 
    
    
    
    
    6.   
      7. 
    
    
    
    
      8.

    当我们鼠标点进去的时候，周边一圈是淡蓝色的边，就是focus的状态了： 

    表单控件状态(禁用状态)

    和原生的一样，只需要通过增加disabled就能禁用表单的输入。bootstrap对它进行了很多的优化。

       
   
   
   
      
    
    
    
    
    1.  class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>
      2.

    鼠标放上去就会变成一个禁止的标志。 

    在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    disabled>
      3. 
    
    
    
    
    3.      class="form-group">
      4. 
    
    
    
    
    4.        for="disabledTextInput">禁用的输入框
      5. 
    
    
    
    
    5.        type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
      6. 
    
    
    
    
    6.     
      7. 
    
    
    
    
    7.      class="form-group">
      8. 
    
    
    
    
    8.        for="disabledSelect">禁用的下拉框
      9. 
    
    
    
    
    9.        id="disabledSelect" class="form-control">
      10. 
    
    
    
    
    10.         不可选择
      11. 
    
    
    
    
    11.       
      12. 
    
    
    
    
    12.     
      13. 
    
    
    
    
    13.      class="checkbox">
      14. 
    
    
    
    
    14.       
      15. 
    
    
    
    
    15.          type="checkbox"> 无法选择
      16. 
    
    
    
    
    16.       
      17. 
    
    
    
    
    17.     
      18. 
    
    
    
    
    18.      type="submit" class="btn btn-primary">提交
      19. 
    
    
    
    
    19.   
      20. 
    
    
    
    
    20.  
      21.

    效果如图： 
    bootstrap学习笔记-第3章 表单_第5张图片

    表单控件状态(验证状态)

    有时候，我们输入数据后，验证会直接反馈到表单上，这样会比较直接，bootstrap提供了以下表单验证： 
    1、.has-warning:警告状态（黄色） 
    2、.has-error：错误状态（红色） 
    3、.has-success：成功状态（绿色） 
    使用的时候只需要在form-group的

    上对应添加状态类名。

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group has-success">
      3. 
    
    
    
    
    3.      class="control-label" for="inputSuccess1">成功状态
      4. 
    
    
    
    
    4.      type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      5. 
    
    
    
    
    5.
  • class="form-group has-warning">
  • class="control-label" for="inputWarning1">警告状态
  • type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  • class="form-group has-error">
  • class="control-label" for="inputError1">错误状态
  • type="text" class="form-control" id="inputError1" placeholder="错误状态">

    • 效果如图： 
    bootstrap学习笔记-第3章 表单_第6张图片

    加个contrlo-label 会继承上层div容器的颜色样式，所以文字也会变颜色。

    有时候，我们光看颜色变化了，其实还是提示的不够明显，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。上层div容器加个has-feedback类就可以了。请注意，此类名要与has-error、has-warning和has-success在一起，然后还需要在框后面添加一个

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group has-success has-feedback">
      3. 
    
    
    
    
    3.      class="control-label" for="inputSuccess1">成功状态
      4. 
    
    
    
    
    4.      type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      5. 
    
    
    
    
    5.      class="glyphicon glyphicon-ok form-control-feedback">
      6. 
    
    
    
    
    6.   
      7. 
    
    
    
    
    7.    class="form-group has-warning has-feedback">
      8. 
    
    
    
    
    8.      class="control-label" for="inputWarning1">警告状态
      9. 
    
    
    
    
    9.      type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
      10. 
    
    
    
    
    10.      class="glyphicon glyphicon-warning-sign form-control-feedback">
      11. 
    
    
    
    
    11.   
      12. 
    
    
    
    
    12.    class="form-group has-error has-feedback">
      13. 
    
    
    
    
    13.      class="control-label" for="inputError1">错误状态
      14. 
    
    
    
    
    14.      type="text" class="form-control" id="inputError1" placeholder="错误状态">
      15. 
    
    
    
    
    15.      class="glyphicon glyphicon-remove form-control-feedback">  
      16. 
    
    
    
    
    16.   
      17. 
    
    
    
    
      18.

     里面加了3个class：lyphicon glyphicon-warning-sign form-control-feedback

    success : glyphicon-ok 
    warning : glyphicon-warning-sign 
    error : glyphicon-remove

    效果图： 
    bootstrap学习笔记-第3章 表单_第7张图片

    表单提示信息

    上面的表单提示提示，是显示在表达右边的，bootstrap中还可以是文字的提示的，就需要用help-block样式，将提示信息以块状显示，并且显示在控件底部。

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group has-success has-feedback">
      3. 
    
    
    
    
    3.      class="control-label" for="inputSuccess1">成功状态
      4. 
    
    
    
    
    4.      type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      5. 
    
    
    
    
    5.      class="help-block">你输入的信息是正确的
      6. 
    
    
    
    
    6.      class="glyphicon glyphicon-ok form-control-feedback">
      7. 
    
    
    
    
    7.   
      8. 
    
    
    
    
    8.   
      9.

    效果如图： 
    bootstrap学习笔记-第3章 表单_第8张图片

    如果我想把提示信息放到一行显示，可以借助于网格系统col-sm-5这样子：

       
   
   
   
      
    
    
    
    
    1.  role="form">
      2. 
    
    
    
    
    2.    class="form-group">
      3. 
    
    
    
    
    3.      class="control-label" for="inputSuccess1">成功状态
      4. 
    
    
    
    
    4.      class="row">
      5. 
    
    
    
    
    5.        class="col-xs-6">
      6. 
    
    
    
    
    6.          type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      7. 
    
    
    
    
    7.       
      8. 
    
    
    
    
    8.         class="col-xs-6 help-block">你输入的信息是正确的
      9. 
    
    
    
    
    9.     
      10. 
    
    
    
    
    10.    
      11. 
    
    
    
    
    11.  
      12.

    效果如图： 

    按钮

    bootstrap中一般采用

  • class="btn btn-default" type="button">默认按钮.btn-default
  • class="btn btn-primary" type="button">主要按钮.btn-primary
  • class="btn btn-success" type="button">成功按钮.btn-success
  • class="btn btn-info" type="button">信息按钮.btn-info
  • class="btn btn-warning" type="button">警告按钮.btn-warning
  • class="btn btn-danger" type="button">危险按钮.btn-danger
  • class="btn btn-link" type="button">链接按钮.btn-link

    • 效果如图：蛮绚丽多彩的。 
    bootstrap学习笔记-第3章 表单_第9张图片

    按钮大小

    上面的按钮大小都是默认的大小，会随着页面大小而变化，bootstrap中也是可以控制其大小的。

    btn-lg大型按钮，btn-sm小型按钮, btn-xs超小型

       
   
   
   
      
    
    
    
    
    1.  class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg
      2. 
    
    
    
    
    2.  class="btn btn-primary" type="button">正常按钮
      3. 
    
    
    
    
    3.  class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm
      4. 
    
    
    
    
    4.  class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs
      5.

    效果如下： 

    块状按钮

    在一些h5 页面，一个按钮是占据一行的，并且随着页面大小变化而变化。可以加个bt-block就可以了：

       
   
   
   
      
    
    
    
    
    1.  class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg
      2. 
    
    
    
    
    2.  class="btnbtn-primary btn-block" type="button">正常按钮
      3. 
    
    
    
    
    3.  class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm
      4. 
    
    
    
    
    4.  class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs
      5.

    效果： 
    bootstrap学习笔记-第3章 表单_第10张图片

    按钮状态——禁用状态

    要禁用一个按钮，可以加disabled属性或者加一个class=disabled也行：

       
   
   
   
      
    
    
    
    
    1.  class="btnbtn-primary btn-lg btn-block" type="button" disabled>通过disabled属性禁用按钮
      2. 
    
    
    
    
    2.  class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮
      3. 
    
    
    
    
    3.  class="btnbtn-primary btn-sm btn-block" type="button">未禁用的按钮
      4.

    效果： 
    bootstrap学习笔记-第3章 表单_第11张图片

    图像

    在Bootstrap框架中对于图像的样式风格提供以下几种风格，只需要在标签上添加对应的类名：

    1、img-responsive：响应式图片，主要针对于响应式设计 
    2、img-rounded：圆角图片 
    3、img-circle：圆形图片 
    4、img-thumbnail：缩略图片

       
   
   
   
      
    
    
    
    
    1.  alt="140x140" src="http://placehold.it/140x140"> 默认
      2. 
    
    
    
    
    2.  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">圆角
      3. 
    
    
    
    
    3.  class="img-circle" alt="140x140" src="http://placehold.it/140x140">圆形
      4. 
    
    
    
    
    4.  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">缩略
      5. 
    
    
    
    
    5.  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">响应式
      6.

    效果如图： 
    bootstrap学习笔记-第3章 表单_第12张图片

    图标

    图标就是icon 很有用。很多图标都会用icon来做，bootstrap中提供了很多icon图标。都是有 glyphicon 提供的。用个元素即可, 所有icon都是以glyphicon-前缀的类名开始，然后后缀表示图标的名称:

       
   
   
   
      
    
    
    
    
    1.  class="glyphicon glyphicon-search">
      2. 
    
    
    
    
    2.  class="glyphicon glyphicon-asterisk">
      3. 
    
    
    
    
    3.  class="glyphicon glyphicon-plus">
      4. 
    
    
    
    
    4.  class="glyphicon glyphicon-cloud">
      5.

    bootstrap学习笔记-第3章 表单_第13张图片

    你可能感兴趣的:(bootstrap)

    • 思科路由器交换机密码破解过程详解 zhane_hao
      路由启动过程加电自检(POST)加载bootstrap代码检查配置寄存器寻找CiscoIOS加载CiscoIOS寻找配置文件加载配置文件若没有配置文件，进入Setup模式，进行初始化配置运行路由器操作系统查看命令•showversion：检查配置寄存器的值,硬件配置,IOS版本•showflash：检查Flash中的IOS,或是flash大小,使用情况(占用多少,剩下多少)•showstartup
    • Kafka系列之：kafka命令详细总结 快乐骑行^_^ 日常分享专栏KafkaKafka系列kafka命令详细总结
      Kafka系列之：kafka命令详细总结一、添加和删除topic二、修改topic三、平衡领导者四、检查消费者位置五、管理消费者群体一、添加和删除topicbin/kafka-topics.sh--bootstrap-serverbroker_host:port--create--topicmy_topic_name\--partitions20--replication-factor3--con
    • html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法 RemusrickCat
      本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆
    • 移动WEB开发（第四天）__响应式布局 加蓓努力我先飞 5.移动web开发资料前端
      移动WEB开发（第四天）__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开
    • css 个人喜欢的样式 速查笔记 waterHBO css笔记前端
      起因，目的:记录自己喜欢的，觉得比较好看的css.下次用的时候，直接复制，很方便。1.个人html模板，导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字
    • (代码可运行)Bootstrap框架的HTML示例 程序员大侠 前端CSShtmlbootstrap前端
      Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例：BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
    • bootstrap直接对form表进行校验 IT和金融
      form表单可以前端进行校验，当然也可以直接采用bootstrap对form表单进行校验如form表单中有等相关字段进行校验，可直接用bootstrap的校验，方式如下：$("#auth_add_form").bootstrapValidator({//auth_add_form为form的id值feedbackIcons:{valid:'glyphiconglyphicon-ok',invali
    • node模块 weiweiweb888 前端javascriptbootstrap
      模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
    • mirantis OpenStack9.0在virtualbox上的部署 Caroline_33 openstackmirantisvirtualbox
      实验环境安装包-VirtualBox-4.3.12-93733-Win.exe-Oracle_VM_VirtualBox_Extension_Pack-5.1.2-108956.vbox-extpack-Mirantis_Openstack9.0.iso-bootstrap.zip-mirrors.zip-xtfp-xshell实验机器-cpu:i3-3220以上-Ram:至少8G说明-保证内存至
    • es遇到的问题 云帆@ elasticsearchelasticsearch
      一、目录ERROR:[1]bootstrapchecksfailed.Youmustaddressthepointsdescribedinthefollowing[1]linesbeforestartingElasticsearch.ERROR:Elasticsearchexitedunexpectedly,withexitcode78二、实现ERROR:[1]bootstrapchecksfai
    • JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage 垦利不 javascript开发语言ecmascript
      目录1.classList属性添加类删除类切换类检查类是否存在替换类移动端touch事件2.消除点击延迟Fastclick插件的引入引入FastClick初始化3.Swiper插件的引入和使用通过CDN引入通过npm安装（vue中建议）使用SwiperHTML结构初始化Swiper4.zyMedia插件简介4.1下载与引入4.2使用4.3js初始化4.4参数说明5.bootstrap的安装和使用5
    • 前端框架有哪些？ 赎罪゛ 前端框架前端javascript
      熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和webpy，Ruby程序员常用RoR。随着Web越来越规范和标准的统一，Web组件化技术不断革新，移动端开发不断升华，以下是一些常见开源前端框架：Bootstrap
    • CoreUI免费Laravel管理模板安装与使用指南 皮静滢Annette
      CoreUI免费Laravel管理模板安装与使用指南coreui-free-laravel-admin-templateCoreUIFreeLaravelBootstrapAdminTemplate项目地址:https://gitcode.com/gh_mirrors/co/coreui-free-laravel-admin-template1.项目目录结构及介绍CoreUI免费Laravel管理
    • 81.MySQL-PXC高可用集群 戒掉贪嗔痴(薛双奇) 数据库运维-MySQLmysql数据库
      1.第一个节点启动。Linux7:my.cnf文件需要拷贝到：/etc/my.cnf(非常重要)[root@mysql51~]#mysqlpxcbootstrap-pxcBootstrappingPXC(PerconaXtraDBCluster)InitializingMySQ[OK]se:StartingMySQL(PerconaXtraDBCluster)..[OK]当前集群只有一个节点。my
    • 如何查看当前的gruop_id 的kafka 消费情况 这个可以查看到是否存在消费阻塞问题 树下水月 kafka分布式
      如何查看当前的gruop_id的kafka消费情况这个可以查看到是否存在消费阻塞问题命令如下:/kafka/bin/kafka-consumer-groups.sh--bootstrap-server127.0.0.1:9092--groupGWW --describe其中127.0.0.1为zookeeper服务器ipGWW为对应要查看的group_id如下图所示:运行这个命令后，Kafka会返
    • **脑图制作的Bootstrap Bundle项目指南** 潘惟妍
      脑图制作的BootstrapBundle项目指南bootstrap-bundleBraincraftedBootstrapBundleintegratesBootstrapintoSymfony2byprovidingtemplates,Twigextensions,servicesandcommands.项目地址:https://gitcode.com/gh_mirrors/bo/bootstr
    • linux的webkit桌面应用,使用node-webkit构建桌面应用程序 萌萌爱恋
      Web前端的现状目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架(如bootstrap，foundation等)支持，人们已经可以非常
    • bootstrap 列表 SkTj
      有序列表:olli无序列表：ulli不定义样式：ulclass="list-unstyled"横向显示：ulclass="list-inline"dtdddlclass="dl-horizontal"dtddimage.pngBootstrap实例-列表有序列表Item1Item2Item3Item4无序列表Item1Item2Item3Item4未定义样式列表Item1Item2Item3Ite
    • 前端框架有哪些？以及每种框架的详细介绍 cesske 前端框架
      目录前言1.React2.Vue.js3.Angular4.Bootstrap5.Foundation总结前言前端框架是Web开发中不可或缺的工具，它们为开发者提供了丰富的工具和抽象，使得构建复杂的Web应用变得更加容易。当前，前端框架种类繁多，其中一些最受欢迎的框架包括React、Vue.js、Angular、Bootstrap和Foundation等。以下是对这些框架的简要介绍：提示：以下是本
    • logstash 墨咖 logstash中间件服务器运维
      kafkainput{kafka{bootstrap_servers=>"127.0.0.1:9092"topics=>["SCHOOL_AQDL"]group_id=>"logstash-group"consumer_threads=>3codec=>"json"}}sysloginput{syslog{port=>12345codec=>cefsyslog_field=>"syslog"gro
    • springboot集成Kafka Maruko310 javaKafkakafkaspringbootjava
      yml配置如果下游的数据处理不及时，可以提高每批次拉取的数量，配置时不仅要设置max-poll-records属性（批量消费最大数量），也要将type设置为batch（默认single（单条），batch（批量）），不然会报类型无法转换的错误。kafka:#kafka的连接地址（注意，是kafka所在服务器的公网ip，不要写成zookeeper的了）bootstrap-servers:localh
    • Kafka~Kafka命令行参数使用教程 飞Link 大数据kafkazookeeper分布式
      一、kafka-topics.sh1.参数参数描述–bootstrap-server连接的KafkaBroker主机名称和端口号–topic操作的topic名称–create创建主题–delete删除主题–alter修改主题–list查看所有主题–describe查看主题详细描述–partition设置分区数–replication-factor设置分区副本–config更新系统默认的配置2.实例
    • kafka ---- producer与broker配置详解以及ack机制详解 husterlichf #kafkakafkajava分布式
      一、producer配置1、bootstrap.serverskafkabroker集群的ip列表，格式为：host1:port1,host2:port2,…2、client.id用于追踪消息的源头3、retries当发送失败时客户端会进行重试，重试的次数由retries指定，默认值是2147483647，即Integer.MAX_VALUE；在重试次数耗尽和delivery.timeout.ms
    • 前端框架大盘点 HITZXL 前端开发#VUE前端框架前端javascript
      最近项目中用到了很多前后端分离的框架。很多框架虽然类似，但项目中却总用混用的情况，看到陌生的框架，总是一头雾水，干脆来个大盘点。一扫心中困惑。目前对于前端的各种技术，还有很多理解不到的地方。例如前端框架，前端组件，UI库，这些总感觉有些傻傻分不清楚。毕竟都是用来协助项目快速开发和上手的，因此，看到了别人的总结，感觉清晰明了。放在这里压住阵脚：css框架：Bootstrap、Layui、Zui、Am
    • Bootstrap 按钮（实例 ） 2401_84093443 程序员bootstrap前端javascript
      默认大小的原始按钮默认大小的按钮小的原始按钮小的按钮特别小的原始按钮特别小的按钮块级的原始按钮块级的按钮按钮状态Bootstrap提供了激活、禁用等按钮状态的class，下面将进行详细讲解。激活状态按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。下表列出了让按钮元素和锚元素呈激活状态的class：下面的实例演示了这点：Bootstrap实例-按钮激活状态默认按钮激活按钮原始按钮激
    • Spring Cloud 系列五《Nacos+gateway（配置中心+网关）》 哈叮 微服务springcloudspringspringbootjava
      0、前言上篇已经集成Nacos，本篇把网关（SpringCloudGateway）加上1、代码截图代码是在上篇基础上修改的，有些重叠的就不贴代码了。2、Common增加了一个通用服务，主要用来引入通用包pom：注意openfeign，loadbalancer，bootstrap，都是不可获取的。com.alibaba.cloudspring-cloud-starter-alibaba-nacos-
    • Bootstrap - 表单 廖马儿
      Bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。代码：这是一个输入框:这是一个输入框:北京北京北京这是一个输入框:效果：图片.pngclass:对标签添加：class="form-inline"可以让它水平排列：图片.png对Input设置大小可以添加class：input-sminput-lg应该使用form-group设置
    • vue.js项目实战案例源码 前端码趣逗士 vue.js
      案例一：博客系统项目概述：一个简单的博客系统，包括文章列表展示、文章详情查看、分类筛选、用户登录注册等功能。技术栈：Vue.jsVueRouterVuexAxiosBootstrap主要功能实现：文章列表展示：使用Axios从后端API获取文章列表数据。在Vue组件中展示文章标题、摘要和发布日期等信息。博客文章列表{{article.title}}{{article.summary}}{{arti
    • python ImportError: No module named requests 陈桐Caliburn
      curlhttps://bootstrap.pypa.io/get-pip.py-oget-pip.pypythonget-pip.pypipinstallrequests
    • Java反射机制思维导图(全） ZHANGJINTAO_ java反射设计模式
      Java反射机制思维导图(全）类加载器概述当我们的程序在运行后，第一次使用某个类的时候，会将此类的class文件读取到内存，并将此类的所有信息存储到一个Class对象中，类加载器就是是负责将磁盘上的某个class文件读取到内存并生成Class的对象的。分类启动/引导类加载器(BootstrapClassLoader)：用于加载系统类库扩展类加载器(ExtensionClassLoader)：用于加
    • apache 安装linux windows 墙头上一根草 apacheinuxwindows
      linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装，另外一种就是通过yum 安装，此中安装方式，需要物理机联网。以下分别介绍两种的安装方式     通过二进制文件安装Apache需要的软件有apr,apr-util,pcre  1，安装 apr        下载地址：htt
    • fill_parent、wrap_content和match_parent的区别 Cb123456 match_parentfill_parent
      fill_parent、wrap_content和match_parent的区别:   1）fill_parent   设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 2） wrap_conte
    • 网页自适应设计 天子之骄 htmlcss响应式设计页面自适应
      网页自适应设计        网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所
    • [sql server] 分组取最大最小常用sql 一炮送你回车库 SQL Server
      --分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1
    • ImageIO写图片输出到硬盘 3213213333332132 javaimage
      package awt; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imagei
    • 自己的String动态数组 宝剑锋梅花香 java动态数组数组
      数组还是好说，学过一两门编程语言的就知道，需要注意的是数组声明时需要把大小给它定下来，比如声明一个字符串类型的数组：String str[]=new String[10];    但是问题就来了，每次都是大小确定的数组，我需要数组大小不固定随时变化怎么办呢？  动态数组就这样应运而生，龙哥给我们讲的是自己用代码写动态数组，并非用的ArrayList 看看字符
    • pinyin4j工具类 darkranger .net
      pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号：大中小 引入pinyin4j-2.5.0.jar包: pinyin4j是一个功能强悍的汉语拼音工具包，主要是从汉语获取各种格式和需求的拼音，功能强悍，下面看看如何使用pinyin4j。 本人以前用AscII编码提取工具，效果不理想，现在用pinyin4j简单实现了一个。功能还不是很完美，
    • StarUML学习笔记----基本概念 aijuans UML建模
      介绍StarUML的基本概念，这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。         模型、视与图（Model, View and Diagram）        &
    • Activiti最终总结 avords Activiti id 工作流
      1、流程定义ID：ProcessDefinitionId，当定义一个流程就会产生。 2、流程实例ID：ProcessInstanceId，当开始一个具体的流程时就会产生，也就是不同的流程实例ID可能有相同的流程定义ID。 3、TaskId，每一个userTask都会有一个Id这个是存在于流程实例上的。 4、TaskDefinitionKey和（ActivityImpl activityId
    • 从省市区多重级联想到的，react和jquery的差别 bee1314 jqueryUIreact
      在我们的前端项目里经常会用到级联的select，比如省市区这样。通常这种级联大多是动态的。比如先加载了省，点击省加载市，点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。   针对这种场景，如果我们使用jquery来实现，要考虑很多的问题，数据部分，以及大量的dom操作。比如这个页面上显示了某个区，这时候我切换省，要把市重新初始化数据，然后区域的部分要从页面
    • Eclipse快捷键大全 bijian1013 javaeclipse快捷键
      Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En
    • js 笔记 函数 征客丶 JavaScript
      一、函数的使用 1.1、定义函数变量 var vName = funcation(params){ } 1.2、函数的调用 函数变量的调用：      vName(params); 函数定义时自发调用：(function(params){})(params); 1.3、函数中变量赋值 var a = 'a'; var ff
    • 【Scala四】分析Spark源代码总结的Scala语法二 bit1129 scala
      1. Some操作   在下面的代码中，使用了Some操作：if (self.partitioner == Some(partitioner))，那么Some(partitioner)表示什么含义？首先partitioner是方法combineByKey传入的变量， Some的文档说明：   /** Class `Some[A]` represents existin
    • java 匿名内部类 BlueSkator java匿名内部类
      组合优先于继承 Java的匿名类，就是提供了一个快捷方便的手段，令继承关系可以方便地变成组合关系 继承只有一个时候才能用，当你要求子类的实例可以替代父类实例的位置时才可以用继承。   在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。 内部类不是很好理解，但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成，而内部类相
    • 盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用 ljy325 游戏applewindowsXPOS
      Mac mini 型号: MC270CH-A RMB:5,688   Apple 对windows的产品支持不好,有以下问题:   1.装完了xp,发现机身很热虽然没有运行任何程序！貌似显卡跑游戏发热一样，按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响!   2.反观安装了Mac os的展示机，发热量很小，运行了1天温度也没有那么高 &nbs
    • 读《研磨设计模式》-代码笔记-生成器模式-Builder bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 生成器模式的意图在于将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示（GoF） * 个人理解： * 构建一个复杂的对象，对于创建者（Builder）来说，一是要有数据来源(rawData)，二是要返回构
    • JIRA与SVN插件安装 chenyu19891124 SVNjira
      JIRA安装好后提交代码并要显示在JIRA上，这得需要用SVN的插件才能看见开发人员提交的代码。 1.下载svn与jira插件安装包，解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB
    • 常用数学思想方法 comsci 工作
        对于搞工程和技术的朋友来讲，在工作中常常遇到一些实际问题，而采用常规的思维方式无法很好的解决这些问题，那么这个时候我们就需要用数学语言和数学工具，而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法，仅供学习和参考   函数思想 　　把某一数学问题用函数表示出来，并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法
    • pl/sql集合类型 daizj oracle集合typepl/sql
      --集合类型 /*   单行单列的数据，使用标量变量   单行多列数据，使用记录   单列多行数据，使用集合（。。。）   *集合：类似于数组也就是。pl/sql集合类型包括索引表（pl/sql table）、嵌套表（Nested Table）、变长数组（VARRAY）等 */ /*     --集合方法 &n
    • [Ofbiz]ofbiz初用 dinguangx 电商ofbiz
      从github下载最新的ofbiz（截止2015-7-13），从源码进行ofbiz的试用 1. 加载测试库 ofbiz内置derby，通过下面的命令初始化测试库 ./ant load-demo (与load-seed有一些区别)   2. 启动内置tomcat ./ant start 或 ./startofbiz.sh 或 java -jar ofbiz.jar &
    • 结构体中最后一个元素是长度为0的数组 dcj3sjt126com cgcc
      在Linux源代码中，有很多的结构体最后都定义了一个元素个数为0个的数组，如/usr/include/linux/if_pppox.h中有这样一个结构体： struct pppoe_tag {     __u16 tag_type;     __u16 tag_len;   &n
    • Linux cp 实现强行覆盖 dcj3sjt126com linux
      发现在Fedora 10 /ubutun 里面用cp -fr src dest，即使加了-f也是不能强行覆盖的，这时怎么回事的呢？一两个文件还好说，就输几个yes吧，但是要是n多文件怎么办，那还不输死人呢？下面提供三种解决办法。 方法一 我们输入alias命令，看看系统给cp起了一个什么别名。 [root@localhost ~]# aliasalias cp=’cp -i’a
    • Memcached(一)、HelloWorld frank1234 memcached
      一、简介 高性能的架构离不开缓存，分布式缓存中的佼佼者当属memcached，它通过客户端将不同的key hash到不同的memcached服务器中，而获取的时候也到相同的服务器中获取，由于不需要做集群同步，也就省去了集群间同步的开销和延迟，所以它相对于ehcache等缓存来说能更好的支持分布式应用，具有更强的横向伸缩能力。 二、客户端 选择一个memcached客户端，我这里用的是memc
    • Search in Rotated Sorted Array II hcx2013 search
      Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this affect the run-time complexity? How and why? Write a function to determine if a given ta
    • Spring4新特性——更好的Java泛型操作API jinnianshilongnian spring4generic type
      Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
    • CentOS安装JDK liuxingguome centos
      1、行卸载原来的： [root@localhost opt]# rpm -qa | grep java tzdata-java-2014g-1.el6.noarch java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 [root@localhost
    • 二分搜索专题2-在有序二维数组中搜索一个元素 OpenMind 二维数组算法二分搜索
      1,设二维数组p的每行每列都按照下标递增的顺序递增。 用数学语言描述如下：p满足 (1),对任意的x1，x2，y，如果x1<x2,则p(x1,y)<p(x2,y); (2),对任意的x，y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 2,问题： 给定满足1的数组p和一个整数k，求是否存在x0,y0使得p(x0,y0)=k? 3,算法分析： (
    • java 随机数 Math与Random SaraWon javaMathRandom
      今天需要在程序中产生随机数，知道有两种方法可以使用，但是使用Math和Random的区别还不是特别清楚，看到一篇文章是关于的，觉得写的还挺不错的，原文地址是 http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 产生1到10之间的随机数的两种实现方式： //Math Math.roun
    • oracle创建表空间 tugn oracle
      create temporary tablespace TXSJ_TEMP   tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf'   size 32m   autoextend on   next 32m maxsize 2048m   extent m
    • 使用Java8实现自己的个性化搜索引擎 yangshangchuan javasuperword搜索引擎java8全文检索
      需要对249本软件著作实现句子级别全文检索，这些著作均为PDF文件，不使用现有的框架如lucene，自己实现的方法如下： 1、从PDF文件中提取文本，这里的重点是如何最大可能地还原文本。提取之后的文本，一个句子一行保存为文本文件。 2、将所有文本文件合并为一个单一的文本文件，这样，每一个句子就有一个唯一行号。 3、对每一行文本进行分词，建立倒排表，倒排表的格式为：词=包含该词的总行数N=行号
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他