বুটস্ট্র্যাপ 3.0.০ পপওভার এবং টুলটিপস

Question 1

আমি বুটস্ট্র্যাপে নতুন এবং আমার পপওভার এবং টুলটিপ বৈশিষ্ট্যগুলি কাজ করতে পেতে সমস্যা হচ্ছে। ড্রপ ডাউনগুলি এবং মডেলগুলির সাথে আমার কোনও সমস্যা ছিল না তবে আমি পপওভার এবং সরঞ্জামদ্বারগুলির জন্য কিছু অনুপস্থিত মনে হচ্ছে।

আমি দেখানোর জন্য টুলটিপস পাচ্ছি তবে সেগুলি স্টাইলযুক্ত নয় এবং বুটস্ট্র্যাপের উদাহরণগুলির মতো অবস্থিত। এবং পপওভার কিছুতেই কাজ করছে না।

দয়া করে একবার দেখুন এবং আমাকে কী মিস করছি তা আমাকে জানান।

       <!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>

Question 2

দেখা যাচ্ছে যে ইভান লার্সনের সবচেয়ে ভাল উত্তর রয়েছে । দয়া করে তার উত্তরটিকে উচ্চতর করুন (এবং / অথবা এটি সঠিক উত্তর হিসাবে নির্বাচন করুন) - এটি উজ্জ্বল।

এখানে কাজ jsFizz

ইভানের কৌশলটি ব্যবহার করে, আপনি এক লাইনের কোডের সাহায্যে সমস্ত সরঞ্জামচালিত ইনস্ট্যান্ট করতে পারেন:

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

আপনি দেখতে পাবেন যে আপনার দীর্ঘ অনুচ্ছেদে সমস্ত টুলটিপসের ঠিক সেই এক লাইনের সাথে কাজ করার সরঞ্জামদ্বারা রয়েছে।

JsFizz উদাহরণে (উপরের লিঙ্কটি), আমি এমন একটি পরিস্থিতিও যুক্ত করেছি যেখানে ডিফল্টরূপে একটি সরঞ্জামদণ্ড (সাইন-ইন বোতাম দ্বারা) চালু থাকে। এছাড়াও, টুলটিপ কোডটি এইচটিএমএল মার্কআপে নয়, jQuery এর বোতামে যুক্ত করা হয়।

Popovers না টুলটিপ্সে হিসাবে একই কাজ:

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

এবং সেখানে আপনি এটা আছে! শেষ পর্যন্ত সাফল্য।

এই স্টাফটি বের করার ক্ষেত্রে সবচেয়ে বড় সমস্যা হ'ল জেএসফিডেলের সাথে বুটস্ট্র্যাপের কাজ করা ... আপনার যা করা উচিত তা এখানে:

টুইটার বুটস্ট্র্যাপ সিডিএন এর জন্য রেফারেন্সটি এখান থেকে পান: http://www.bootstrapcdn.com/
প্রতিটি লিঙ্ক নোটপ্যাডে আটকান এবং URL ব্যতীত সমস্তগুলি ছড়িয়ে দিন। উদাহরণস্বরূপ:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
জেএসফিডেলে, বাম দিকে, বাহ্যিক সংস্থান অ্যাকর্ডিয়ান ড্রপডাউনটি খুলুন
প্রতিটি ইউআরএল পেস্ট করুন, প্রতিটি পেস্টের পরে প্লাস সাইন চাপুন
এখন, "ফ্রেমওয়ার্কস এবং এক্সটেনশানগুলি" অ্যাকর্ডিয়ান ড্রপডাউনটি খুলুন এবং jQuery 1.9.1 (বা যে কোনও ...) নির্বাচন করুন

এখন আপনি যেতে প্রস্তুত।

Question 3

আমি এটি আমার সমস্ত পৃষ্ঠায় সরঞ্জামটিপ সক্ষম করতে ব্যবহার করি

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

Question 4

বুটস্ট্র্যাপ 3 এর সাথে কাজ করা: স্বল্প এবং সহজ

চেক - জেএস ফিডল

এইচটিএমএল

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>    
</div>

জাভাস্ক্রিপ্ট

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

Question 5

আমি এটি ডিওএম প্রস্তুত করতে হয়েছিল

$( document ).ready(function () { // this has to be done after the document has been rendered
    $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        'placement': 'top',
        'show': true
    });
});

এবং আমার লোড অর্ডারগুলি হ'ল পরিবর্তন করুন:

jQuery
jQuery UI
বুটস্ট্র্যাপ

Question 6

কোনও কারণে আমি আমার কোডটি কাজে লাগাতে পেরেছি তার মধ্যে একাধিক জিনিস স্যুইচ করা। যদি এ পর্যন্ত আপনার পক্ষে কোনও কাজ না করে থাকে তবে দয়া করে এটিকে ঘুরান:

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

Question 7

আপনার স্ক্রিপ্টে আপনার একটি সিনট্যাক্স ত্রুটি রয়েছে এবং xXPhenom22Xx দ্বারা উল্লিখিত হিসাবে আপনাকে অবশ্যই টুলটিপটি ইনস্ট্যান্ট করতে হবে।

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

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

</script>

মনে রাখবেন যে আমি আপনার ক্লাসটি "বিটিএন-বিপদ" ব্যবহার করেছি। আপনি একটি ভিন্ন শ্রেণি তৈরি করতে পারেন, বা একটি ব্যবহার করতে পারেন id="someidthatimakeup"।

Question 8

আপনার কেবলমাত্র সরঞ্জামটিপ সক্ষম করতে হবে:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})

Question 9

আপনি যদি রেলস এবং অ্যাক্টিভএডমিন ব্যবহার করেন তবে এটি আপনার সমস্যা হতে চলেছে: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 মূলত, সক্রিয়_আডমিন.জেএস এর সাথে বিরোধ

এটি সমাধান: https://stackoverflow.com/a/11745446/264084 (ক্যারেনের উত্তর) tldr: সক্রিয়_আডমিন সম্পদগুলি "বিক্রেতা" ডিরেক্টরিতে সরান।