Togglable Tabs در bootstrap4

Togglable Tabs در bootstrap4

دسته : Css

کد محصول : 66

قیمت : رایگان

Togglable Tabs در bootstrap4 یک قابلیت فوق العاده برای مدیریت متون مختلف در گروه های مختلف کنار یکدیگر می باشد با این قابلیت شما می توانید داخل صفحه منوی کاربردی برای جلوگیری از طولانی شده صفحه ایجاد کنید. برای استفاده از این منوهای قابل تنظیم موارد مورد نیاز در کلاس های bootstrap 4 و کدهای مربوطه چیست؟ اول آخرین نسخه bootstrap را به صفحه خود اضافه می کنیم <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> سپس آخرین نسخه های فایل های jquery لازم را اضافه می کنیم


Togglable Tabs در bootstrap4  یک قابلیت فوق العاده برای مدیریت متون مختلف در گروه های مختلف کنار یکدیگر می باشد با این قابلیت شما می توانید داخل صفحه منوی کاربردی برای جلوگیری از طولانی شده صفحه ایجاد کنید.

برای استفاده از این منوهای قابل تنظیم موارد مورد نیاز در کلاس های bootstrap 4 و کدهای مربوطه چیست؟

اول آخرین نسخه bootstrap را به صفحه خود اضافه می کنیم

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

سپس آخرین نسخه های فایل های jquery  لازم را اضافه می کنیم 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

سپس در قسمت مورد دلخواه منوها را ایجاد می کنیم

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

سپس بدنه این منوها را ایجاد می کنیم به صورت ذیل

<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>

به همین راحتی ! برای مطالعه تمام کاربردهای bootstrap 4 می توانید به سایت اصلی bootstrap 4 مراجعه کنید.

کد کامل برای تست و استفاده نیز به صورت ذیل می باشد

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
  <h2>Toggleable Tabs</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>
</body>
</html>
 

  • Togglable Tabs در bootstrap4 را با دوستان خود به اشتراک بگذارید.
  • سوالات خود را در بخش پرسش و پاسخ این مطلب ثبت کنید.
  • مطالب خود را در جاب تیم به اسم خود ثبت کنید ارسال مطلب


ثبت سوال/پاسخ
بهزاد میرزازاده
در مورد کاربر : همیشه سخت تلاش کردم و به موفقیت های خیلی زیادی رسیدم اما دلیل نشد که متوقف بشم من برای هر روز برنامه دارم و به امید موفقیت های بزرگتر قدم بر میدارم همیشه سخت ترین مسئله ها، ساده ترین راه حل رو دارند پس بهانه جویی نباید روش کار ما برنامه نویسان باشه!!! ما می توانیم آینده را تعیین کنیم
اشتراک گذاری این مطلب
{