Bootstrap 3.0 Çörek ve araç ipuçları

SORU

23 AĞUSTOS 2013, Cuma

Bootstrap 3.0 Çörek ve araç ipuçları

Bootstrap yeni duyuyorum ve sorun popover ve tooltip özellikleri çalışmak için yaşıyorum. Bırak çıkışlar ve modelleri ile bir sorunum vardı ama popover ve araç ipuçları için bir şey eksik gibi görünüyor.

İpuçlarını göster için alıyorum ama bootstrap örnekler gibi tarz bulunmayan. Ve popover hiç çalışmıyor.

Bir göz atın ve bana özlüyorum ne bildirin lütfen.

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>

CEVAP

30 AĞUSTOS 2013, Cuma

Meğer o Evan Larsen has the best answer. Lütfen cevabı (ya da doğru cevap olarak/seçin) upvote - çok parlak.

Working jsFiddle here

Evan'ın hile kullanarak, bir satır kod ile tüm ipuçlarını başlatılamadı

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

Uzun paragraf tüm araç ipuçları araç ipuçları sadece çalışan olduğunu göreceksiniz.

JsFiddle örnekte (link yukarıda), ben de bir ipucu (Oturum açma düğmesi ile) varsayılan olarak nerede bir durum eklendi. Ayrıca, tooltip kodu, HTML biçimlendirme içinde bir WordPress kullanmak düğme EKLENİR.

Yumurtalı ekmekyapınbu araç ipuçları: aynı iş

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

Ve işte oldu! En sonunda başardık.

Bunu ortaya çıkarmanın en büyük sorunlardan biri jsFiddle ile bootstrap iş yapıyordu... İşte yapmanız gerekenler:

Buradan Twitter Bootstrap VİDEO için başvuru yapmalısınız: http://www.bootstrapcdn.com/
URL TÜM dışında Not Defteri, striptiz kulüplerine her linki yapıştır. Örneğin:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
Sol tarafta jsFiddle, Dış Kaynaklara akordiyon açılır menüyü açın
Her bir URL yapıştırın tuşuna basarak, artı her yapıştır sonra imzalayın
Şimdi, "Çerçeveler Ve Uzantıları" akordiyon açılır ve ardından jQuery 1.9.1 (ya da hangi...) . açık

ŞİMDİ gitmek için hazır.

Bunu Paylaş: