bootstrap学习笔记--bootstrap组件

前面已经学习了bootstrap环境搭建以及基本布局方面的知识，下面将学习下关于bootstrap的相关组件，知识点有点多。

关于bootstrap组件知识点目录：

1. Bootstrap--代码显示
2. Bootstrap--表格
3. Bootstrap--表单
4. Bootstrap--按钮
5. Bootstrap--图片
6. Bootstrap--辅助类
7. Bootstrap--响应式实用工具
8. Bootstrap--字体图标
9. Bootstrap--下拉菜单
10. Bootstrap--按钮组
11. Bootstrap--按钮下拉菜单
12. Bootstrap--输入框组
13. Bootstrap--导航元素
14. Bootstrap--导航栏
15. Bootstrap--面包屑导航
16. Bootstrap--分页
17. Bootstrap--标签
18. Bootstrap--徽章
19. Bootstrap--超大屏幕
20. Bootstrap--页面标题
21. Bootstrap--缩略图
22. Bootstrap--警告
23. Bootstrap--进度条
24. Bootstrap--多媒体对象
25. Bootstrap--列表组
26. Bootstrap--面板
27. Bootstrap--Wells

1.Bootstrap 代码

Bootstrap 允许您以两种方式显示代码：

• 第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。
• 第二种是

   标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 
   标签。

请确保当您使用

 和  标签时，开始和结束标签使用了 unicode 变体： < 和 >。
 
   
 
    
    
class="container">
        
class="row">
            
<select>
            
                <div&gt;
                Hello World!
                </div&gt;
            
        
    
 
   
 
   
显示效果：
 
   
 
   
2.Bootstrap 表格
 
   

       
   
 
   
 
    
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
 
    、
 
     
 
      
 
       
标签
 
       
描述
 
      
 
      
 
       
），用来标识表格列。）。 内使用。
 
       
为表格添加基础样式。
 
      
 
      
 
       
 
       
表格标题行的容器元素（
 
      
 
      
 
       
 
       
表格主体中的表格行的容器元素（
 
      
 
      
 
       
 
       
一组出现在单行上的表格单元格的容器元素（
 或 
）。 
      
 
      
 
       
 
       
默认的表格单元格。
 
      
 
      
 
       
 
       
特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 
 
       
      
 
       
 
       
关于表格存储内容的描述或总结。
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
表格类
 
    
下表样式可用于表格中：
 
    ,  内的行上看到条纹，如下面的实例所示：
 
     
class="row">
            
 
     
 
      
 
       
类
 
       
描述
 
      
 
      
 
       
.table
 
       
为任意  添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态
 
       
      
 
       
.table-striped
 
       
在 
 
       
      
 
       
.table-bordered
 
       
为所有表格的单元格添加边框
 
      
 
      
 
       
.table-hover
 
       
在 
 
       
      
 
       
.table-condensed
 
       
让表格更加紧凑
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 和 
 类 
    
下表的类可用于表格的行或者单元格：
 
    
 
     
 
      
 
       
类
 
       
描述
 
      
 
      
 
       
.active
 
       
将悬停的颜色应用在行或者单元格上
 
      
 
      
 
       
.success
 
       
表示成功的操作
 
      
 
      
 
       
.info
 
       
表示信息变化的操作
 
      
 
      
 
       
.warning
 
       
表示一个警告的操作
 
      
 
      
 
       
.danger
 
       
表示一个危险的操作
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
基本的表格
 
    
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：
 
    
 
     
class="row">
            class="table">
                
class="text-center">基本表格布局
                

                    

                        
编号
                        
城市
                    
                
                

                    

                        
No.1
                        
北京
                    
                    

                        
No.2
                        
上海
                    
                
            
        
 
    
 
    
显示效果：
 
    
 
    
可选的表格类
 
    
除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
 
    
条纹表格
 
    
通过添加 .table-striped class，您将在 
 
    
class="table table-striped">
                
class="text-center">条纹表格布局
                

                    

                        
编号
                        
城市
                    
                
                

                    

                        
No.1
                        
北京
                    
                    

                        
No.2
                        
上海
                    
                    

                        
No.3
                        
苏州
                    
                    

                        
No.4
                        
南京
                    
                
            
         
     
    
显示效果：
 
    
 
    
边框表格
 
    
通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
 
    
 
     
class="row">
            class="table table-bordered">
                
class="text-center">边框表格布局
                

                    

                        
编号
                        
城市
                    
                
                

                    

                        
No.1
                        
北京
                    
                    

                        
No.2
                        
上海
                    
                    

                        
No.3
                        
苏州
                    
                    

                        
No.4
                        
南京
                    
                
            
        
 
    
 
    
显示效果：
 
    
 
    
悬停表格
 
    
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
 
    
 
     
class="row">
            class="table table-hover">
                
class="text-center">悬停表格布局
                

                    

                        
编号
                        
城市
                    
                
                

                    

                        
No.1
                        
北京
                    
                    

                        
No.2
                        
上海
                    
                    

                        
No.3
                        
苏州
                    
                    

                        
No.4
                        
南京
                    
                
            
        
 
    
 
    
显示效果：
 
    
 
    
精简表格
 
    
通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
 
    
 
     
class="row">
            class="table table-condensed">
                
class="text-center">精简表格布局
                

                    

                        
编号
                        
城市
                    
                
                

                    

                        
No.1
                        
北京
                    
                    

                        
No.2
                        
上海
                    
                    

                        
No.3
                        
苏州
                    
                    

                        
No.4
                        
南京
                    
                
            
        
 
    
 
    
显示效果：
 
    
 
    
上下文类
 
    
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
 
    
 
     
 
      
 
       
类
 
       
描述
 
      
 
      
 
       
.active
 
       
对某一特定的行或单元格应用悬停颜色
 
      
 
      
 
       
.success
 
       
表示一个成功的或积极的动作
 
      
 
      
 
       
.warning
 
       
表示一个需要注意的警告
 
      
 
      
 
       
.danger
 
       
表示一个危险的或潜在的负面动作
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
这些类可以用到
、
中，如下面实例所示：
 
    
 
     
class="row">
            class="table">
                class="active">
                        class="success">
                        class="warning">
                        class="danger">
                        
class="text-center">上下文表格布局
                

                    

                        
编号
                        
城市
                    
                
                

                    
No.1
                        
北京
                    
                    
No.2
                        
上海
                    
                    
No.3
                        
苏州
                    
                    
No.4
                        
南京
                    
                
            
        
 
    
 
    
显示效果：
 
    
 
    
响应式表格
 
    
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
 
    
 
     
 
class="table-responsive">
        class="table">
            
class="text-center">响应式表格布局
            

                

                    
编号
                    
城市
                
            
            

                

                    
No.1
                    
北京
                
                

                    
No.2
                    
上海
                
                

                    
No.3
                    
苏州
                
                

                    
No.4
                    
南京
                
            
        
    
 
    
 
    
显示效果：
 
    
 
    
 
 
    
3.Bootstrap 表单
 
    
表单布局
 
    
Bootstrap 提供了下列类型的表单布局：
 
    
 
     
垂直表单（默认）
 
     
内联表单
 
     
水平表单
 
    
 
    
垂直或基本表单
 
    
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
 
    
 
     
向父 
 元素添加 role="form"。
 
     
把标签和控件放在一个带有 class .form-group 的 
 中。这是获取最佳间距所必需的。
 
     
向所有的文本元素 、 和 <select> 添加 class <em>.form-control</em>。</li> 
    </ul> 
    <div class="cnblogs_code"> 
     <pre><form role=<span style="color:#800000;">"</span><span style="color:#800000;">form</span><span style="color:#800000;">"</span>>
                <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
                    <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">name</span><span style="color:#800000;">"</span>>名称</label>
                    <input type=<span style="color:#800000;">"</span><span style="color:#800000;">text</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-control</span><span style="color:#800000;">"</span> id=<span style="color:#800000;">"</span><span style="color:#800000;">name</span><span style="color:#800000;">"</span><span style="color:#000000;">
                        placeholder</span>=<span style="color:#800000;">"</span><span style="color:#800000;">请输入名称</span><span style="color:#800000;">"</span>>
                </div>
                <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
                    <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">inputfile</span><span style="color:#800000;">"</span>>文件输入</label>
                    <input type=<span style="color:#800000;">"</span><span style="color:#800000;">file</span><span style="color:#800000;">"</span> id=<span style="color:#800000;">"</span><span style="color:#800000;">inputfile</span><span style="color:#800000;">"</span>>
                    <p <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">help-block</span><span style="color:#800000;">"</span>>这里是块级帮助文本的实例。</p>
                </div>
                <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">checkbox</span><span style="color:#800000;">"</span>>
                    <label>
                        <input type=<span style="color:#800000;">"</span><span style="color:#800000;">checkbox</span><span style="color:#800000;">"</span>><span style="color:#000000;">
                        请打勾
                    </span></label>
                </div>
                <button type=<span style="color:#800000;">"</span><span style="color:#800000;">submit</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">btn btn-default</span><span style="color:#800000;">"</span>>提交</button>
            </form></pre> 
    </div> 
    <p>显示效果：</p> 
    <p><a href="http://img.e-com-net.com/image/info8/61f5ef81600b4bf48e75e5b59c765905.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/61f5ef81600b4bf48e75e5b59c765905.jpg" alt="bootstrap学习笔记--bootstrap组件_第7张图片" width="650" height="149" style="border:1px solid black;"></a></p> 
    <h3>内联表单</h3> 
    <p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class <em>.form-inline</em>。</p> 
    <div class="cnblogs_code"> 
     <pre><form role=<span style="color:#800000;">"</span><span style="color:#800000;">form</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-inline</span><span style="color:#800000;">"</span>>
                <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
                    <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">name</span><span style="color:#800000;">"</span>>名称</label>
                    <input type=<span style="color:#800000;">"</span><span style="color:#800000;">text</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-control</span><span style="color:#800000;">"</span> id=<span style="color:#800000;">"</span><span style="color:#800000;">name</span><span style="color:#800000;">"</span><span style="color:#000000;">
                        placeholder</span>=<span style="color:#800000;">"</span><span style="color:#800000;">请输入名称</span><span style="color:#800000;">"</span>>
                </div>
                <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
                    <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">inputfile</span><span style="color:#800000;">"</span>>文件输入</label>
                    <input type=<span style="color:#800000;">"</span><span style="color:#800000;">file</span><span style="color:#800000;">"</span> id=<span style="color:#800000;">"</span><span style="color:#800000;">inputfile</span><span style="color:#800000;">"</span>>
                    <p <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">help-block</span><span style="color:#800000;">"</span>>这里是块级帮助文本的实例。</p>
                </div>
                <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">checkbox</span><span style="color:#800000;">"</span>>
                    <label>
                        <input type=<span style="color:#800000;">"</span><span style="color:#800000;">checkbox</span><span style="color:#800000;">"</span>><span style="color:#000000;">
                        请打勾
                    </span></label>
                </div>
                <button type=<span style="color:#800000;">"</span><span style="color:#800000;">submit</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">btn btn-default</span><span style="color:#800000;">"</span>>提交</button>
            </form></pre> 
    </div> 
    <p>显示效果：</p> 
    <p><a href="http://img.e-com-net.com/image/info8/4a1858449fa54ddea145bf5e2b634ecf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4a1858449fa54ddea145bf5e2b634ecf.jpg" alt="" width="650" height="62"></a></p> 
    <ul class="list"> 
     <li>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。</li> 
     <li>使用 class <em>.sr-only</em>，您可以隐藏内联表单的标签。</li> 
    </ul> 
    <h3>水平表单</h3> 
    <p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p> 
    <ul class="list"> 
     <li>向父 <form> 元素添加 class <em>.form-horizontal</em>。</li> 
     <li>把标签和控件放在一个带有 class <em>.form-group</em> 的 <div> 中。</li> 
     <li>向标签添加 class <em>.control-label</em>。</li> 
    </ul> 
    <div class="cnblogs_code"> 
     <pre><form <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-horizontal</span><span style="color:#800000;">"</span> role=<span style="color:#800000;">"</span><span style="color:#800000;">form</span><span style="color:#800000;">"</span>>
   <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
      <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">firstname</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">col-sm-2 control-label</span><span style="color:#800000;">"</span>>名字</label>
      <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">col-sm-10</span><span style="color:#800000;">"</span>>
         <input type=<span style="color:#800000;">"</span><span style="color:#800000;">text</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-control</span><span style="color:#800000;">"</span> id=<span style="color:#800000;">"</span><span style="color:#800000;">firstname</span><span style="color:#800000;">"</span><span style="color:#000000;"> 
            placeholder</span>=<span style="color:#800000;">"</span><span style="color:#800000;">请输入名字</span><span style="color:#800000;">"</span>>
      </div>
   </div>
   <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
      <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">lastname</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">col-sm-2 control-label</span><span style="color:#800000;">"</span>>姓</label>
      <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">col-sm-10</span><span style="color:#800000;">"</span>>
         <input type=<span style="color:#800000;">"</span><span style="color:#800000;">text</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-control</span><span style="color:#800000;">"</span> id=<span style="color:#800000;">"</span><span style="color:#800000;">lastname</span><span style="color:#800000;">"</span><span style="color:#000000;"> 
            placeholder</span>=<span style="color:#800000;">"</span><span style="color:#800000;">请输入姓</span><span style="color:#800000;">"</span>>
      </div>
   </div>
   <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
      <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">col-sm-offset-2 col-sm-10</span><span style="color:#800000;">"</span>>
         <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">checkbox</span><span style="color:#800000;">"</span>>
            <label>
               <input type=<span style="color:#800000;">"</span><span style="color:#800000;">checkbox</span><span style="color:#800000;">"</span>><span style="color:#000000;"> 请记住我
            </span></label>
         </div>
      </div>
   </div>
   <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
      <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">col-sm-offset-2 col-sm-10</span><span style="color:#800000;">"</span>>
         <button type=<span style="color:#800000;">"</span><span style="color:#800000;">submit</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">btn btn-default</span><span style="color:#800000;">"</span>>登录</button>
      </div>
   </div>
</form></pre> 
    </div> 
    <p>显示效果：</p> 
    <p><a href="http://img.e-com-net.com/image/info8/9c73092c1a244ff1a9839c2c898f8896.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9c73092c1a244ff1a9839c2c898f8896.jpg" alt="bootstrap学习笔记--bootstrap组件_第8张图片" width="650" height="139" style="border:1px solid black;"></a></p> 
    <h2 class="tutheader">支持的表单控件</h2> 
    <p>Bootstrap 支持最常见的表单控件，主要是 <em>input、textarea、checkbox、radio 和 select</em>。</p> 
    <h3>输入框（Input）</h3> 
    <p>最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：<em>text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel</em>和 <em>color</em>。适当的 <em>type</em> 声明是必需的，这样才能让 <em>input</em> 获得完整的样式。</p> 
    <div class="cnblogs_code"> 
     <pre><form role=<span style="color:#800000;">"</span><span style="color:#800000;">form</span><span style="color:#800000;">"</span>>
  <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
    <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">name</span><span style="color:#800000;">"</span>>标签</label>
    <input type=<span style="color:#800000;">"</span><span style="color:#800000;">text</span><span style="color:#800000;">"</span> <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-control</span><span style="color:#800000;">"</span> placeholder=<span style="color:#800000;">"</span><span style="color:#800000;">文本输入</span><span style="color:#800000;">"</span>>
  </div>
 </form></pre> 
    </div> 
    <p>显示效果：</p> 
    <p><a href="http://img.e-com-net.com/image/info8/78ff31a29ba1451a95278c5a0c047c53.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/78ff31a29ba1451a95278c5a0c047c53.jpg" alt="" width="650" height="52"></a></p> 
    <h3>文本框（Textarea）</h3> 
    <p>当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 <em>rows</em> 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。</p> 
    <div class="cnblogs_code"> 
     <pre><form role=<span style="color:#800000;">"</span><span style="color:#800000;">form</span><span style="color:#800000;">"</span>>
  <div <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-group</span><span style="color:#800000;">"</span>>
    <label <span style="color:#0000ff;">for</span>=<span style="color:#800000;">"</span><span style="color:#800000;">name</span><span style="color:#800000;">"</span>>文本框</label>
    <textarea <span style="color:#0000ff;">class</span>=<span style="color:#800000;">"</span><span style="color:#800000;">form-control</span><span style="color:#800000;">"</span> rows=<span style="color:#800000;">"</span><span style="color:#800000;">3</span><span style="color:#800000;">"</span>>
  
 
     
    
显示效果：
 
    
 
    
复选框（（Checkbox）和单选框（Radio）
 
    
复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
 
    
 
     
当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
 
     
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
 
    
 
    
 
     
for="name">默认的复选框和单选按钮的实例
class="checkbox">
   "checkbox" value="">选项 1

class="checkbox">
   "checkbox" value="">选项 2


class="radio">
   
      "radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 选项 1
   

class="radio">
   
      "radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         选项 2 - 选择它将会取消选择选项 1
   

for="name">内联的复选框和单选按钮的实例

   class="checkbox-inline">
      "checkbox" id="inlineCheckbox1" value="option1"> 选项 1
   
   class="checkbox-inline">
      "checkbox" id="inlineCheckbox2" value="option2"> 选项 2
   
   class="checkbox-inline">
      "checkbox" id="inlineCheckbox3" value="option3"> 选项 3
   
   class="checkbox-inline">
      "radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 选项 1
   
   class="checkbox-inline">
      "radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 选项 2
   
 
    
 
    
显示效果：
 
    
 
    
选择框（Select）
 
    
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
 
    
 
     
使用  展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。 
     
使用 multiple="multiple" 允许用户选择多个选项。
 
     
    
 
     
"form">
   
class="form-group">
      for="name">选择列表
      <select class="form-control">
         1
         2
         3
         4
         5
      select>

      for="name">可多选的选择列表
      <select multiple class="form-control">
         1
         2
         3
         4
         5
      select>
   
 
    
 
    
显示效果：
 
    
 
    
静态控件
 
    
当您需要在一个水平表单内的表单标签后放置纯文本时，请在 
 上使用 class .form-control-static。
 
    
 
     
class="form-horizontal" role="form">
  
class="form-group">
    class="col-sm-2 control-label">Email
    
class="col-sm-10">
      
class="form-control-static">[email protected]
    
  
  
class="form-group">
    for="inputPassword" class="col-sm-2 control-label">密码
    
class="col-sm-10">
      "password" class="form-control" id="inputPassword" 
         placeholder="请输入密码">
    
  
 
     
    
显示效果：
 
    
 
    
表单控件状态
 
    
除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
 
    
输入框焦点
 
    
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
 
    
禁用的输入框 input
 
    
如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
 
    
禁用的字段集 fieldset
 
    
对 
 添加 disabled 属性来禁用 
 内的所有控件。
 
    
验证状态
 
    
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
 
    
 
     
class="form-horizontal" role="form">
   
class="form-group">
      class="col-sm-2 control-label">聚焦
      
class="col-sm-10">
         class="form-control" id="focusedInput" type="text" 
            value="该输入框获得焦点...">
      
   
   
class="form-group">
      for="inputPassword" class="col-sm-2 control-label">
         禁用
      
      
class="col-sm-10">
         class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框禁止输入..." disabled>
      
   
   

      
class="form-group">
         for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入（Fieldset disabled）
         
         
class="col-sm-10">
            "text" id="disabledTextInput" class="form-control" 
               placeholder="禁止输入">
         
      
      
class="form-group">
         for="disabledSelect"  class="col-sm-2 control-label">
            禁用选择菜单（Fieldset disabled）
         
         
class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               禁止选择
            select>
         
      
   
   
class="form-group has-success">
      class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      
      
class="col-sm-10">
         "text" class="form-control" id="inputSuccess">
      
   
   
class="form-group has-warning">
      class="col-sm-2 control-label" for="inputWarning">
         输入警告
      
      
class="col-sm-10">
         "text" class="form-control" id="inputWarning">
      
   
   
class="form-group has-error">
      class="col-sm-2 control-label" for="inputError">
         输入错误
      
      
class="col-sm-10">
         "text" class="form-control" id="inputError">
      
   
 
    
 
    
显示效果：
 
    
 
    
表单控件大小
 
    
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。
 
    
 
     
"form">
   
class="form-group">
      class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   

   
class="form-group">
      class="form-control" type="text" placeholder="默认输入">
   

   
class="form-group">
      class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   
   
class="form-group">
   
   
class="form-group">
      <select class="form-control input-lg">
         "">.input-lg
      select>
   
   
class="form-group">
      <select class="form-control">
         "">默认选择
      select>
   
   
class="form-group">
      <select class="form-control input-sm">
         "">.input-sm
      select>
   

   
class="row">
      
class="col-lg-2">
         "text" class="form-control" placeholder=".col-lg-2">
      
      
class="col-lg-3">
         "text" class="form-control" placeholder=".col-lg-3">
      
      
class="col-lg-4">
         "text" class="form-control" placeholder=".col-lg-4">
      
   
 
    
 
    
显示效果：
 
    
 
    
表单帮助文本
 
    
Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在  后使用 .help-block。
 
    
 
     
"form">
   帮助文本实例
   class="form-control" type="text" placeholder="">
   class="help-block">一个较长的帮助文本块，超过一行，
   需要扩展到下一行。本实例中的帮助文本总共有两行。
 
    
 
    
显示效果：
 
    
 
    
4.Bootstrap 按钮
 
    
以下样式可用于, , 或  元素上：
 
    
 
     
 
      
 
       
类
 
       
描述
 
      
 
      
 
       
.btn
 
       
为按钮添加基本样式
 
      
 
      
 
       
.btn-default
 
       
默认/标准按钮
 
      
 
      
 
       
.btn-primary
 
       
原始按钮样式（未被操作）
 
      
 
      
 
       
.btn-success
 
       
表示成功的动作
 
      
 
      
 
       
.btn-info
 
       
该样式可用于要弹出信息的按钮
 
      
 
      
 
       
.btn-warning
 
       
表示需要谨慎操作的按钮
 
      
 
      
 
       
.btn-danger
 
       
表示一个危险动作的按钮操作
 
      
 
      
 
       
.btn-link
 
       
让按钮看起来像个链接 (仍然保留按钮行为)
 
      
 
      
 
       
.btn-lg
 
       
制作一个大按钮
 
      
 
      
 
       
.btn-sm
 
       
制作一个小按钮
 
      
 
      
 
       
.btn-xs
 
       
制作一个超小按钮
 
      
 
      
 
       
.btn-block
 
       
块级按钮(拉伸至父元素100%的宽度)
 
      
 
      
 
       
.active
 
       
按钮被点击
 
      
 
      
 
       
.disabled
 
       
禁用按钮
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
     

"button" class="btn btn-default">默认按钮


"button" class="btn btn-primary">原始按钮


"button" class="btn btn-success">成功按钮


"button" class="btn btn-info">信息按钮


"button" class="btn btn-warning">警告按钮


"button" class="btn btn-danger">危险按钮


"button" class="btn btn-link">链接按钮 
     
    
显示效果：
 
    
 
    
按钮大小
 
    
下表列出了获得各种大小按钮的 class：
 
    
 
     
 
      
 
       
Class
 
       
描述
 
      
 
      
 
       
.btn-lg
 
       
这会让按钮看起来比较大。
 
      
 
      
 
       
.btn-sm
 
       
这会让按钮看起来比较小。
 
      
 
      
 
       
.btn-xs
 
       
这会让按钮看起来特别小。
 
      
 
      
 
       
.btn-block
 
       
这会创建块级的按钮，会横跨父元素的全部宽度。
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
     

   "button" class="btn btn-primary btn-lg">
      大的原始按钮
   
   "button" class="btn btn-default btn-lg">
      大的按钮
   


   "button" class="btn btn-primary">
      默认大小的原始按钮
   
   "button" class="btn btn-default">
      默认大小的按钮
   


   "button" class="btn btn-primary btn-sm">
      小的原始按钮
   
   "button" class="btn btn-default btn-sm">
      小的按钮
   


   "button" class="btn btn-primary btn-xs">
      特别小的原始按钮
   
   "button" class="btn btn-default btn-xs">
      特别小的按钮
   


   "button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮
   
   "button" class="btn btn-default btn-lg btn-block">
      块级的按钮
   
 
    
 
    
显示效果：
 
    
 
    
按钮状态
 
    
Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。
 
    
激活状态
 
    
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
 
    
下表列出了让按钮元素和锚元素呈激活状态的 class：
 
    
 
     
 
      
 
       
元素
 
       
Class
 
      
 
      
 
       
按钮元素
 
       
添加 .active class 来显示它是激活的。
 
      
 
      
 
       
锚元素
 
       
添加 .active class 到  按钮来显示它是激活的。
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
     

   "button" class="btn btn-default btn-lg ">
      默认按钮
   
   "button" class="btn btn-default btn-lg active">
      激活按钮
   


   "button" class="btn btn-primary btn-lg ">
      原始按钮
   
   "button" class="btn btn-primary btn-lg active">
      激活的原始按钮
   
 
    
 
    
显示效果：
 
    
 
    
禁用状态
 
    
当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
 
    
下表列出了让按钮元素和锚元素呈禁用状态的 class：
 
    
 
     
 
      
 
       
元素
 
       
Class
 
      
 
      
 
       
按钮元素
 
       
添加 disabled 属性 到  按钮。
 
      
 
      
 
       
锚元素
 
       
添加 disabled class 到  按钮。
注意：该 class 只会改变  的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。
 
      
 
     
 
    
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
     

   "button" class="btn btn-default btn-lg">
      默认按钮
   
   "button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮
   


   "button" class="btn btn-primary btn-lg ">
      原始按钮
   
   "button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按钮
   


   "#" class="btn btn-default btn-lg" role="button">
      链接
   
   "#" class="btn btn-default btn-lg disabled" role="button">
      禁用链接
   


   "#" class="btn btn-primary btn-lg" role="button">
      原始链接
   
   "#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始链接
   
 
    
 
    
显示效果：
 
    
 
    
   
  
转载于:https://www.cnblogs.com/suzhiyong1988/p/5109004.html
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                
            
        
    
    

        
你可能感兴趣的:(bootstrap学习笔记--bootstrap组件)
        

            

                

                    
vue3当中使用Pinia的store的组件化开发模式
                        堕落年代
vuevue.js
                        
一、安装与初始化安装Pinianpminstallpinia#或yarnaddpinia目的：引入Pinia核心库，为状态管理提供基础支持。挂载Pinia实例在main.js中初始化并注入Vue应用：import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(A
                    
                    
vue3使用swiper7
                        我承认都是月亮惹的祸
使用第三方库vue.js前端javascript
                        
vue3中使用swiper7基本使用swiper导入Swiper导入组件import{Swiper,SwiperSlide}from'swiper/vue/swiper-vue.js';导入需要使用到swiper的组件模块importSwiperCore,{Navigation,A11y}from'swiper';这里导入了Navigation模块,也就是使用左右箭头来导航.与A11y是一个无障碍
                    
                    
Kafka系列之—向Kafka 写入数据（四）
                        葛旭朋
Kafkakafka分布式java
                        
一，创建Kafka生产者1.1必选的三个属性1.1.1bootstrap.servers指定broker的地址清单，不需要包含所有的broker地址，生产者会从给定的broker里找到其它broker的信息，建议最少提供两个broker的信息。1.1.2key.serializerbroker希望接收到的消息的键和值都是字节数组。1.1.3value.serializer指定的类会将值序列化。1.
                    
                    
如何创建HTML自定义元素：使用 Web Component 的最佳实践
                        乐闻x
WebComponent学习记录前端htmlwebcomponent
                        
什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
                    
                    
工业相机的主要参数及计算
                        51camera
工业相机
                        
工业相机是机器视觉系统中的关键组件，其本质是将光信号转变为有序的电信号，进而实现数字图像的获取，广泛应用于工业生产、检测、测量等领域。其成像原理与小孔成像类似，但更为复杂。当被摄物体反射的光线通过工业镜头折射后，会投射到相机的感光传感器上，这个感光传感器通常是电荷耦合器件（CCD）或互补金属氧化物半导体（CMOS）。dalsanano系列工业相机1、工作原理图像采集：通过镜头收集被拍摄物体反射或透
                    
                    
使用 Vue 2.x + Element UI 搭建后台管理系统详解
                        不知名靓仔
vue.jsui前端
                        
引言Vue.js是一个非常流行的前端框架，而ElementUI是基于Vue2.x的一套完整的UI组件库，非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用Vue2.x和ElementUI来搭建一个后台管理系统，包括项目初始化、路由配置、状态管理、权限验证等关键步骤。vue2后台管理项目源码合集下载地址见最下方1.环境准备确保你的开发环境中已安装Node.js和npm。接下来，我们将使用V
                    
                    
vue2实现表格拖拽功能。整列的数据可以随意拖拽排序，但是行的拖拽只影响当前列
                        火炬冬天
vue.jsjavascriptelementui
                        
概述本文介绍基于Vue2实现的表格组件，支持以下核心功能：列拖拽排序（整列位置交换）行拖拽排序（每列内部独立排序）自适应列宽与内容溢出提示可视化拖拽反馈效果数据与视图的自动同步功能演示源码分享{{column.label}}-->⠿{{data[rowIndex][column.prop]}}importdraggablefrom'vuedraggable';exportdefault{compo
                    
                    
微信小程序：修改提示信息placeholder颜色
                        25号底片~
微信小程序微信小程序小程序
                        
方法一：使用placeholder-style直接在input或textarea组件中使用placeholder-style属性来设置placeholder的样式。或者：方法二：使用placeholder-class你也可以通过placeholder-class属性来指定一个类名，然后在对应的.wxss文件中定义这个类的样式。wxss.custom-placeholder{color:#999;f
                    
                    
element ui 封装Table组件
                        沃野_juededa
ui
                        
1.首先npmielement-ui-S安装element-ui2.引入Element在main.js中写入以下内容：importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);n
                    
                    
推荐开源项目：Tower - 网络服务构建利器
                        劳治亮

                        
推荐开源项目：Tower-网络服务构建利器towerasyncfn(Request)->Result项目地址:https://gitcode.com/gh_mirrors/to/towerTower是一个为构建强大、模块化和可重用的网络客户端和服务端组件库。这个库以其高效且易于使用的特性，为开发者提供了一种便捷的方式去构建可靠的网络应用。项目介绍Tower面向的是那些希望简化网络通信复杂性的开发者
                    
                    
vue中ref解析
                        肉肉不吃 肉
vue.jsjavascript前端
                        
在Vue项目中，ref是一个非常重要的概念，用于创建对DOM元素或组件实例的引用。它在多种场景下都非常有用，特别是在需要直接操作DOM或与子组件进行交互时。ref的作用1.获取DOM元素使用ref可以获取到模板中的DOM元素，并对其进行操作。创建了一个对组件的引用，可以在脚本中通过loginForm.value访问该元素。示例：constloginForm=ref(null)//在setup函数中
                    
                    
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例3，TableView15_03导出全部数据示例
                        宝码香车
#DeepSeekjavascript前端开发语言vue.jsDeepSeekecmascript
                        
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加导出数据功能示例3，TableView15_03导出全部数据示例前言页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写
                    
                    
React学习笔记20
                        充气大锤
React学习笔记学习笔记javascript前端算法开发语言react.js
                        
一、React.forward1.1、作用通过ref暴露子组件的DOM1.2、场景说明1.3、语法实现//子组件constInput=forwardRef((props,ref)=>{return})//父组件functionfather_component(){constinputRef=useRef(null)constfocus=(ref)=>{ref.current.focus()}ret
                    
                    
Autoformer 架构详细解释及举例说明
                        six.学长
autoformer人工智能
                        
Autoformer架构详细解释上述图片展示了Autoformer架构的工作流程，包含编码器和解码器的结构。我们来详细解析图中的各个组件及其功能：编码器部分（AutoformerEncoder）输入数据（EncoderInput）：输入的是需要预测的时间序列数据。自动相关机制（Auto-Correlation）：这个模块通过检测时间序列中的周期性依赖关系，生成相关矩阵（K,Q,V表示键、查询和值）
                    
                    
react加antd封装表格单、多选组件，支持跨页选择缓存
                        Cirrod
react.js缓存javascript
                        
页面效果子组件importReact,{useState,useEffect,forwardRef,useImperativeHandle}from'react';import{Modal,Input,Table,Pagination,Avatar,Select}from'antd';import{UserOutlined}from'@ant-design/icons';importtype{Ta
                    
                    
字符串模板（单文件组件、JSX）
                        By爱分享
vue.jsjavascript前端
                        
首先需要了解基本释义：字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。此外，字符串模板不会在页面初始化时参与页面的渲染，而是会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名总的来说，推荐遵循W3C中的自定义组件名(字母全小写且必须包含一个连字符)，这会帮助你避免和当前以及未来的HTML元素相
                    
                    
AUTOSAR与arxml的文档解析
                        dont__cry
c语言autosar
                        
如下是文档脑图一、文档概述该文档是AUTOSAR经典平台的应用接口用户指南，主要解释**AlTable（应用接口表）**的结构、方法论及相关技术细节，帮助开发者理解如何通过标准化接口实现软件组件的互操作性。关键内容目的：定义并发布稳定、广泛接受的汽车电子系统应用接口，支持跨厂商软件组件的通信。结构：包含元模型表示、兼容性管理、生命周期状态、视图概念及XML生成规则等。二、核心概念与示例1.AUTO
                    
                    
提到一个项目的“验证LOV”属性？提到lov和list项目有什么区别？思维导图 代码示例（java 架构)
                        用心去追梦
listjava架构
                        
验证LOV（ListofValues）属性在OracleForms中，LOV(ListofValues)是一种用于显示可供选择的值列表的组件。它通常与字段或项关联，允许用户从预定义的选项列表中选择一个值，而不是手动输入。验证LOV属性确保用户只能从LOV提供的选项中选择值，从而增强了数据输入的准确性和一致性。验证LOV属性定义：当设置为“是”时，表示该字段必须从LOV中选择值；如果用户尝试输入不在
                    
                    
鸿蒙Next，图片上传01（扩展02截图保存到相册）-组件截图另通过沙箱保存到相册
                        
harmonyos
                        
1.componentSnapShot组件截图的get方法，得到PixelMap像素图像数据@ohos.arkui.componentSnapshot(组件截图)-UI界面-ArkTSAPI-ArkUI（方舟UI框架）-应用框架-华为HarmonyOS开发者//进行截图constpixelMap=awaitcomponentSnapshot.get('share')2.ImagePacker打包P
                    
                    
基于粒子滤波与卡尔曼滤波的锂离子电池放电时间预测与使用特征研究
                        算法如诗
电池建模(RULBC)粒子滤波锂离子电池放电时间预测
                        
基于粒子滤波与卡尔曼滤波的锂离子电池放电时间预测与使用特征研究一、研究背景与意义锂离子电池作为现代储能系统的核心组件，其放电时间（End-of-DischargeTime,EOD）的准确预测对电池管理系统（BMS）的可靠性和安全性至关重要。传统方法（如安时积分法）易受噪声、温度漂移等因素干扰，而基于状态估计的滤波算法（粒子滤波/PF、卡尔曼滤波/KF）通过动态更新模型参数，能显著提升预测精度。二、
                    
                    
OpenManus 代码分析
                        有个人神神叨叨
人工智能ai
                        
项目分析：OpenManus这是github地址OpenManus是一个基于LLM（大型语言模型）的智能代理系统，它采用了模块化的设计，支持工具调用、规划和执行等功能。下面我将通过时序图和流程图来详细分析整个系统的工作流程。系统架构OpenManus采用了分层架构设计，主要包括以下几个核心组件：Agent层：实现了不同类型的智能代理，包括基础代理（BaseAgent）、ReAct代理（ReActA
                    
                    
华为OD2023(A卷)基础题21【日志采集系统】
                        大司码
算法华为od
                        
日志采集系统题目日志采集是运维系统的的核心组件。日志是按行生成，每行记做一条，由采集系统分批上报。如果上报太频繁，会对服务端造成压力；如果上报太晚，会降低用户的体验；如果一次上报的条数太多，会导致超时失败。为此，项目组设计了如下的上报策略：每成功上报一条日志，奖励1分每条日志每延迟上报1秒，扣1分积累日志达到100条，必须立即上报给出日志序列，根据该规则，计算首次上报能获得的最多积分数。输入按时序
                    
                    
Jetpack组件在MVVM架构中的应用
                        Ya-Jun
架构android
                        
Jetpack组件在MVVM架构中的应用一、引言Jetpack是Android官方推出的一套开发组件工具集，它能够帮助开发者构建高质量、可维护的Android应用。本文将深入探讨Jetpack核心组件在MVVM架构中的应用。二、ViewModel组件2.1ViewModel基本原理ViewModel是MVVM架构中最重要的组件之一，它具有以下特点：生命周期感知数据持久化避免内存泄漏2.2ViewM
                    
                    
华为OD机试真题----日志采集(java)
                        努力努力再努力呐
算法华为od算法数据结构java
                        
华为OD机试真题中的“日志采集”是一个重要的题目，它主要考察的是如何在满足特定条件下，优化日志上报策略以获取最大积分。以下是对该题目的详细解析：一、题目背景日志采集是运维系统的核心组件，日志是按行生成，每行记做一条，由采集系统分批上报。上报策略的设计需要平衡多个因素：上报频率、服务端压力、用户体验以及避免超时失败。二、上报策略根据题目描述，项目组设计了以下上报策略：奖励机制：每成功上报一条日志，奖
                    
                    
在Ubuntu上安装MEAN Stack的4个步骤
                        Kaede6
技术文章-Linux服务部署ubuntulinux运维
                        
在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用
                    
                    
C++学习笔记:函数重载及函数模板
                        etp_
c++学习笔记
                        
函数重载默认参数能让你使用不同数目的参数调用同一个函数，而函数多态（函数重载）能让你使用多个同名函数。----一般完成类似的工作，但一定使用不同的参数列表（函数特征标）。下面定义一组原型如下的print()函数voidprint(constchar*str,intwidth);voidprint(doubled,intwidth);voidprint(longl,intwidth);编译器根据参数
                    
                    
华为OD机试 - 日志采集系统（Python/JS/C/C++ 2024 E卷 100分）
                        哪 吒
华为odpythonjavascript
                        
华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述日志采集是运维系统的的核心组件。日志是按行生成，每行记做一条，由
                    
                    
如何基于Gone编写一个Goner对接Apollo配置中心（上）—— 实现统一管理配置和监控配置变化
                        dapeng-大鹏
Gone框架介绍golanggone配置中心微服务Apollo
                        
项目地址：https://github.com/gone-io/gone原文地址：https://github.com/gone-io/goner/blob/main/docs/build_goner.md本文介绍的例子，代码在：https://github.com/gone-io/goner/blob/main/apollo文章目录引言Gone框架与Goner组件简介Apollo配置中心简介编写
                    
                    
JAVA：网络编程 Socket 的技术指南
                        拾荒的小海螺
JAVAjava网络开发语言
                        
1、简述JavaNIO（Non-blockingI/O）是一种基于通道（Channel）和缓冲区（Buffer）的I/O模型，支持非阻塞通信和多路复用，适合高并发场景。相比传统的阻塞I/O（BIO），NIO更高效，因为它避免了线程被阻塞，降低了系统资源消耗。代码样例：https://gitee.com/lhdxhl/springboot-example.git核心组件：Channel（通道）：数据
                    
                    
Vue2 - 详解实现网站使用企业微信二维码扫描登录，企业微信授权第三方网站接入企业微信登陆功能，扫二维码登录后获取用户信息，登录页展示企业微信二维码或iframe新开一页或弹框，解决各种报错登录失败
                        王二红
+Vue企业微信网站授权企业微信扫码登录最新vue2.jsnuxt2.js如何在新窗口弹出企业微信二维码解决显示报错回调错误无法渲染vue企业微信扫一扫二维码登录
                        
前言如果您需要Vue3版本，请访问这篇文章。在vue2|nuxt2网站开发中，详解实现网页集成使用“企业微信扫一扫登录”功能，用户使用手机企业微信app扫描网站的登录二维码后，获取用户身份信息及号码并完成授权登录教程，新手小白完整流程及示例运行代码，支持多种企业微信二维码“展现方式”，可构造独立窗口登录二维码(iframe一个小弹框网页窗口或浏览器新页签全屏展示)、内嵌登录二维码(放到弹框组件中或
                    
                                
解读Servlet原理篇二---GenericServlet与HttpServlet
                                    周凡杨
javaHttpServlet源理GenericService源码
                                    
在上一篇《解读Servlet原理篇一》中提到，要实现javax.servlet.Servlet接口（即写自己的Servlet应用），你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ，也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet（这就是为什么我们自定义的Servlet通常是exte
                                
                                
MySQL性能优化
                                    bijian1013
数据库mysql
                                    
        性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间。性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等。本文介绍方法的主要有： 
        a.优化查询 
        b.优化数据库结构 
  
                                
                                
ThreadPool定时重试
                                    dai_lm
javaThreadPoolthreadtimertimertask
                                    
项目需要当某事件触发时，执行http请求任务，失败时需要有重试机制，并根据失败次数的增加，重试间隔也相应增加，任务可能并发。 
由于是耗时任务，首先考虑的就是用线程来实现，并且为了节约资源，因而选择线程池。 
为了解决不定间隔的重试，选择Timer和TimerTask来完成 
 
 

package threadpool;

public class ThreadPoolTest {


                                
                                
Oracle 查看数据库的连接情况
                                    周凡杨
sqloracle 连接
                                    
首先要说的是，不同版本数据库提供的系统表会有不同，你可以根据数据字典查看该版本数据库所提供的表。 
 
select * from dict where table_name like '%SESSION%'; 
就可以查出一些表，然后根据这些表就可以获得会话信息 
 
select sid,serial#,status,username,schemaname,osuser,terminal,ma
                                
                                
类的继承
                                    朱辉辉33
java
                                    
类的继承可以提高代码的重用行，减少冗余代码；还能提高代码的扩展性。Java继承的关键字是extends 
格式:public class 类名（子类）extends 类名（父类）{ } 
子类可以继承到父类所有的属性和普通方法，但不能继承构造方法。且子类可以直接使用父类的public和 
protected属性，但要使用private属性仍需通过调用。 
子类的方法可以重写，但必须和父类的返回值类
                                
                                
android 悬浮窗特效
                                    肆无忌惮_
android
                                    
最近在开发项目的时候需要做一个悬浮层的动画，类似于支付宝掉钱动画。但是区别在于，需求是浮出一个窗口，之后边缩放边位移至屏幕右下角标签处。效果图如下： 
  
一开始考虑用自定义View来做。后来发现开线程让其移动很卡，ListView+动画也没法精确定位到目标点。 
  
后来想利用Dialog的dismiss动画来完成。 
  
自定义一个Dialog后，在styl
                                
                                
hadoop伪分布式搭建
                                    林鹤霄
hadoop
                                    
要修改4个文件    1: vim hadoop-env.sh  第九行    2: vim core-site.xml            <configuration>     &n
                                
                                
gdb调试命令
                                    aigo
gdb
                                    
原文：http://blog.csdn.net/hanchaoman/article/details/5517362 
  
一、GDB常用命令简介 
     r run 运行.程序还没有运行前使用   c             cuntinue 
                                
                                
Socket编程的HelloWorld实例
                                    alleni123
socket
                                    
public class Client
{
	
	
	public static void main(String[] args)
	{	
		Client c=new Client();
	 	c.receiveMessage();
	}
	
	public void receiveMessage(){
		Socket s=null;
		
		BufferedRea
                                
                                
线程同步和异步
                                    百合不是茶
线程同步异步
                                    
多线程和同步 : 如进程、线程同步，可理解为进程或线程A和B一块配合，A执行到一定程度时要依靠B的某个结果，于是停下来，示意B运行；B依言执行，再将结果给A；A再继续操作。  所谓同步，就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回，同时其它线程也不能调用这个方法  
  
多线程和异步:多线程可以做不同的事情,涉及到线程通知 
  
  
&
                                
                                
JSP中文乱码分析
                                    bijian1013
javajsp中文乱码
                                    
        在JSP的开发过程中，经常出现中文乱码的问题。 
        首先了解一下Java中文问题的由来： 
        Java的内核和class文件是基于unicode的，这使Java程序具有良好的跨平台性，但也带来了一些中文乱码问题的麻烦。原因主要有两方面，
                                
                                
js实现页面跳转重定向的几种方式
                                    bijian1013
JavaScript重定向
                                    
        js实现页面跳转重定向有如下几种方式： 
一.window.location.href 
<script language="javascript"type="text/javascript"> 
	window.location.href="http://www.baidu.c
                                
                                
【Struts2三】Struts2 Action转发类型
                                    bit1129
struts2
                                    
 在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action，配置如下 
  
<!DOCTYPE struts PUBLIC  
        "-//Apache Software Foundation//DTD Struts Configurat
                                
                                
【HBase十一】Java API操作HBase
                                    bit1129
hbase
                                    
Admin类的主要方法注释： 
  1. 创建表 
 /**
   * Creates a new table. Synchronous operation.
   *
   * @param desc table descriptor for table
   * @throws IllegalArgumentException if the table name is res
                                
                                
nginx gzip
                                    ronin47
nginx gzip
                                    
Nginx GZip 压缩  
Nginx GZip 模块文档详见：http://wiki.nginx.org/HttpGzipModule 
常用配置片段如下：  
gzip on; gzip_comp_level 2; # 压缩比例，比例越大，压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q
                                
                                
java-7.微软亚院之编程判断俩个链表是否相交 给出俩个单向链表的头指针，比如 h1 ， h2 ，判断这俩个链表是否相交
                                    bylijinnan
java
                                    


public class LinkListTest {

	/**
	 * we deal with two main missions:
	 * 
	 * A.
	 * 1.we create two joined-List(both have no loop)
	 * 2.whether list1 and list2 join
	 * 3.print the join
                                
                                
Spring源码学习-JdbcTemplate batchUpdate批量操作
                                    bylijinnan
javaspring
                                    
Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法，Spring只是做了一下改造和封装 
 
JDBC的batch操作： 
 
 


String sql = "INSERT INTO CUSTOMER " +
				  "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
				
                                
                                
[JWFD开源工作流]大规模拓扑矩阵存储结构最新进展
                                    comsci
工作流
                                    
    生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出......... 
 
    竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....
                                
                                
base64编码和url编码
                                    cuityang
base64url
                                    
import java.io.BufferedReader; 
import java.io.IOException; 
import java.io.InputStreamReader; 
import java.io.PrintWriter; 
import java.io.StringWriter; 
import java.io.UnsupportedEncodingException; 
                                
                                
web应用集群Session保持
                                    dalan_123
session
                                    
关于使用 memcached 或redis 存储 session ，以及使用 terracotta 服务器共享。建议使用 redis，不仅仅因为它可以将缓存的内容持久化，还因为它支持的单个对象比较大，而且数据类型丰富，不只是缓存 session，还可以做其他用途，一举几得啊。1、使用 filter 方法存储这种方法比较推荐，因为它的服务器使用范围比较多，不仅限于tomcat ，而且实现的原理比较简
                                
                                
Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式']
                                    dcj3sjt126com
数据库
                                    
    public function getMinLimit () {        $sql = "...";        $result = yii::app()->db->createCo
                                
                                
solr StatsComponent（聚合统计）
                                    eksliang
solr聚合查询solr stats
                                    
StatsComponent 
转载请出自出处：http://eksliang.iteye.com/blog/2169134 
http://eksliang.iteye.com/ 一、概述 
       Solr可以利用StatsComponent 实现数据库的聚合统计查询，也就是min、max、avg、count、sum的功能 
  二、参数
                                
                                
百度一道面试题
                                    greemranqq
位运算百度面试寻找奇数算法bitmap 算法
                                    
那天看朋友提了一个百度面试的题目：怎么找出{1,1,2,3,3,4,4,4,5,5,5,5}  找出出现次数为奇数的数字. 
  
我这里复制的是原话，当然顺序是不一定的，很多拿到题目第一反应就是用map,当然可以解决，但是效率不高。 
  
还有人觉得应该用算法xxx,我是没想到用啥算法好...！ 
  
还有觉得应该先排序... 
  
还有觉
                                
                                
Spring之在开发中使用SpringJDBC
                                    ihuning
spring
                                    
  
在实际开发中使用SpringJDBC有两种方式： 
  
1. 在Dao中添加属性JdbcTemplate并用Spring注入； 
    JdbcTemplate类被设计成为线程安全的，所以可以在IOC 容器中声明它的单个实例，并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱，泛型，可变长度
                                
                                
JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节
                                    justjavac
json
                                    
2013年5月，Yehuda Katz 完成了JSON API(英文，中文) 技术规范的初稿。事情就发生在 RailsConf 之后，在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&
                                
                                
网站项目建设流程概述
                                    macroli
工作
                                    
一.概念 
网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。 
二.需求分析 
项目立项 
　　我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。 
客户的需求说明书 
　　第一步是需
                                
                                
AngularJs 三目运算 表达式判断
                                    qiaolevip
每天进步一点点学习永无止境众观千象AngularJS
                                    
事件回顾：由于需要修改同一个模板，里面包含2个不同的内容，第一个里面使用的时间差和第二个里面名称不一样，其他过滤器，内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not，继续追究其源码。 
var b = "{{",
      a = "}}";
        this.startSymbol = function(a) {

                                
                                
Spark算子：统计RDD分区中的元素及数量
                                    superlxw1234
sparkspark算子Spark RDD分区元素
                                    
关键字：Spark算子、Spark RDD分区、Spark RDD分区元素数量 
  
  
Spark RDD是被分区的，在生成RDD时候，一般可以指定分区的数量，如果不指定分区数量，当RDD从集合创建时候，则默认为该程序所分配到的资源的CPU核数，如果是从HDFS文件创建，默认为文件的Block数。 
  
可以利用RDD的mapPartitionsWithInd
                                
                                
Spring 3.2.x将于2016年12月31日停止支持
                                    wiselyman
Spring 3
                                    
      
        Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x（包含tomcat 6.x）的支持。在此之前spring团队将持续发布3.2.x的维护版本。 
  
       请大家及时准备及时升级到Spring 
                                
                                
fis纯前端解决方案fis-pure
                                    zccst
JavaScript
                                    
作者：zccst 
 
FIS通过插件扩展可以完美的支持模块化的前端开发方案，我们通过FIS的二次封装能力，封装了一个功能完备的纯前端模块化方案pure。 
 
 
1，fis-pure的安装 
$ fis install -g fis-pure 
$ pure -v 
0.1.4 
 
 
2，下载demo到本地 
git clone https://github.com/hefangshi/f
                                
                
            
        
    


    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.