ژ.ب ١٣١٦

Bootstrap v4 بە کوردی سۆرانی بەشی دووەم و کۆتایی


ئەم بابەتە درێژەی بەشی یەکەمە کە لە لە بەستەری Bootstrap v4 بە کوردی سۆرانی - بەشی یەکەم هەیە.

Dropdowns


دەتوانی بە بووتستراپ Dropdowns دروست بکەی بەبێ نووسینەوەی کۆدەکانی جاڤاسکریپت، تەنها بە نووسینی کلاس.

هەنگاوەکانی دروست بوونی dropdown

1. Div  ێک بکەوە و کلاسێکی بۆ دروست بکە بە ناوی .dropdown
2.کلاسی .dropdown-toggle ــی بووتستراپ بەکاربهێنە بۆ ئەو تاگەی کە بەکارهێنەران کرتەی لەسەر دەکەن لیرەدا button  وەردەگرین واتە.

data-toggle="dropdown"


3. هەموو .dropdown-item ــەکان لە نێو یەک تاگ دا شوێنیان بۆ بکەوە و کلاسێک بۆ تاگەکە بنووسە بەم ناوە
.dropdown-menu
4. هەر dropdown item ــێک لە ناو تاگی <a>  دا بنووسە ، (دەتوانی لە نێو button یش دا بنووسیت)

نموونە

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دەربارە
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">پێناسە</a>
<a class="dropdown-item" href="#">کارەکان</a>
<a class="dropdown-item" href="#">پەیوەندی</a>
</div>
</div>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Dropup Menu
دەتوانی dropdown ــەکە پێچەوانە بکەیتەوە لە خوارەوە بۆ سەرەوە، بە کلاسی .dropup لە جیاتی .dropdown .
وە هەروەها بە .dropdown-menu-right دەتوانی مینۆیەکە ببەی بۆ لای ڕاست..
-----
Menu Headers
دەتوانی header  دروست بکەیت بۆ مینویەکەت بە نووسینی کلاسی .dropdown-header بۆ یەکێک لە تاگەکانی <h1>  تا <h6>  .

h6 class="dropdown-header">ئێمە بناسە</h6>
<a class="dropdown-item" href="#">پێناسە</a>
<a class="dropdown-item" href="#">کارەکان</a>
  <a class="dropdown-item" href="#">پەیوەندی</a>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Dividers
دەتوانی مینو یەکان لە یەکتر جیا بکەیتەوە، تەنها بە نووسینی، کلاسی
.dropdown-divider بۆ div ێک

div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">پەیوەندی</a>
</div>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Disabled Menu Items
تەنها بە زیادکردنی کلاسی .disabled بۆ تاگێکی <a>   مینۆیەکە ناچالاک دەبێت.

<a class="dropdown-item disabled" href="#">پەیوەندی</a>


-----

collapse 


دەتوانی collapse  دروست بکەی بۆ دوگمەیەک یاخود لینکێک بە data-toggle="collapse" زۆر بە ئاسانی.
Collapse:  واتە کاتێک تۆ کرتەی دوگمەکە یان لینکەکە دەکەی ئەو زانیاری زیاترت بۆ دەردەخات لەخوارەوەی دوگمەکە یان لینکەکە.
---
Using a Link - footwear
تاگی <a> بەکار بهێنە لەگەل نرخێکی href ی ID .
لەم نموونەیەدا کلاسی .collapse دەنووسین بەلام دەبێت نرخی ID  پێ بدەین.

<p><a data-toggle="collapse" href="#footwear" aria-expanded="false" aria-controls="footwear">Footwear</a>
</p>
<div class="collapse" id="footwear">
<p>زانیاری زیاتر دەردەکەوێت لەکاتی کرتە کردن لەسەر لینکەکە</p>
</div>

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
دەتوانی لینکەکە بکەیت بە دوگمە بەگوێرەی پڕۆژەکەت، بەم جۆرە

<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#footwear" aria-expanded="false" aria-controls="footwear">
Footwear
</button>


----
دەتوانی بە collapse شێوازی  accordion دروست بکەی .
accordion زۆربەی جار لە لاپەڕەکانی سەرەتا و دەربارە و هتد... بەکار دێت بۆ پێشاندانی هەندێ زانیاری بەجوانی و بەبێ ئەوەی زۆر شوێنی لاپەڕەکە بگرێت .
بەکارهێنان:
کلاسی .in بەکاربهێنە بۆ دروست کردنی ئەم بچووک بوونەوە و گەورەبوونەوەی. لەگەل ئەم کلاسە لە هەمان شوێن aria-expanded="true"

<div id="faq" role="tablist" aria-multiselectable="true">

<div class="card">
<div class="card-header" role="tab" id="questionOne">
<h5 class="card-title">
<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="false" aria-controls="answerOne">
Accordin  چی یە؟</a>
</h5>
</div>
<div id="answerOne" class="collapse" role="tabcard" aria-labelledby="questionOne">
<div class="card-block">
بەکرتە کردن لەسەر کام سەردێر ئەو بابەتەت بۆ دەکاتەوە هەر لە شوێنی خۆی</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="questionTwo">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerTwo" aria-expanded="false" aria-controls="answerTwo">
تاقیکردنەوە</a>
</h5>
</div>
<div id="answerTwo" class="collapse" role="tabcard" aria-labelledby="questionTwo">
<div class="card-block">
تاقیکردنەوە</div>
</div>
</div>
</div>

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----

Navs

کلاسی .nav یارمەتیت دەدات بۆ دروست کردنی tab  یان navigation

بۆ دروست کردنی تاب  یان navigation pill  دەتوانی ئەم دوو کلاسە بەکار بهێنی بۆ تاگی <a>

.nav-pills 
 .nav-tabs


Base Nav
بووتستراپ ٤ ستایلێکی سادەی هەیە لێرە هەرچەندە بە نووسینی کلاسی تر زۆربەی ستایلت پێشکەش دەکات بەلام بە تەنها نووسینی ئەم کلاسە ستایلێکی سادەت پێدەدات.

.nav


بەکارهێنان لە تاگی <ul>

<ul class="nav">
    
<li class="nav-item">
<a class="nav-link active" href="#">کوردستان</a>
</li>
</ul>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
لە تاگێکی <nav> دا

<nav class="nav">
<a class="nav-link active" href="#">کوردستان</a>
</nav>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Inline Navs

کلاسی .nav-inline بنووسە بۆ دروست کردنی inline navigation  وە هەروەها بۆشیایی یەک هەیە لە نێوان navigation ـەکاندا.
لە تاگێکی <ul/>  دا

<ul class="nav nav-inline">
<li class="nav-item">
<a class="nav-link active" href="#">کوردستان</a>
</li>
</ul>


----
لە nav  دا.

<nav class="nav nav-inline">
<a class="nav-link active" href="#">کوردستان</a>
</nav>


-----

Tabs


کلاسی class="nav nav-tabs" بەکار ببە  بۆ تاگی <ul>   بۆ دروست کردنی تاب.
وە هەروەها ئەم کلاسە بەکاربێنە بۆ ئەو tab ــەی کە چالاکە. class="active"

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">کوردستان</a>
</li>
</ul>


-----
Pills

کلاسی nav-tabs  بگۆرە بۆ nav-pills بۆ دروستکردنی nav pills
<ul class="nav nav-pills">   
<li class="nav-item">
<a class="nav-link active" href="#">HTML</a>
</li>
</ul>

هەروەها بۆ دروست کردنی شێوازی vertical pills  کلاسی .nav-stacked بەکار بهێنە.
ئەگەر ویستت tab ێک ناچالاک بکەیت بە نووسینی کلاسی .disabled  ناچالاک دەبێت.

<li class="nav-item">
<a class="nav-link disabled" href="#">Preview</a>
</li>


-----

Navbars

Basic Navbar
بە نووسینی چەند کۆدێکی کەم و کلاسی تایبەت بە navbar  بووتستراپ هاوکاریت دەکات بۆ دروست کردنی navbar ــی گونجاو بۆ هەموو ئامێرێک.

<nav class="navbar navbar-light bg-faded">

<!-- Brand -->
<a class="navbar-brand" href="#">لۆگۆی ماڵپەڕ</a>

<!-- Links -->
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">لینکی یەکەم</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">لینکی دووەم
  </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">لینکی سێیەم</a>
</li>
</ul>
</nav>


ڕوونکردنەوە
-    دانانی هەموو کۆدێک لەنێو تاگی <nav> لەگەل نووسینی کلاسی .navbar لەگەل گۆڕینی ناوی کلاسێک بۆ ڕەنگ وەک class="navbar navbar-light bg-faded".
-    بۆ لیستێک کە لە لینک پێکهاتبێت تاگی <ul> بەکار بێنە لەگەل کلاسی class="nav navbar-nav"
-    بۆ هەر یەکێک لە list item تاگی <li> لەگەل کلاسی class="nav-item"
-    بۆ لینکێک بە تەنها تاگی <a>  لەگەل کلاسی class="nav-link"
----
Navbars with Dropdowns
تۆ دەتوانی drop down menu  دروست بکەی بە نووسینی کۆدەکان لەنێو  <li> وە نووسینی کلاسی .dropdown

<nav class="navbar navbar-light bg-faded">
<!-- Brand -->
<a class="navbar-brand" href="#">لۆگۆی ماڵپەڕ</a>
<!-- Links -->
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">لینکی یەکەم</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">لینکی دووەم</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
تاقیکردنەوە
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">بووتستراپ</a>
<a class="dropdown-item" href="#">مالپەڕ</a>
<a class="dropdown-item" href="#">ئەندرۆید</a>
</div>
</li>
</ul>

</nav>


-----
Alignment
دەتوانی بە نووسینی ئەم کلاسانە .pull-*-left   -  .pull-*-right شوێنی navbar  بگۆڕی بەگوێرەی گونجان لەگەل مالپەڕەکەت.
بۆ نممونە بیهێنینە لای راست هەمان نموونەی سەرەوە. بەم کلاسە .pull-xs-right

<ul class="nav navbar-nav pull-xs-right">
</ul>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png

ئەم کلاسانە بۆ لای چەپ هەن کە responsive ــن

.pull-xs-left, .pull-sm-left, .pull-md-left, .pull-lg-left, .pull-xl-left.


ئەم کلاسانەش بۆ لای راست هەن کە responsive  ــن .

.pull-xs-right, .pull-sm-right, .pull-md-right, .pull-lg-right, .pull-xl-right.


وە هەروەها دەتوانی کلاسی .pull-*-none بەکار بهێنی بۆ ناچالاک کردنی float.
-----
Colors navbars
بووتستراپ دوو جۆر ڕەنگی سەرەکی هەیە کە بە کلاسێک بۆت دابین دەکات، ئەوانیش ڕەنگی ڕووناک و تاریک. ئەوانیش بە کلاسی .navbar-light .navbar-dark دروست دەبن.

وە دەتوانی ڕەنگێک بدەی بە باکگراوند بە یەکێک لە ڕەنگەکانی بووتستراپ بۆ نموونە .bg-primary
یان بە custom Css  خۆت کۆدەکە بنووسە و ڕەنگ بدە بە باکگراوند background-color

<nav class="navbar navbar-dark bg-inverse">


Bootstrap 4 بە کوردی سۆرانی، وێنە .png

<nav class="navbar navbar-light">


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
ئەمەش بە زیادکردنی کلاسێک بۆ باکگراوند bg-primary

<nav class="navbar navbar-dark bg-primary">


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Custom color
ئەمەش بە نووسینی کۆدی css  ـی تایبەت بە باکگراوند دروست دەبێت بۆ نموونە لە نێو style  دا دەنووسین:

<style scoped>
nav {
background-color: blue;
}
</style>


-----
Fixed Navbars
دەتوانی بە ئاسانی navbar ــەکە ببیەتە سەرەوە یان خوارەوەی مالپەڕ بە نووسینی کلاسی تایبەت ئەوانیش

.navbar-fixed-top 
.navbar-fixed-bottom


سەرەوە

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">

خوارەوە

<nav class="navbar navbar-fixed-bottom navbar-dark bg-inverse">

بەلام لەم کاتەدا دەبێت Padding  بدەی بە navbar  لە css  دا
بۆ نموونە بۆ سەرەوە

body { padding-top: 70px; }


بۆ نموونە بۆ خوارەوە

body { padding-bottom: 70px; }


-----
Responsive Navbars
دەبێت کلاسی .navbar-toggler بەکاربهێنی بەدرێژایی لەگەل بەکارهێنانی کلاسەکانی .navbar-toggleable-*
بۆ نموونە بەم شێوەیە کە بە قەبارەی small  دا دەردەکەوێت.

<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
☰
</button>


-----

Breadcrumbs

دروستکردنی breadcrumbs  تەنها بە یەک کلاس دەبێت ئەویش .breadcrumb بۆ <ul>
وە هەروەها زیادکردنی .active  بۆ ئەو <li>ـەی بمانەوێت چالاکی بکەین.

نموونە

<ul class="breadcrumb">
<li><a href="#">دەستپێک</a></li>
<li><a href="#">هەوال</a></li>
<li class="active">وەرزش</li>
</ul>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----

Pagination


دەتوانی ژمارەی لاپەڕەکان دروست بکەی بە بووتستراپ وەک ژمارە بۆ لاپەڕە یان دوگمەی داهاتوو و هتد...
بۆ نموونە تۆ گەڕانێک دروست دەکەی لە کاتی پێشاندانی ئەنجام دا لەبەر ئەوەی لە یەک لاپەڕەدا جێی نابێتەوە دەبێت لەژێرەوەی لاپەڕە ژمارە زیاد بکەی بۆ ئەوەی بەکارهێنەر بتوانێت ئەنجامەکانی تر ببینین لە لاپەڕەکانی داهاتوو دا.

Default Pagination
بۆ دروست کردنی paginate ــی ئاسایی کلاسی class="pagination" زیاد بکە بۆ تاگی <ul> 
  وە هەروەها کلاسی page-item بۆ هەموو <li> ــێک زیاد بکە و کلاسی .page-link بۆ هەموو تاگێکی <a>
زیاد بکە،

<nav>
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link">7</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Active State for Current Page
کلاسی .active زیاد بکە بۆ <li>  بۆ چالاک کردنی ئەو لاپەڕەی کە کراوەیە، واتە لە کام لاپەڕە دەبێت ژمارەی ئەو لاپەڕەیە دیار بێت و چالاک بێت.

<li class="page-item active"><a href="#" class="page-link">4</a></li>


-----
Disabling an Option
لەهەمان کاتدا دەتوانی لاپەڕەیەک ناچالاک بکەی بە نووسینی .disabled بۆ تاگی <li>

<li class="page-item disabled"><a href="#" class="page-link">4</a></li>


-----
Pagination Size
یەک لەم کلاسانە بنووسە بۆ تاگی <ul>  بۆ ئەوەی قەبارەکەی بگۆڕی.

.pagination-lg 
.pagination-sm
<ul class="pagination pagination-lg">
<ul class="pagination pagination-sm">


-----

Tags


بۆ گۆڕینی نووسینێک یاخوود وشەیەک بۆ شێوازێکی بنچینەیی یان شێوازی تاگێک، دەتوانی  بە نووسینی ناوی کلاسێکی تایبەت دروست بکەی.

بە نووسینی کلاسی .tag دبۆ تاگی span  دەتوانی دروستی بکەی .  یان جۆرێک لە تاگەکە هەلبژێری بە نووسینی کلاس و جۆرەکەی، بۆ نموونە تاگی ئاسایی tag-default

<h3>دروستکردنی تاگ لە بووتستراپ <span class="tag tag-default">ئاسایی</span></h3>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Contextual Classes
بووتستراپ جگە لە ڕەنگی ئاسایی پێنچ ڕەنگی تایبەتی هەیە بۆ دروست کردنی تاگ ئەوانیش بەم کلاسانە دروست دەبن.

tag-primary
tag-success
tag-warning
tag-info
tag-danger


<span class="tag tag-default">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-success">Success</span>
<span class="tag tag-info">Info</span>
<span class="tag tag-warning">Warning</span>
<span class="tag tag-danger">Danger</span>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
------
Pill Tags
دەتوانی بە زیادکردنی کلاسی  .tag-pill  شێوازی Radius بدەی بە تاگەکە.

<span class="tag tag-pill tag-default">Default</span>


-----

Jumbotron


لە بووتستراپ دا دیزاینێکی ڕێک و پێکی پێدراوە لەگەل سەردێرێکی گەورە و padding ـێکی بەهێز، وە هەروەها بە ڕەنگێکی خۆلەمێشی دیزاین کراوە #eceeef  .
بەلام تۆ دەتوانی ئەم ڕەنگە بگۆڕی بۆ هەر ڕەنگێک کە دەتەوێت.

بۆ دروست کردنی jumbotron  کلاسی .jumbotron بدە بەو div ــەی کە تۆ کۆدەکانی تێدا دادەنێی.

<div class="jumbotron">
<h1>Jumbotron</h1>
<p>دەقێک بۆ تاقیکردنەوە</p>
</div>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Full-Width Jumbotron
بۆ دروست کردنی jumbotron  کە پڕ بە شاشە بێت و بەبێ خواربوونەوەی گۆشەکان ئەم کلاسە بەکار ببە لەو divــەی کە کلاسی jumborton بەکار هاتووە ، .jumbotron-fluid

<div class="jumbotron jumbotron-fluid">
<h1>Jumbotron</h1>
<p>دەقێک بۆ تاقیکردنەوە</p>
</div>


----
Alerts
بۆ دروستکردنی پەیامی ئاگادارکەرەوە ئەم کلاسە بەکار بێنە .alert و بۆ دیاری کردنی جۆری پەیامی ئاگادار کەرەوە ئەم کلاسە و جۆری پەیامەکە بنووسە .alert*
جۆرەکان

Success
Danger
Info
Warning


پەیامە ئاگادارکەرەوەکان هەر یەکەیان ڕەنگی جیاوازیان هەیە و دەتوانی هەریەکەیان بەگوێرەی بارودۆخی پەیامەکە بەکار بێنی.

  <div class="alert alert-success" role="alert">  Success</div>
<div class="alert alert-info" role="alert">Info </div>
<div class="alert alert-warning" role="alert">Warning </div>
<div class="alert alert-danger" role="alert">Danger </div>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Dismissible Alerts
بە بەکارهێنانی .alert-dismissible دەتوانی لەگەل دروست بوونی پەیامەی ئاگادەرکەرەوەکە هێمایەکی داخستن دابنێی کە بەکارهێنەر دەتوانێت بە کرتە کردن لێی دایبخات.

<div class="alert alert-success alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong> congratulation ! </strong>successful
</div>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Alerts with Links

هەروەها دەتوانی لینکێک دابنێی لەگەل  پەیامی ئاگادارکردنەوە بە نووسینی کلاسی .alert-link بۆ تاگی  <a>

<strong>Congratulations!</strong> successful <a href="#" class="alert-link">next step</a>.


-----

Modal


دەتوانی بە بووتستراپ  modal dialog box دروست بکەی بۆ ماڵپەڕەکەت
Modal :  بریتی یە لە بۆکسێک  کە زانیاری پێشانی بەکارهێنەر دەدات، کە دیزاینی سادە و جوانی بۆ دانراوە. دەتوانرێت بۆ دوگمەیەک جێبەجێ بکرێت وەک
ئەمەیان دروست کردنی دوگمەیەک بۆ ئەوەی کارەکە بێتە ئەنجام دان بە کردتە کردن.

 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#flipFlop">
کرتە بکە</button>


بۆ دروست کردن modal کلاسی .modal بنووسە  بۆ دروست بوونی کاریگەری کلاسی .fade دەنووسین.

<!-- The modal -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel">Modal</h4>
</div>
<div class="modal-body">
دەقێک بۆ نووسین</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">داخستن</button>
</div>
</div>
</div>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
بە کرتە کردن لە دوگمەکە ئەم boxــە دەرکەوتووە.
-----
Modal Size

خۆی قەبارەیەکی دیاریکراوی هەیە بەلام تۆ دەتوانی بیگۆڕی بۆ دوو قەبارەی جیاوازتر large  و small .
بە نووسینی ئەم کلاسانە لەگەل  .modal-dialog

.modal-sm
.modal-lg

<div class="modal-dialog modal-sm">
<div class="modal-dialog modal-lg">


-----
Remove Fade Effect
دەتوانی کاریگەری fade  بسڕیەوە لە کاتی کردنەوەی box  ـەکەدا بە لابردنی کلاسی .fade .
-----

Progress Bars

بووترستراپ هەمان تاگی <progress>  ـی html5  بەکار دەبات بۆ دروستکرنی progress  ، چەندین شێوازی جوانی هەیە بۆ پێشاندانی ئەوەی ئایە پرۆسەکە چەند کۆتا هاتووە و چەندی ماوە!
Max  بریتی یە لەو ژمارەی کە تۆ دەتەوێت دیاری بکەی لە پڕۆژەکەت دا(مەرج نیە 100  بێت) دەتوانی هەر ژمارەیەکت ویست بەکاری بێنی.
Value  بریتی یە لە پرۆسەی تەواو بوو.

Default Progress Bar
بۆ دروست کردنی progress  ــی ئاسایی هەمان تاگی html5  بەکار ببە لەگەل کلاسی .progress .

<progress class="progress" value="70" max="100">70%</progress>


پێدانی ڕێژەکە لە ناو کۆدەکان بە ڕوونی دیارە.
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Contextual Classes
دەتوانی ڕەنگی زیاتر بەکاربێنی لەکاتی دروستکردن دا . ڕەنگەکانتش بریتین لەو ڕەنگانەی بووتستراپ وەک ستاندارد بۆ زۆربەی بەشەکان بەکاری دەبات.
کلاسی ڕەنگەکان لەگەل کلاسی .progress دا بەکار دێنی واتە:

"progress progress-success"


<progress class="progress progress-success" value="73" max="100">73%</progress>
<progress class="progress progress-info" value="500" max="1000">50%</progress>
<progress class="progress progress-warning" value="35" max="100">35%</progress>
<progress class="progress progress-danger" value="200" max="1000">20%</progress>


Stripes
شێوازی stripes  واتە گۆڕینی ڕەنگی سادەی progress ــەکە بۆ هێل هێل . ئەمەش بە زیاد کردنی کلاسی .progress-bar-striped دروست دەبێت.

<progress class="progress progress-striped progress-success" value="73" max="100">73%</progress>


-----
Animated Stripes

واتە جولانی stripes ، کە بە کلاسی .progress-animated  دروست دەبێت،

<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>


-----
بەلام لە ئێستا دا هەموو وێب گەڕەکان پالپشتی progress  ناکەن،
بەهۆی ئەوەی IE  پالپشتی progress bar  ناکات دەبێت بەم شێوازەی خوارەوە دروستی بکەین بۆ ئەوەی بێ کێشە کاربکات.

<progress class="progress" value="75" max="100">
    <div class="progress">
        <span class="progress-bar" style="width: 75%;">75%</span>
    </div>
</progress>


-----

Media Objects


media object بە ئاسانی ڕێگەت پێ دەدات بۆ دروست کردنی پێکهاتەیەکی وەک blog comments, Tweets و هتد....
هەروەها هەلبژاردنی ڕاست و چەپی دەق و وێنە زۆر بە ئاسانی دەتوانرێت هەلببژێردرێت.

بەکارهێنان:
Outer container :  تەواوی کۆدەکان لە div  ێک دا جێگیر بکە و کلاسی .media ــی بۆ بنووسە.
Media Object :  کلاسی .media-object بنووسە بۆ هەموو ئەو تاگانەی کە دەتەوێت وەک object media  دەربکەون وەک: <img>, <audio>, <video  هتد

  Media Body
کلاسی media-body  بنووسە div  ـی دەقەکە و کلاسی .media-heading بنووسە بۆ هەر سەردێرێکی ناو media body .

نموونەی کۆدەکان:

<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="Kurdistan.png" alt="kurdish flag" width="64" height="64"></a>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە .</p>
</div>
</div>
    
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="Kurdistan.png" alt="kurdish flag" width="64" height="64"></a>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە .</p>
</div>
</div>

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----

Nestet Media Object
دەتوانی لەدەرەوەی div ـی یەکەم بەکاری بهێنی وەک:

<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="Kurdistan.png" alt="kurdish flag" width="64" height="64">
</a>
<div class="media-body">
<h4 class="media-heading">سەردێر </h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە .</p>

<!-- Start Nested Media Object -->
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="Kurdistan.png" alt="kurdish flag" width="64" height="64">
</a>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە .</p>
</div>
</div>
<!-- End Nested Media Object -->

</div>
</div>

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Horizontal Alignment
بە ئاسانی دەتوانی شوێنی وێنەکە ڕاست و چەپی بۆ دیاری بکەی بەم کلاسانە

.media-left        .media-right


<a class="media-right" href="#">
<img class="media-object" src="kurdistan.jpg" alt="Kurdistan Flag">
</a>
<a class="media-right" href="#">
<img class="media-object" src="kurdistan.jpg" alt="Kurdistan Flag">
</a>

----
Vertical Alignment
کاتێک media object  شێوازی ستوونی دەبێت وێنەکە خۆکارانە لە سەرەوە دەبێت، بەلام دەتوانی بەم کلاسانە شوێنی وێنەکە بۆ ناوەڕاست و خوارەوە دیاری بکەیت.

.media-middle .media-bottom .media-left .media-right


-----
Two Media Objects
دەتوانی دوو وێنە بەکاربێنی .
دوو تاگی <img>  لە ناو یەک .media-leftدا بنووسە. وەک:

[img]<div class="media-left">
<a href="#">
<img class="media-object" src="kurdistan.jpg" alt="kurdistan flag">
</a>
<a href="#">
<img class="media-object" src="kurdistan.jpg" alt="kurdistan flag">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە </p>
</div>[/img]


-----
Horizontal

لێرەدا هەردوو وێنەکە لە ناو دوو .media-leftدا دەنووسین و هەردوو وێنەکە بە شێوەی ئاسۆیی دەچنە تەنیشت یەکەوە

<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="Kurdistan.jpg" alt="kurdistan Flag">
</a>
<a class="media-left" href="#">
<img class="media-object" src="Kurdistan.jpg" alt="Kurdistan Flag">
</a>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p>سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە سەردێری بابەتەکە </p>
</div>
</div>


-----
Left & Right Aligned
دەتوانی دوو وێنە لە یەک block  دا بەکار بهێنی یەکیان بۆ لای ڕاست و یەکیان بۆ لای چەپ. بەم کلاسانە .media-left
.media-right

<div class="media">

<a class="media-left" href="#">
<img class="media-object" src="kurdistan.jpg" alt="kurdistan flag">
</a>
<div class="media-body">
<h4 class="media-heading">سەردێرt</h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە </p>
</div>
<a class="media-right" href="#">
<img class="media-object" src="kurdistan.jpg" alt="kurdistan flag">
</a>
</div>


-----
Media Lists

دەتوانی لە شێوەی list  دروست بکەی بە کلاسی .media-list بۆ تاگی <ul>     .وە کلاسی .media بۆ تاگی <li>

<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="kurdistan.jpg" alt="kurdistan flag">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە </p>

<!-- Start Nested Media Object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="kurdistan.jpg" alt="kurdistan flag">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p> ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە </p>
</div>
</div>
<!-- End Nested Media Object -->

</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="kurdistan.jpg" alt="kurdistan flag">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">سەردێر</h4>
<p>ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە ناوەڕۆکی بابەتەکە </p>
</div>
</li>
</ul>


-----
Cards
دەتوانی بە دروست کردنی card  بە شێوازێکی جوان و پتەو نووسین دابنێی لەگەل چەندین شتی تر.
Basic Card
بۆ دروست کردنی card  ــی ئاسایی کلاسی .card و .card-block بنووسە بۆ div  یک و کلاسی .card-title بۆ هەر تاگێکی سەردێر و کلاسی .card-text بنووسە بۆ تاگێک وەک <p>  .

<div class="card card-block">
<h4 class="card-title">سەردێر</h4>
<p class="card-text">دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە دەقێک بۆ بابەتەکە .</p>
<a href="#" class="btn btn-primary">زیاتر</a>
</div>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Header & Footer
دروست کردنی header  و footer  بۆ card ێک بە نووسینی کلاسی تایبەت دەبێت بۆ div ێک ئەوانیش:

.card-header 
.card-footer


<div class="card-header">
Header
</div>

<div class="card-footer">
footer
</div>

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Header Navigation
دەتوانی header  بۆ card  دروست بکەی بە شێوەی nav pill  و nav tab
Nav Tab
کلاسی .card-header-tabs بنووسە بۆ تاگی ul   بۆ دروست کردنی nav tab  و کلاسی .pull-*-* بنووسە لەگەل دیاری کردنی قەبارەی و aligment  وەک

pull-xs-left

وە بە کلاسی .disabled  دەتوانی هەر تابێکت ویست ناچالاکی بکەیت.
بە کلاسی .active  هەر تابێکت ویست چالاکی بکەی کە لە کاتی کرنەوەی مالپەر دا ئەو تابە کراوە بێت.

Nav pill
کلاسی .card-header-pills بنووسە بۆ تاگی ul  بۆ گۆڕینی شێوازی nav  بۆ pill

<ul class="nav nav-pills card-header-pills pull-xs-left">


Remove Padding
بۆ دروست کردنی card   کە دەقەکانی padding  ــی نەبێت، نابێت دەقەکان لە نێو ئەو div  ـە بن کە کلاسی .card-block  بۆ نووسراوە، چونکە .card-block  خۆکارانە padding ــی هەیە.
بۆیە دەبێت لەدەرەوەی .card-block  شوێنیان بۆ دابنێیت، بەلام هەر لە ناو card ، ئەمە بە دروستی padding  دەسڕێتەوە،

Top & Bottom
دەتوانی وێنە ببەیتە سەرەوەی نووسینەوە لە ناو card   دا بە نووسینی کلاسی .card-img-top وە بۆ ئەوەی وێنەکە لە خوارەوەی نووسینەکە بێت دەتوانی کلاسی .card-img-bottom بنووسەی بۆ تاگی img

<img class="card-img-bottom" src="kurdistan.jpg" alt="Kurdistan Flag">
<img class="card-img-top" src="kurdistan.jpg" alt="Kurdistan Flag">


----
Text Alignment
بووتستراپ ڕێگەت پێ دەدات بۆ ئەوەی بە ئارەزووی خۆت text aligment  دیاری بکەیت بەم کلاسانە

.text-left, .text-right, .text-center, .text-justify, .text-nowrap

Contextual Color
پێنچ ڕەنگی سەرەکی بووتستراپ دەتوانی بەکاربهێنی بۆ ڕەنگ کردنی Card  ئەوانیش:
card-primary, .card-success, .card-info, .card-warning,.card-danger.
بۆ ئەوەی ڕەنگی Card  بە تاریک بێت ئەم کلاسە لەگەل ڕەنگەکە بەکار دێنین card-inverse

<div class="card card-inverse card-danger">
</div>


-----
Border Color
هەروەها تۆ دەتوانی ڕەنگی قەڕاغەکان بە ئارەزووی خۆت دیار بکەی بەم کلاسە .card-outline-*   لەگەل نووسینی ناوی ڕەنگێک لە پێنچ ڕەنگەکان.

<div class="card card-outline-danger" ">
</div>

Image Overlay
دەتوانی وێنە وەک باکگراوند بەکار بهێنی بەم کلاسە

.card-img-overlay 
<!-- Text Overlay -->
<div class="card-img-overlay">
<h4 class="card-title">سەردێر</h4>
<p class="card-text">دەقێک لەژێر سەردێر</p>
</div>


-----
Card Width
بە CSS
تۆ زۆر بە ئاسانی دەتوانی کۆنتڕۆلی  پانی card بکەی بە css  ئەویش ب  width و max-width .

بە Grid
دەتوانی بە بەکاربردنی هەر کلاسێک لە قەبارەکانی grid  کۆنتڕۆلی card بکەی.
----------
Responsive Embed
بووتستراپ بە ڕێگایەکی ئاسان ڤیدیۆ و جۆرەکانی تری embed  ـت بۆ دەکات بە responsive  و پڕ بەو شوێنە پێشان دەدات کە ڤیدیۆ یەکەی لێ دانراوە،
دەتوانرێت بۆ ئەم تاگانە بەکار بهێنرێت  <iframe>, <video>, <object>, and <embed>
دەبێت لە نێو یەک div  دا شوێنی بۆ بکەیتەوە و کلاسی .embed-responsive بۆ هەمان div  بنووسی.
لەگەل یەک لە کلاسە بنەڕەتیەکان دا وەک .responsive-embed-16by9 یان  .responsive-embed-4by3

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="youtube link" allowfullscreen></iframe>
</div>

----------

carousel


دەتوانی carousel component دروست بکەی بۆ نووسین و وێنەکانت بە هاوکاری بووتستراپ.

چۆنیەتی دروست بوون.
بۆ دروست کردنی carousel  ی ئاسایی.
-کلاسی .carousel and .slide بنوسە بۆ div  ێک لەگەل id  یەکەی.
-وە هەروەها بۆ scroll کردن ، کلاسی .carousel-inner بنووسە بۆ div  ێک هەموو item  ــەکانی لە ناو دابنێی کلاسی .carousel-item بۆ هەموو item  ـەکان بنووسە.
-    هەروەها بۆ نیشانە کردن( دروست کردنی بازنەیەکی بچووک لە خوارەوە) بۆ کردتە کردن لەسەر و بۆ گۆڕینی سلایدەکە. لیستێک دروست بکە و کلاسی .carousel-indicators بۆ بنووسە، بە قەد گوانجانی تایبەتمەندی .data-target  و .data-slide-to
-بۆ دروستکردنی "Previous/Next"  تاگی a   بەکار بهێنە بە کلاسی class="left carousel-control" ــەوە بۆ Previous و کلاسی class="right carousel-control" بۆ next   .
-هەروەها کلاسی .active بەکار ببە بۆ چالاک کردنی ئەو سلایدەی کە دەتەوێت لە سەرەتا بکرێتەوە.
------
Captions
دەتوانی دەقێک بەکاربهێنی بۆ سلایدەکانت بە دروستکردنی div  ــێک بە کلاسی .carousel-caption ەوە و بۆ هەر Item  ــێک.

<!-- Carousel container -->
<div id="my-pics" class="carousel slide" data-ride="carousel">

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

<!-- Content -->
<div class="carousel-inner" role="listbox">

<!-- Slide 1 -->
<div class="carousel-item active">
<img src="/pix/samples/16m.jpg" alt="Sunset over beach">
<div class="carousel-caption">
<h3>Boracay</h3>
<p>White Sand Beach.</p>
</div>
</div>

<!-- Slide 2 -->
<div class="carousel-item">
<img src="/pix/samples/4m.jpg" alt="Rob Roy Glacier">
<div class="carousel-caption">
<h3>Rob Roy Glacier</h3>
<p>You can almost touch it!</p>
</div>
</div>

<!-- Slide 3 -->
<div class="carousel-item">
<img src="/pix/samples/15m.jpg" alt="Longtail boats at Phi Phi">
<div class="carousel-caption">
<h3>Phi Phi</h3>
<p>Longtail boats at Phi Phi.</p>
</div>
</div>

</div>

<!-- Previous/Next controls -->
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>

<!-- Center the image -->
<style scoped>
.carousel-item img{
    margin: 0 auto;
}
</style>

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----

Tooltips


Tooltip  واتە پێشاندانی باسێک کاتێک تۆ ماوس لەسەر وشەیەک ڕادەگریت، ئەو زانیاری زیاتر بە tooltip  دەدات بە تۆ.
ئەمەش لە پێکهاتەی title  دا دروست دەبێت.
Tootlip  بەشێوەیەکی گشتی لەگەل تاگی a  و button  گوانجاوە و باش کار دەکات.

-    Tootlip  خۆی لە بنەڕەتدا دانەمەزراوە و تۆ پێویستە دایمەزرێنی،
باشترین دامەزراندن ئەوەیە، ئەم کۆدە لە دوای بانگکردنی jQuery  شوێنی بۆ بکەیتەوە.

Tooltip on a Link
دروست کردنی tooltip بۆ لینکێک

<p style="margin:20px;">لێرە دوا وەشانی <a target="_blank" href="http://www.quackit.com/neo4j/tutorial/" data-toggle="tooltip" data-placement="top" title="وەشانی 4">بووتستراپ</a> دابەزێنە </p>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
--------
Tooltips on Buttons
دروست کردن بۆ دوگمە

<button type="button" class="btn btn-primary" data-toggle="tooltip" title="وەشانی 4" style="margin:20px;">
  بووتستراپ
</button>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
کاتێک ماوس دەهێنرێتە سەر دوگمەکە tooltip  دەردەکەوێت.
-----
Tooltip Position
دەتوانی شوێنی tooltip  دیار بکەی کاتێک دەردەکەوێت بۆ لای ڕاست، چەپ، سەرەوە و خوارەوە. بە دیاری کردنی placement 
نموونە

<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="وەشانی 4" style="margin:20px;">
  بووتستراپ
</button>


-----

Popovers

دەتانرێت بۆ دوگمەیەک جێبەجێ بکرێت بە کرتە کردن لەسەری زانیاری زیاتر دەردەکەوێت.
Popovers ــیش پێویستی بە دامەزراندن هەیە، پێویستە ئەم کۆدە لە دوای بانگکردنی jQuery  بنووسیت.

<script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>


-----
Basic Popover

data-toggle="popover"  بەکار بێنە بۆ popover  و data-content="" بەکاربهێنە بۆ ئەو نووسینەی دەتەوێت دەرکەوێت.
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-------
Popover Position
بە data-placement دەتوانی شوێنی دەرکەوتنی popover  دیاری بکەیت

data-placement="right"
data-placement="left"
data-placement="top"
data-placement="bottom"


------
Popover Title
زۆر بە ئاسانی دەتوانی سەردێرێک زیاد بکەی بۆ نووسینەکە بە title

title="سەردێر"


Popovers on Hover
لە جیاتی کرتە کردن دەتوانی بە ماوس بردنە سەر دوگمە کار بکات ئەویش بە زیادکردنی data-trigger="hover"
--------

Scrollspy


دەتوانی scroll  دروست بکەی بۆ content  و مینو، بووتستراپ بە ئاسانی کارەکەت بۆ ئەنجام دەدات، بە کرتە کردن لە هەر مینویەک scroll  دەڕواتە سەر ئەو بەشی کە تایبەتە بە مینویەکە.

<style scoped="true">
article.scrollspy-example { 
position: relative;
overflow: scroll; 
width: 350px;
height: 160px;
}
</style>

  <nav id="scrollspy-nav" class="navbar navbar-default">
    <ul class="nav nav-pills">
      <li class="nav-item"><a class="nav-link" href="#yakam">یەکەم</a></li>
      <li class="nav-item"><a class="nav-link" href="#dwam">دوەم</a></li>
      <li class="nav-item"><a class="nav-link" href="#seyam">سێیەم</a></li>
    </ul>
  </nav>
  <article data-spy="scroll" data-target="#scrollspy-nav" data-offset="0" class="scrollspy-example">
    <h4 id="yakam">بابەتی یەکەم</h4>
    <p>بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە .</p>
    <h4 id="dwam">بابەتی دووەم</h4>
    <p>بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە </p>
    <h4 id="seyam">بابەتی سێیەم</h4>
    <p>بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە </p>
    <p>بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە بۆ تاقیکردنەوە </p>
  </article>

Scrollspy  پێویستی بە position: relative; هەیە .
وە پێویستە بۆ درێژی scrollspy  ئەم کۆدە بەکارببەی لە css   

overflow-y: scroll;

کۆتایی

بۆچوون نووسین ناچالاك كراوه‌ بۆ ئه‌م بابه‌ته‌