sunqian_happy
sunqian_happy

Bootstrap图片轮播

Bootstrap提供了carousel插件，实现图片轮播非常方便。

代码

<code class="hljs xml has-numbering" style="display: block;
 padding: 0px; color: inherit; box-sizing: border-box;
 font-family: 'Source Code Pro', monospace;font-size:undefined;
 white-space: pre; border-radius: 0px; word-wrap: normal; 
background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); 
box-sizing: border-box;"><!DOCTYPE html></span> 
<span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">html</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">lang</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"en"</span>></span> 
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" 
style="box-sizing: border-box; 
color: rgb(102, 0, 102);">charset</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"UTF-8"</span>></span>
 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
<<span class="hljs-title" style="box-sizing: border-box;
 color: rgb(0, 0, 136);">title</span>></span>Document<span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">title</span>></span>
    <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span>
 <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box;
 color: rgb(0, 136, 0);">"http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"</span>
 <span class="hljs-attribute" style="box-sizing: border-box;
 color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"stylesheet"</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> 
<span class="hljs-attribute" 
style="box-sizing: border-box; 
color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://libs.baidu.com/jquery/2.0.0/jquery.min.js"</span>></span>
<span class="javascript" style="box-sizing: border-box;"></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">script</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" 
style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"</span>></span>
<span class="javascript" style="box-sizing: border-box;"></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">style</span> <span class="hljs-attribute" 
style="box-sizing: border-box; 
color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"text/css"</span>></span>
<span class="css" style="box-sizing: border-box;"> 
 <span class="hljs-tag" style="color: rgb(0, 0, 0); 
box-sizing: border-box;">img</span><span class="hljs-rules" 
style="box-sizing: border-box;">{
           <span class="hljs-rule" 
style="box-sizing: border-box;">
<span class="hljs-attribute" 
style="box-sizing: border-box;">margin</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);">
<span class="hljs-number" style="box-sizing: border-box;">0</span> auto</span></span>; 
 <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
   </span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span> 
<span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"carousel-example-generic"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"carousel slide"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">data-ride</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"carousel"</span>></span> 
 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">
<!-- Indicators --></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">ol</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"carousel-indicators"</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">li</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 102);">data-target</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"#carousel-example-generic"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">data-slide-to</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"active"</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">li</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">data-target</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"#carousel-example-generic"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">data-slide-to</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>
 <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">data-target</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"#carousel-example-generic"</span>
 <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">data-slide-to</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"2"</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title"
 style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box;
 color: rgb(0, 0, 136);">ol</span>></span> 
 <span class="hljs-comment" style="color: rgb(136, 0, 0);
 box-sizing: border-box;"><!-- Wrapper for slides --></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box;
 color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" 
style="box-sizing: border-box; 
color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"carousel-inner"</span> 
<span class="hljs-attribute" style="box-sizing: border-box;
 color: rgb(102, 0, 102);">role</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"listbox"</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box;
 color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box;
 color: rgb(0, 136, 0);">"item active"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"images/lunbo1.jpg"</span> <span class="hljs-attribute" style="box-sizing: border-box;
 color: rgb(102, 0, 102);">height</span>=<span class="hljs-value" style="box-sizing: border-box;
 color: rgb(0, 136, 0);">"266"</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"800"</span> <span class="hljs-attribute" style="box-sizing: border-box;
 color: rgb(102, 0, 102);">alt</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"..."</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"carousel-caption"</span>></span>
        ...
      <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box;
 color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"item"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"images/lunbo2.jpg"</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 102);">height</span>=<span class="hljs-value"
 style="box-sizing: border-box; color: rgb(0, 136, 0);">"266"</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"800"</span> <span class="hljs-attribute"
 style="box-sizing: border-box; color: rgb(102, 0, 102);">alt</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"..."</span>></span>
      <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box;
 color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box;
 color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"carousel-caption"</span>></span>
        ...
      <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"item"</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/lunbo3.jpg"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">height</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"266"</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"800"</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">alt</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"..."</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"carousel-caption"</span>></span>
        ... 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">div</span>></span>
    ...
  <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box;
 color: rgb(0, 0, 136);">div</span>></span>

  <span class="hljs-comment" style="color: rgb(136, 0, 0);
 box-sizing: border-box;"><!-- Controls --></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"left carousel-control"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#carousel-example-generic"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">role</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"button"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">data-slide</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"prev"</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"glyphicon glyphicon-chevron-left"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">aria-hidden</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
</<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"sr-only"</span>></span>Previous<span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span>></span>
  <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
  <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box;
 color: rgb(0, 136, 0);">"right carousel-control"</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"#carousel-example-generic"</span> 
<span class="hljs-attribute" style="box-sizing: border-box;
 color: rgb(102, 0, 102);">role</span>=<span class="hljs-value" style="box-sizing: border-box; 
color: rgb(0, 136, 0);">"button"</span> <span class="hljs-attribute" style="box-sizing: border-box;
color: rgb(102, 0, 102);">data-slide</span>=<span class="hljs-value" style="box-sizing: border-box;
 color: rgb(0, 136, 0);">"next"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102);
 box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"glyphicon glyphicon-chevron-right"</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">aria-hidden</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"sr-only"</span>></span>Next<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li></ul>

效果

可选参数

  • data-ride=”carousel”：加上可以自动播放，不加点击后才会播放。
  • 添加标题 
    标题写在 <div class="carousel-caption"></div>之间 
    例如：
<code class="hljs xml has-numbering" 
style="display: block; padding: 0px; color: inherit; box-sizing: border-box; 
font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; 
background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> 
<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=
<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"carousel-caption"</span>></span> 
 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">
<<span class="hljs-title" style="box-sizing: border-box; 
color: rgb(0, 0, 136);">h3</span>></span>果壳推书正式上线<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">h3</span>></span>
     <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>好书分享、经验交流
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code>

你可能感兴趣的:(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响应式开
  • 《实现 HTML 图片轮播效果》 小刘| html前端
    目录（一）HTML结构（二）CSS样式（三）JavaScript实现轮播逻辑一、轮播效果的重要性与应用场景在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。二、HTML轮播效果的实现分析以下是一个简单的HTML、CSS和JavaScript实现的图片轮播代码示例。（
  • 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网页设计案例 liyy614 javascript
    JavaScript在网页设计中扮演着重要的角色，能够实现动态效果和交互功能，提升用户体验。下面，我将通过一个具体的案例——“动态图片轮播”来展示JavaScript在网页设计中的应用。案例：动态图片轮播1.HTML结构动态图片轮播.carousel{width:600px;margin:50pxauto;overflow:hidden;}.carouselimg{width:100%;float
  • 前端框架有哪些？ 赎罪゛ 前端框架前端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
  • 适用于多种设备的的滑块幻灯片插件--jquery插件Swiper 吴杼恩 常用插件jquery插件Swiper
    今天为大家推荐一款支持多种设备（移动端，平板，pc端）的滑块幻灯片插。我测试的是ie7.下载后解压：在demos文件中有很多种常见的用法，根据自己的项目需要选择其中之一即可。下面是其中效果：使用方法1：引入jq库2：引入Swiper文件：3：引入Swipe基本样式：4：写入html：4.1：比较完整的html：左右箭头轮播图片轮播图片上的内容SlidewithHTMLYoucanputanyHTM
  • 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设置
  • 二分查找排序算法 周凡杨 java二分查找排序算法折半
    一：概念 二分查找又称 折半查找（ 折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而 查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表 分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步
  • java中的BigDecimal bijian1013 javaBigDecimal
            在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。         原文地址：http://blog.csdn.net/ugg/article/de
  • Shell echo命令详解 daizj echoshell
    Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义
  • Oracle DBA 简单操作 周凡杨 oracle dba sql
    --执行次数多的SQL select sql_text,executions from (      select sql_text,executions from v$sqlarea order by executions desc      ) where rownum<81;  &nb
  • 画图重绘 朱辉辉33 游戏
      我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。   在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们
  • 线程之初体验 西蜀石兰 线程
    一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。 之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。 线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。 你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja
  • linux集群互相免登陆配置 林鹤霄 linux
    配置ssh免登陆 1、生成秘钥和公钥    ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub    其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密    c
  • mysql : Lock wait timeout exceeded; try restarting transaction aigo mysql
    原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html   原因是你使用的InnoDB   表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错.   你可以把这个时间加长,或者优化存储
  • Socket编程 基本的聊天实现。 alleni123 socket
    public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi
  • 多线程监听器事件模式(一个简单的例子) 百合不是茶 线程监听模式
        多线程的事件监听器模式   监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到        创建多线程的事件监听器模式 思路:    1, 创建线程并启动,在创建线程的位置设置一个标记     2,创建队
  • spring InitializingBean接口 bijian1013 javaspring
    spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT
  • Oracle中询表的权限被授予给了哪些用户 bijian1013 oracle数据库权限
            Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"
  • 【Struts2五】Struts2 参数传值 bit1129 struts2
    Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上   一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言
  • 【Kafka十四】关于auto.offset.reset[Q/A] bit1129 kafka
    I got serveral questions about  auto.offset.reset. This configuration parameter governs how  consumer read the message from  Kafka when  there is no initial offset in ZooKeeper or
  • nginx gzip压缩配置 ronin47 nginx gzip 压缩范例
    nginx gzip压缩配置 更多 0 nginx gzip 配置   随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用
  • java-13.输入一个单向链表，输出该链表中倒数第 k 个节点 bylijinnan java
    two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head;
  • Spring源码学习-JdbcTemplate queryForObject bylijinnan javaspring
    JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查
  • [冰川时代]在冰川时代,我们需要什么样的技术? comsci 技术
         看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?      那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...   &nb
  • js 获取浏览器型号 cuityang js浏览器
    根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" content="text/html"/>     <meta name=
  • C# socks5详解 转 dalan_123 socketC#
    http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html  这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，
  • 运维 Centos问题汇总 dcj3sjt126com 云主机
    一、sh 脚本不执行的原因 sh脚本不执行的原因 只有2个 1.权限不够 2.sh脚本里路径没写完整。   二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom   三、查询连接数
  • Yii防注入攻击笔记 dcj3sjt126com sqlWEB安全yii
    网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号 这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl
  • MongoDB简介[一] eksliang mongodbMongoDB简介
    MongoDB简介 转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用        MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。        另外，不
  • zookeeper windows 入门安装和测试 greemranqq zookeeper安装分布式
    一、序言       以下是我对zookeeper 的一些理解：      zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。       栗子1号：       假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视
  • Spring之使用事务缘由(2-注解实现) ihuning spring
      Spring事务注解实现   1. 依赖包：     1.1 spring包：           spring-beans-4.0.0.RELEASE.jar           spring-context-4.0.0.
  • iOS App Launch Option 啸笑天 option
    iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。   launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节 。 1、若用户直接
  • jdk与jre的区别（_） macroli javajvmjdk
    简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。  JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。 如果安装了JDK，会发同你
  • Updates were rejected because the tip of your current branch is behind qiaolevip 学习永无止境每天进步一点点众观千象git
    $ git push joe prod-2295-1 To [email protected]:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to '[email protected]
  • [一起学Hive]之十四-Hive的元数据表结构详解 superlxw1234 hivehive元数据结构
    关键字：Hive元数据、Hive元数据表结构   之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。 本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。   文章最后面，会以一个示例来全面了解一下，
  • Spring 3.2.14，4.1.7，4.2.RC2发布 wiselyman Spring 3
      Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。   其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。   其中Spring 4.1.7主要包含这些更新内容。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他