Bootstrap 4 ကျူတိုရီရယ်

BS4 ပင်မစာမျက်နှာ BS4 ကို စတင်လိုက်ပါ။ BS4 ကွန်တိန်နာများ BS4 Grid အခြေခံ BS4 စာစီစာရိုက် BS4 အရောင်များ BS4 ဇယားများ BS4 ရုပ်ပုံများ BS4 Jumbotron BS4 သတိပေးချက်များ BS4 ခလုတ်များ BS4 ခလုတ်အုပ်စုများ BS4 တံဆိပ်များ BS4 တိုးတက်မှုဘားများ BS4 Spinners BS4 Pagination BS4 စာရင်းအုပ်စုများ BS4 ကတ်များ BS4 ဆွဲချမှုများ BS4 ခေါက်သိမ်းပါ။ BS4 ရေတပ် BS4 Navbar BS4 ပုံစံများ BS4 ထည့်သွင်းမှုများ BS4 ထည့်သွင်းမှုအုပ်စုများ BS4 စိတ်ကြိုက်ပုံစံများ BS4 ချားရဟတ် BS4 Modal BS4 Tooltip BS4 Popover BS4 ဆန္ဒပြုခြင်း။ BS4 Scrollspy BS4 အသုံးအဆောင်များ BS4 Flex BS4 သင်္ကေတများ BS4 မီဒီယာအရာဝတ္ထုများ BS4 စစ်ထုတ်မှုများ

Bootstrap 4 Grid

BS4 Grid စနစ် BS4 သည် အထပ်လိုက်/အလျားလိုက် BS4 Grid XSmall BS4 Grid အသေး BS4 Grid Medium BS4 Grid အကြီး BS4 Grid XLarge BS4 Grid နမူနာများ

Bootstrap 4 အခြား

BS4 အခြေခံ Template BS4 လေ့ကျင့်ခန်းများ BS4 Quiz

Bootstrap 4 Ref

အတန်းအားလုံး JS သတိပေးချက် JS ခလုတ် JS ချားရဟတ် JS ခေါက်သိမ်းပါ။ JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip


Bootstrap 4 ချားရဟတ်


Bootstrap 4 ချားရဟတ်

ချားရဟတ်သည် စက်ဘီးစီးခြင်းအတွက် စလိုက်ရှိုးတစ်ခုဖြစ်သည်။


ချားရဟတ်ဖန်တီးနည်း

အောက်ဖော်ပြပါ ဥပမာတွင် အညွှန်းများနှင့် ထိန်းချုပ်မှုများပါရှိသော အခြေခံအဝိုင်းလေး ဖန်တီးနည်းကို ပြသသည်-

ဥပမာ

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

နမူနာရှင်းပြထားပါတယ်။

အထက်နမူနာမှ အတန်းတစ်ခုစီ၏ လုပ်ဆောင်ပုံဖော်ပြချက်-

Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon Used together with .carousel-control-next to create a "next" button
.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect


Slides တွင် စာတန်းများထည့်ပါ။


ဆလိုက်တစ်ခုစီအတွက် စာတန်းတစ်ခုဖန်တီးရန် တစ်ခု <div class="carousel-caption">စီ အတွင်းအတွင်း အစိတ်အပိုင်းများကို ထည့်ပါ -<div class="carousel-item">

ဥပမာ

<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>

Bootstrap ချားရဟတ်ရည်ညွှန်းချက်ကို အပြီးသတ်ပါ။

အဝိုင်းရွေးချယ်စရာများ၊ နည်းလမ်းများနှင့် အဖြစ်အပျက်များအားလုံးကို ကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Carousel Reference သို့ သွားပါ ။