bootstrap tips1

Posted by On 1月 12, 2016 0 Comment

Contents

ui

Progressbar

<div class="progress bar">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>

Popover

<div class="popover bottom show" style="position:relative; max-width:50%;">
    <div class="arrow"></div>
    <h3 class="popover-title">
        Title
    </h3>
    <div class="popover-content">
        <p>
            Contents
        </p>
    </div>
</div>

Arrow direction is decided by “popover bottom” bottom

Toggle Switch iOS

Use bootstrap-toggle plugin

bower install bootstrap-toggle 

<html>
<head>
   <title>UI Test</title>
   <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap-toggle/css/bootstrap-toggle.css">
   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
   <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<h3>Toggle Switch2</h3>
<style>
  .toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
  .toggle.ios .toggle-handle { border-radius: 20px; }
</style>
<input type="checkbox" checked data-toggle="toggle" data-style="ios" data-onstyle="success" data-on=" " data-off=" ">
</body>
</html>

Accordion

<h3>Accordion</h3>
<div class="accordion-group">
  <div class="accordion-heading">Title1<a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#faqpost_1"><span id="title1" class="glyphicon glyphicon-menu-right"></span></a></div>
  <div id="faqpost_1" class="accordion-body collapse">
    <div class="accordion-inner">
      <p>Contents1</p>
      <p>Contents2</p>
      <p>Contents3</p>
    </div>
  </div>
</div>
<div class="accordion-group">
  <div class="accordion-heading">Title2<a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#faqpost_2"><span id="title1" class="glyphicon glyphicon-menu-right"></a></div>
  <div id="faqpost_2" class="accordion-body collapse">
    <div class="accordion-inner">
      <p>Contents1</p>
      <p>Contents2</p>
      <p>Contents3</p>
    </div>
  </div>
</div>

Delay

Use dela and queue

<div id="delay">1</div>

$(function(){
  $('#delay').delay(1500).queue(function(next) {
    $(this).text(2);
    next();
  });

});

TOPICS