2016-10-23 ژ.ب ١٩٥٣

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

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

Dropdowns

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

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

１. Div ێک بکەوە و کلاسێکی بۆ دروست بکە بە ناوی .dropdown
２.کلاسی .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>

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

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

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

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

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

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

-----

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>

-----
لە تاگێکی <nav> دا

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

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

ئەم کلاسانە بۆ لای چەپ هەن کە 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">

<nav class="navbar navbar-light">

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

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

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

-----

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>

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

-----

Jumbotron

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

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

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

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

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

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

بە کرتە کردن لە دوگمەکە ئەم 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>

پێدانی ڕێژەکە لە ناو کۆدەکان بە ڕوونی دیارە.

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

-----

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>

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

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

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

.card-header 
.card-footer

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

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

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

-----

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>

--------
Tooltips on Buttons
دروست کردن بۆ دوگمە

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

کاتێک ماوس دەهێنرێتە سەر دوگمەکە 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="" بەکاربهێنە بۆ ئەو نووسینەی دەتەوێت دەرکەوێت.

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

کۆتایی

Dropdowns

collapse

Navs

Tabs

Navbars

Breadcrumbs

Pagination

Tags

Jumbotron

Modal

Progress Bars

Media Objects

carousel

Tooltips

Popovers

Scrollspy