cool hit counter Bootstrap Learning Documentation (IV)_Intefrankly

Bootstrap Learning Documentation (IV)


Bootstrap

modal box

Caution. 1、The pop-up layer must be placed in the body 2、No other layers can be nested inside the pop-up layer 3、After the pop-up layer comes out, the scroll bar of the page will be overwritten

  • modal pop-up layer parent
  • modal-dialog pop-up layer
  • modal-content The content area of the pop-up layer
  • modal-header The header area of the pop-up layer
  • modal-body The body area of the pop-up layer
  • modal-footer The bottom area of the pop-up layer
  • fade Gives the popup layer a motion effect, added to the popup layer parent

The sample code is as follows:

Modal boxes have sizes again, modal-lg large modal box, modal-sm small modal box, and by default, medium modal box.

<div class="container">
  <div class="row">
    <button class="btn btn-primary" data-toggle="modal" data-target=".myModal1">A small layer pops up</button>
    <button class="btn btn-primary" data-toggle="modal" data-target=".myModal2"> A large layer pops up</button>
    <button class="btn btn-primary" data-toggle="modal" data-target=".myModal3"> A small layer pops up</button>
  </div>
</div>

<div class="modal fade myModal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h4> Love the beauty of autumn</h4>
      </div>
      <div class="modal-body">
        <p> Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn</p>
        <p> Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal"> Are you sure</button>
      </div>
    </div>
  </div>
</div>


<div class="modal myModal2">
  <div class="modal-dialog  modal-lg"><!--modal-lg is used to set the size of the pop-up layer, It is necessary to givemodal-dialog layers-->
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h4> Love the beauty of autumn</h4>
      </div>
      <div class="modal-body">
        <p> Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn</p><p> Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal"> Are you sure</button>
      </div>
    </div>
  </div>
</div>

<div class="modal myModal3">
  <div class="modal-dialog  modal-sm"><!--modal-lg is used to set the size of the pop-up layer, It is necessary to givemodal-dialog layers-->
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h4> Love the beauty of autumn</h4>
      </div>
      <div class="modal-body">
        <p> Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn</p><p> Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn Love the beauty of autumn</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal"> Are you sure</button>
      </div>
    </div>
  </div>
</div>

Rolling Listening

steps: 1、 Whoever wants to roll has to add to it data-spy="scroll", And you need to add a data-target, This value should be associated with the parent of the navigation 2. Add an id or class to the parent of the navbar that matches the value of the data-target of the element to be scrolled, and add a class for navbar-collapse 3, each a tag inside the navigation needs to add on an anchor link, so that the scroll with the right number 4、The title of the content in the scrolling area should be added with the corresponding id, which is used to correspond with the anchor link of the navigation

The sample code is as follows:

The following code is taken from Bootstrap official website, Also need to give Rolling Listening Plus style, Otherwise it's still not effective, Not too easy to use。

<style>
      #subNav{
        position: fixed;
        top: 0;
      }
      
      .nav a{
        color: #666;
        
      }
      .nav ul{
        display: none;
      }
      .nav .active ul{
        display: block;
        padding-left: 20px;
      }
      .nav > li > a {
          padding: 5px 15px;
      }
      .nav .active > a{
        color: #f00;
        border-left: 1px solid #f00;
      }
      
      .nav .active .bold{
        font-weight: bold;
        border-left: 3px solid #f00;
        font-size: 20px;
      }
    </style>

<div class="container">
  <div class="row">
    <!--  Here's one.padding The value is to get the following up, You can try the effect of removing -->
    <div class="col-lg-9" style="padding-bottom: 500px;">
      <div class="section">
        <h2 id="gaishu"> skim through</h2>
        <h3 id="dange"> Single or all introduced</h3>
        <p>JavaScript  Plugins can be introduced individually( use Bootstrap  Individuals provided <code>*.js</code>  documents), Or introduce them all at once( use <code>bootstrap.js</code>  or a compressed version of <code>bootstrap.min.js</code>)。</p>
        <p> It is recommended to use the compressed version of JavaScript  documentsbootstrap.js  harmony bootstrap.min.js  All plugins are included, When you are using, Just choose an introduction page and you're done。</p>
        <p> Dependencies between plugins Certain plugins and CSS  Components depend on other plugins。 If you are introducing each plugin individually, Make sure to check the dependencies between plugins in the documentation。 note, All plugins rely on jQuery ( that is say,jQuery Pages must be introduced before all plugins)。 bower.json  The document lists the Bootstrap  Supported jQuery  version。</p>
        <h3 id="datashuxing">data  properties</h3>
        <p> You can simply pass the data  properties API  It would be possible to use all of the Bootstrap  plug-in (software component), No need to write a line JavaScript  code。 this is Bootstrap  First class in API, It should also be your preferred method。</p>
        <p> nevertheless,..., This feature may need to be turned off in some cases。 therefore, We also offer the ability to close data  properties API  promotion of the method, i.e., the release of a person who has been released from data-api  for the namespace and bind events to the document。 It's like this.:</p>
        <p>
          <pre>$(document).off('.data-api')</pre>
        </p>
        <p> additionally, If it is for a specific plugin, Simply add the following to the data-api  Add the name of that plugin as a namespace in front of it, as follows:</p>
        <p>
          <pre>$(document).off('.alert.data-api')</pre>
        </p>
        <h3 id="biancheng"> programmed API</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="bimian"> Avoiding namespace conflicts</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="shijian"> events</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="weidui"> No comments on the prohibition JavaScript  browsers that provide remedies</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
      </div>
      
      <div class="section">
        <h2 id="guodu"> transition effect</h2>
        <h3 id="guanyu"> About the transition effect</h3>
        <p>JavaScript  Plugins can be introduced individually( use Bootstrap  Individuals provided <code>*.js</code>  documents), Or introduce them all at once( use <code>bootstrap.js</code>  or a compressed version of <code>bootstrap.min.js</code>)。</p>
        <p> It is recommended to use the compressed version of JavaScript  documentsbootstrap.js  harmony bootstrap.min.js  All plugins are included, When you are using, Just choose an introduction page and you're done。</p>
        <p> Dependencies between plugins Certain plugins and CSS  Components depend on other plugins。 If you are introducing each plugin individually, Make sure to check the dependencies between plugins in the documentation。 note, All plugins rely on jQuery ( that is say,jQuery Pages must be introduced before all plugins)。 bower.json  The document lists the Bootstrap  Supported jQuery  version。</p>
        <h3 id="baohan"> Contains the content</h3>
        <p> You can simply pass the data  properties API  It would be possible to use all of the Bootstrap  plug-in (software component), No need to write a line JavaScript  code。 this is Bootstrap  First class in API, It should also be your preferred method。</p>
        <p> nevertheless,..., This feature may need to be turned off in some cases。 therefore, We also offer the ability to close data  properties API  promotion of the method, i.e., the release of a person who has been released from data-api  for the namespace and bind events to the document。 It's like this.:</p>
        <p>
          <pre>$(document).off('.data-api')</pre>
        </p>
        <p> additionally, If it is for a specific plugin, Simply add the following to the data-api  Add the name of that plugin as a namespace in front of it, as follows:</p>
        <p>
          <pre>$(document).off('.alert.data-api')</pre>
        </p>
      </div>
      
      <div class="section">
        <h2 id="shili"> instance</h2>
        <h3 id="jingtai"> Static instance</h3>
        <p>JavaScript  Plugins can be introduced individually( use Bootstrap  Individuals provided <code>*.js</code>  documents), Or introduce them all at once( use <code>bootstrap.js</code>  or a compressed version of <code>bootstrap.min.js</code>)。</p>
        <p> It is recommended to use the compressed version of JavaScript  documentsbootstrap.js  harmony bootstrap.min.js  All plugins are included, When you are using, Just choose an introduction page and you're done。</p>
        <p> Dependencies between plugins Certain plugins and CSS  Components depend on other plugins。 If you are introducing each plugin individually, Make sure to check the dependencies between plugins in the documentation。 note, All plugins rely on jQuery ( that is say,jQuery Pages must be introduced before all plugins)。 bower.json  The document lists the Bootstrap  Supported jQuery  version。</p>
        <h3 id="dongtai"> Dynamic instance</h3>
        <p> You can simply pass the data  properties API  It would be possible to use all of the Bootstrap  plug-in (software component), No need to write a line JavaScript  code。 this is Bootstrap  First class in API, It should also be your preferred method。</p>
        <p> nevertheless,..., This feature may need to be turned off in some cases。 therefore, We also offer the ability to close data  properties API  promotion of the method, i.e., the release of a person who has been released from data-api  for the namespace and bind events to the document。 It's like this.:</p>
        <p>
          <pre>$(document).off('.data-api')</pre>
        </p>
        <p> additionally, If it is for a specific plugin, Simply add the following to the data-api  Add the name of that plugin as a namespace in front of it, as follows:</p>
        <p>
          <pre>$(document).off('.alert.data-api')</pre>
        </p>
        <h3 id="kexuan"> Available in size</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="jinzhi"> Animated effects are prohibited</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="yongfa"> usage</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="tongguo1"> Pass data  properties</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="tongguo"> Pass JavaScript  invoke</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="canshu"> parameter</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="fangfa"> approach</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
        <h3 id="shijian2"> events</h3>
        <p> We offer all Bootstrap  The plugin provides a pure JavaScript  modal API。 All publicly available API  All support individual or chained call methods, and returns the set of elements it operates on( note: harmonyjQuery is consistent with the form of the call to)。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p> All methods can accept an optional option  Object as a parameter, or a string representing a specific method, Or offer nothing at all.( In this case, The plugin will be initialized with the default value):</p>
      </div>
    </div>
    <div class="col-lg-3">
      <div id="subNav" class="navbar-collapse">
        <ul class="nav">
          <li>
            <a href="#gaishu" class="bold"> skim through</a>
            <ul class="nav">
              <li><a href="#dange"> Single or all introduced</a></li>
              <li><a href="#datashuxing">data  properties</a></li>
              <li><a href="#biancheng"> programmed API</a></li>
              <li><a href="#bimian"> Avoiding namespace conflicts</a></li>
              <li><a href="#shijian"> events</a></li>
              <li><a href="#weidui"> No comments on the prohibition JavaScript  browsers that provide remedies</a></li>
            </ul>
          </li>
          <li>
            <a href="#guodu" class="bold"> transition effect</a>
            <ul class="nav">
              <li><a href="#guanyu"> About the transition effect</a></li>
              <li><a href="#baohan"> Contains the content</a></li>
            </ul>
          </li>
          <li>
            <a href="#shili" class="bold"> instance</a>
            <ul class="nav">
              <li><a href="#jingtai"> Static instance</a></li>
              <li><a href="#dongtai"> Dynamic instance</a></li>
              <li><a href="#kexuan"> Available in size</a></li>
              <li><a href="#jinzhi"> Animated effects are prohibited</a></li>
              <li><a href="#yongfa"> usage</a></li>
              <li><a href="#tongguo1"> Pass data  properties</a></li>
              <li><a href="#tongguo"> Pass JavaScript  invoke</a></li>
              <li><a href="#canshu"> parameter</a></li>
              <li><a href="#fangfa"> approach</a></li>
              <li><a href="#shijian2"> events</a></li>
            </ul>
          </li>
        </ul>
      </div>  
    </div>
  </div>
</div>

Tip Tags

On the a tag, you can add the hint, you need to add the title attribute and put the hint inside. But there are also more effects in Bootstrap that can change the display direction, but require js code.

  • data-placment="top(bottom)(left)(right)" Determines the direction in which the label bounces out

The sample code is as follows:

<style>
  p{
    margin: 200px 0;
  }
</style>

<div class="container">
  <div class="row">
    <p><a href="#" class="tool" data-toggle="tooltip" data-placement="top" title=" I love you"> Love the beauty of autumn</a> Program ape love program ape love program ape love program ape love program ape love program ape love program<a href="#" class="tool" data-toggle="tooltip" data-placement="right" title=" I love you"> Love the beauty of autumn</a> Program ape love program ape love program ape love program ape love program ape love program ape love program<a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title=" I love you"> Love the beauty of autumn</a> Program ape love program ape love program ape love program ape love program ape love program ape love program<a  href="#" class="tool" data-toggle="tooltip" data-placement="left" title= I love you"> Love the beauty of autumn</a> Program ape love program</p>
  </div>
  
  <div class="row">
    <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="top">code</button><br /><br />
    <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="right">code</button><br /><br />
    <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="bottom">code</button><br /><br />
    <button class="btn btn-primary tool btnShow" data-toggle="tooltip" title="code" data-placement="left">code</button>
  </div>
</div>

<!-- Pay attention to put it in Bootstrap.js  Below the file-->
<script>
  $('.tool').tooltip();
  $('.btnShow').tooltip('show');  // Let a label appear as soon as it comes up
</script>

prompt box

The hint box can hint more than the hint label, it pops up as a small dialog box and is used much like the hint label.

The sample code is as follows

<style>
  .row{
    padding-top: 200px;
  }
</style>

<div class="container">
  <div class="row">
    <button class="btn btn-danger" data-toggle="popover" data-placement="top" title=" This is the title of the bullet frame" data-content=" This is the contents of the bullet box, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long"> Click on me to bring up a box for you</button><br /><br />
    <button class="btn btn-danger" data-toggle="popover" data-placement="right" title=" This is the title of the bullet frame" data-content=" This is the contents of the bullet box, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long"> Click on me to bring up a box for you</button><br /><br />
    <button class="btn btn-danger" data-toggle="popover" data-placement="bottom" title=" This is the title of the bullet frame" data-content=" This is the contents of the bullet box, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long"> Click on me to bring up a box for you</button><br /><br />
    <button class="btn btn-danger btnShow" data-toggle="popover" data-placement="left" title=" This is the title of the bullet frame" data-content=" This is the contents of the bullet box, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long, It's long, it's long"> Click on me to bring up a box for you</button>
  </div>
</div>

<!-- Pay attention to put it in Bootstrap.js  Below the file-->
<script>
      $('.btn').popover();
      $('.btnShow').popover('show');  // Let one prompt box Show as soon as you come up
</script>

folded menu

1.Single folded menu

make steps: 1、 Add one to the element you want to click on data-toggle="collapse", And you need to add one to itdata-target, Make its value with the corresponding content areaid orclass same 2、 Add one to the corresponding content areaid orclass, Corresponds to the element clicked

Caution.

  • 1, the content area can not have padding value
<div class="container">
  <div class="row">
    <div class="col-lg-5">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">
            <a href="#" data-toggle="collapse" data-target="#con"> Program</a>
          </h3>
        </div>
        <!-- Add it in  target class,  make folded menu Folded and not unfolded-->
        <div id="con" class="in">
          <div class="panel-body">
programmer love programmer programmer love programmer programmer programmer love programmer programmer programmer love programmer programmer programmer love programmer programmer programmer love programmer programmer programmer love programmer programmer programmer love programmer programmer programmer love programmer programmer
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2. first group folded menu

  • 1.Put all the panels in a parent and add a panel-group to the parent, along with an id
  • 2.Add a data-parent attribute to the element to be clicked and make his value the same as the parent's id-
  • 3.Need to add a class to the content area for collapse The sample code is as follows:
<div class="container">
  <div class="row">
    <div class="col-lg-5">
      <!--1、 Put all panels in one parent, And add a parent to thepanel-group, And one more.id-->
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <!--2、 Add an element to the element to be clicked ondata-parent properties, and let his value be the same as the parentid the same as-->
            <h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con1"> Love the beauty of autumn</h3>
          </div>
          <!--3、 You need to add one to the content areaclass forcollapse-->
          <div id="con1" class="collapse in">
            <div class="panel-body">
               Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer
            </div>
          </div>
        </div>
        
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con2"> Love the beauty of autumn</h3>
          </div>
          <div id="con2" class="collapse">
            <div class="panel-body">
               Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer Programmer loves programmer
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

rotation chart

  • 1. Write a parent, put an id, and a class of carousel slide Adds a motion effect to an image data-interval="500" The interval, The units are milliseconds,1 Seconds are equal1000 milliseconds, Don't below400, Otherwise, it is prone to problems data-ride="carousel" The page starts playing as soon as it loads
  • 2. The content of the dots should be placed in a layer with class carousel-indicators
  • 3, the image content area to be placed in a class for carousel-inner layer, each content needs to be placed in a layer called item, this can also be placed inside the text, that need to come to a parent, the parent class for carousel-caption
  • 4, the left and right buttons are written in the following format, the value inside the href should be the same as the id of the parent <a href="#pic" class="carousel-control left" data-slide="prev">‹</a> <a href="#pic" class="carousel-control right" data-slide="next">›</a>

The sample code is as follows:

<div class="container">
  <div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel">
    <!-- Small dot-->
    <ol class="carousel-indicators">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <!--rotation chart the picture-->
    <div class="carousel-inner">
      <div class="item active">
        ![](images/1.jpg)
        <div class="carousel-caption">
          <h3> Here is the title1</h3>
          <p> Here's the content, Very, very much</p>
        </div>
      </div>
      <div class="item">
        ![](images/2.jpg)
        <div class="carousel-caption">
          <h3> Here is the title2</h3>
          <p> Here's the content, Very, very much</p>
        </div>
      </div>
      <div class="item">
        ![](images/3.jpg)
        <div class="carousel-caption">
          <h3> Here is the title3</h3>
          <p> Here's the content, Very, very much</p>
        </div>
      </div>
      <div class="item">
        ![](images/4.jpg)
        <div class="carousel-caption">
          <h3> Here is the title4</h3>
          <p> Here's the content, Very, very much</p>
        </div>
      </div>
    </div>
    <!-- Left and right buttons-->
    <a href="#pic" class="carousel-control left" data-slide="prev">‹</a>
    <a href="#pic" class="carousel-control right" data-slide="next">›</a>
  </div>
</div>

settlerotation chart height of the problem: 1. envoyrotation chart The picture inside is adaptive, increase img-responsive It's useless.。

The css code is as follows.

#carousel-img.carousel-inner .item{ width: 100%;height: 0;padding-bottom: 50%;overflow: hidden;}
#carousel-img .carousel-inner .item img{width: 100%;}

2.rotation chart the same image size as the, But trying to changerotation chart height, Changing the parent div It is not possible to change the height or width of the image。

The css code is as follows.

The height value is subject torotation chart The picture is fixed, Here's an example。

* settlerotation chart height of the problem*/
.carousel, .carousel .item{
  height: 400px;
}
.carousel .item img{
  width: 100%;
}

@media only screen and (max-width:768px ) {
    .carousel, .carousel .item{
    height: 150px;
  }
  .carousel .item img{
    width: 100%;
  }
}

Bootstrap Series.

Bootstrap Learning Documentation (I)

Bootstrap learning documentation (II)

Bootstrap Learning Documentation (III)

Bootstrap Learning Documentation (IV)


Recommended>>
1、Optimizing page access speed III serverside optimization
2、WindowsAD Domain Setting Domain User Logon and Logoff Scripts via Group Policy
3、Introduction to IntelliJIDEA cache and indexing and how to clean it up
4、The use of djangos three caching modes and points to note
5、About vhostuser

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号