ژ.ب ٨٢٠٠

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


بووتستراپ چیە؟
چۆنیەتی بەکارهێنان
بەکارهێنانی Container
سیستەمی Grid چیە؟ چۆن دروست دەکرێت؟
Typography
خشتە
فۆڕم
دوگمە
وێنە
dropdowns
collapse
navs
navbars
Breadcrumbs
pagination
tags
Jumbotron
Alerts
Modal
Progress bars
Media Objects
Cards
Responsive Embed
Carousel
tooltip
popovers
scrollspy

Bootstrap (بووتستراپ) چی یە؟
بریتی یە لە چوارچێوەیەکی (Framework) خۆڕایی و سەرچاوە کراو، کە بەکاردێت بۆ دروست کردن و دیزاینکردنی بەشی پێشەوەی ماڵپەڕ، بەهێزترین چوارچێوەیە بۆ دروست کردنی ماڵپەڕی Responsive چونکە لەسەر بنەمایەکی پتەو بنیادنراوە. بووتستراپ پێکهاتووە لە کۆدەکانی CSS  و JavaScript ، کە بە نووسین و زیادکردنی ناوی Class لە HTML ــدا پێکهاتەکەت بۆ دروست دەبێت.
بوتستراپ تا ڕادەیەکی زۆر کارەکانت ئاسانتر دەکات و توانا بە مالپەڕەکەت دەدات کە ببێت بە Responsive بەبێ ئەوەی تۆ کۆدی CSS , Media Queries بنووسیەوە بۆ ماڵپەڕەکەت. بە واتەی یەک پێکهاتە بۆ هەموو ئامێرەکان.


ماڵپەڕی بووتستراپ:
https://getbootstrap.com/

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


کێ دەتوانێ بەکاری بێنێت؟
بووتستراپ دەتوانرێت بۆ پڕۆژەی بچووک و گەورە بەکارببرێت، لە ئێستادا زۆربەی ماڵپەڕە گەورەکانی دونیا بووتستراپ بەکاردەهێنن، ئەمەش بەهۆی بەهێزی Framework ــەکە. واتە هەموو کەسێک دەتوانێت بەکاری بێنێت.

Responsive چی یە؟
بریتی یە لە پێکهاتەیەک کە لەگەل هەموو ئامێرەکان کاربکات، واتە ماڵپەڕ بە شێوازی وەشانی مۆبایل و تەبلێت، کە ئەمەش بە نووسینی کۆدەکانی تایبەت بە وەشانی مۆبایل دروست دەبێت (media queries) .

بووتستراپ چی تێدایە؟
بوتستراپ ئەمانە دەگرێتە خۆی: چوارچێوەی سەرەکی ماڵپەڕ ،مینۆ، خشتە، دوگمە، وێنە، دەقەکان.  فۆرم و هتد... کە بە نووسینی ناوی کلاسەکە کۆدەکانی CSS  و JS  کاردەکەن.

سوودەکانی بووتستراپ:
یەک لە گرنگترین کارەکانی چوارچێوەیەکی وەک بووتستراپ ئەوەیە کە زۆربەی کارەکانت بۆ ئەنجام دەدات و وادەکات خێراتر کارەکە ئەنجام بدەی، ئەمە جگە لە کوالێتی و ڕێکی کۆدەکانی دیزاین، تۆ چیتر پێویست ناکات چەندین کاتژمێر خەریکی ئەوە بی کە چۆن ماڵپەڕەکەت لە هەموو وێبگەڕەکان و ئامێرەکان وەک یەک کار بکات و هەموو element ــەکان دووبارە دیزاین بکەیتەوە.

من دەبێ ئەو دیزاینە هەلبژێرم کە بووتستراپ دایناوە یان دەتوانم بە ئارەزووی خۆم دیزاین بکەم؟
نەخێر، بە بەکارهێنانی بوتستراپ تۆ دەتوانی کۆنتڕۆلی چوارچێوەکە بکەیت و بە ئارەزووی خۆت دیزاین بدەی بە مالپەڕەکەت بە نووسینی کۆدی CSS.


بەکارهێنان:
فایلەکانی CSS & JavaScript .
دەتوانی لە مالپەری سەرەکی خۆیان دایانبەزێنی و دواتر باریان بکەیتەوە سەر مالپەرەکەت یاخود لینکی راستەوخۆ دابنێی لە ناو تاگی
<head>  </head> دا.

ڕێگاکان
1.دەتوانی بە دانانی ئەم لینکانەی خوارەوە لە نێو تاگی <head> ـدا بووتستراپ بەکار بهێنی.  کە پێی دەگوترێت CDN.

ئەمەیان بۆ ناو  <head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">


-----
ئەمانەش لە خوارەوەی کۆدەکان  و لە پێش داخستنی <body/>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>


2.دابەزاندنی فایلەکان لە مالپەڕی بووتستراپ و بارکردنە نێو ماڵپەڕەکەت و نووسین و ڕاست کردنەوەی لینکەکانی بانگکردن.
لینکی دابەزاندن:
http://v4-alpha.getbootstrap.com/gettin … d/download

بووتستراپ دابەزێنە، دواتە فایلی dist بهێنە دەرەوە و لە نێو مالپەڕەکەت (پڕۆژەکەت) دابنی.
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png

دەبێت لینکەکە بەم شێوەیە لێبێت.

<link rel="stylesheet" href="dist/css/bootstrap.min.css">

ئەمانەش بۆ خوارەوە و لە پێش داخستنی <body/> دا.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

<!-- Latest compiled JavaScript -->
<script src="dist/js/bootstrap.min.js"></script>


----

جگە لە مانەی سەرەوە دەبێت ئەم لینکانە لە نێو head دا دابنێیت .

تاگی viewport meta: بۆ ئەوەی لە مۆبایل جوانتر دەرکەوێت کرداری zoom  بە دروستی کار بکات.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

ئەمەشیان توانا دەدات بە internet explorer  بۆ ئەوەی دواین وەشانی mode  ــی خۆی وەگەر بخات.

<meta http-equiv="x-ua-compatible" content="ie=edge">

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

<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>بووتستراپ</title>
  <meta charset="utf-8">
  <!-- Viewport Meta Tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
</head>
<body>
    
  <!--ناوەڕۆکەکە لێرە بنووسە  -->

  <div class="container">

  </div>

  <!-- JavaScript: placed at the end of the document so the pages load faster -->
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

  <!-- Tether -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>

----------

Container


بووتستراپ بەر لە هەموو شتێک پێویستی بە container ــە بۆ ئەوەی هەموو کۆدەکانی تری لە ناو دابنرێت، بە شێوەی Grid  .

دوو جۆر container  هەیە لە بووتستراپ دا،

1.    Fixed container

<div class="container">
  شوێنی کۆدەکان
</div>


ئەمەیان fixed ـە واتە پڕ بە شاشە دەرناکەوێت لە دیسکتۆپ دا، لە لای ڕاست و چەپ هەندێ بۆشایی هەیە. بەلام Responsive ـە و لەگەل بچووک کردنەوەی وێبگەڕ شاشەکە خۆی خۆکارانە بچووک دەبێتەوە، وە لەگەل هەموو جۆر و قەبارەی ئامێرەکان دەگونجێت.

2.    Fluid Container

<div class="container-fluid">
  شوێنی کۆدەکان
</div>


Fluid پڕ بە قەبارەی شاشەکەیە و لەگەل بچووک بوونەوەی شاشەکە یاخود گۆڕینی ئامێرەکە خۆی قەبارەکەی بچووک دەبێتەوە!

----

Grid System


وای دابنێ پەڕەیەکی کاغەز لەبەر چاوتە کە وەک هەموو لاپەڕەیەک هێلی ستوونی و ئاسۆیی هەیە، دوو هێلی ئاسۆیی لەسەر یەک Row  ــێک دروست دەکەن، واتە ئەو بۆشاییەی ناو دوو هێلەکە پێی دەلێن row  . دوو هێلی ستوونی تەنیشت یەکیش یەک Column  پێک دەهێنن، بێنە بەرچاوت چەند بۆشایی بە دوو هێل دروست دەبن هێندە Column ــت هەیە.ئینجا دەتوانی بە ئارەزووی خۆت شت بنووسی لە نێو ئەو بۆشاییانە یاخود چوارگۆشانەی دروست بووە.
سیستەمی Grid  ئاسانترین ڕێگایە بۆ دروستکردنی پێکهاتەی ماڵپەڕ و دانانی ناوەڕۆک و وێنە و هتد لەو شوێنەی کە مەبەستتە.
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png

ئەم نموونەیەی سەرەوە لە شەش Row  پێک هاتووە،
Rowــی یەکەم لە دوازدە column  پێکاهاتووە، Rowــی دووەم لە شەش Column  و Rowـی سێیەم لە چوار Row، Columnـی پێنجەم و شەشەم هەریەکەیان لە دوو Column  پێکهاتووە، بەلام هەر یەکەیان قەبارەی جیاوازی بۆ بەکار براوە.

ناو و ژمارەی کۆتایی هەر کلاسێک قەبارەیەک دەگرێتە خۆی، .col-xs-1 بریتی یە لە یەک و .col-xs-6 بریتی یە لە شەش، واتە شەش جار هێندەی .col-xs-1 ــە. لێرەدا xs   مانای extra Small  دەگەیەنێت، وە دەتوانین قەبارەی گەورەتر بەکاربێنین بۆ نموونە .col-sm-1  واتە هێندەی دوو جار extra small ، چونکە SM  بە واتای small  دێت لێرە، قەبارەکانی تریش بریتین لە MD , LG , XL
XM = Extra Small
SM = Small
MD = Medium
LG = Large
XL = Extra Large

ئەو شتانەی کە پێویستە لە بیر نەکرێن.
-پێویستە grid  لە ناو container  دا دروست بکرێت،.
-یەک Row  چەندین Columns  دەگرێتە خۆی، هەر column ــێک ناوەڕۆکی تێدا دادەنرێت.
-دەتوانی دوازدە column  لە یەک Row دا دروست بکەیت و بێ سنوور Row دروست بکەیت.
-ئەگەر بێتو زیاتر لە دوازدە columns بەکار بێنی ئەوا خۆکارانە دەچێتە هێلێکی تر و خوارتر Row  ــەکە.
-کلاس نووسین، بە پێشگر دەست پێدەکات دواتر قەبارە ئینجا ژمارەیەک بۆ دیاری کردن قەبارە .

.col-sm-*


Col = Column
Sm = Small
ئینجا قەبارە بە ژمارە.
واتە:  .col-sm-6

مەرج نیە هەر دوازدە column  بەکار بهێنی، دەتوانی بەگوێرەی پێویست بەکار بهێنی.


Offset
واتە کەمکردنەوەی margin  ـی چەپ و هێنانە لای ڕاستی Column  ــێک، بۆ نموونە کلاسی .offset-md-4 بەکار دەهێنین  بۆ ئەوەی .col-md-4 چوار Columns  بڕواتە ڵای ڕاست.


نموونەیەک لە کۆدەکانی Grid لە ناو Container:

<div class="bs-example">
    <!-- Bootstrap Grid -->
    <div class="row">
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
      <div class="col-xs-1">.col-xs-1</div>
    </div>
    <div class="row">
      <div class="col-xs-2">.col-xs-2</div>
      <div class="col-xs-3">.col-xs-3</div>
      <div class="col-xs-7">.col-xs-7</div>
    </div>
    <div class="row">
      <div class="col-xs-4">.col-xs-4</div>
      <div class="col-xs-4">.col-xs-4</div>
      <div class="col-xs-4">.col-xs-4</div>
    </div>
    <div class="row">
      <div class="col-xs-5">.col-xs-5</div>
      <div class="col-xs-7">.col-xs-7</div>
    </div>
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>
    <div class="row">
      <div class="col-xs-12">.col-xs-12</div>
    </div>    
</div>

<!-- کۆدێکی سادەی سی ئێس ئێس بۆ ئەوەی گرید ببینین -->
<style scoped>
.bs-example  div[class^="col"] {
    border: 1px solid white;
    background: #E7E7E7;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    }
</style>


ئەمە تەنها بریتی یە لە نموونەیەک بۆ تێگەیشتن و تەنها XS  بەکار هاتووە.
----------

Typography

لێرە باسێکی گشتی نووسینەکان دەکەین. کاتێک بووتستراپ بەکار دێنین و بەبێ ئەوەی هیچ Classـێک بەکار بێنین نووسینەکان خۆکارانە شێوازی تایبەت بە بووتستراپیان هەیە.

Body Text
لە بوتستراپ 4 دا قەبارەی فۆنت 16px. و نرخی line height بریتی یە لە 1.5  .
فۆنتی خێزان یاخود بۆ هەموو body  بریتی یە لە "Helvetica Neue", Helvetica, Arial, sans-serif
بەلام ئەمە مانای ئەوە نیە کە ناتوانی بیگۆڕیت دەتوانیت لە custom CSS بە ئارەزووی خۆت بیگۆڕی.
وە تاگی <p>  قەبارەکەی بریتی یە لە 1rem


Headings
سەردێرەکان کە بە <H1> تا <H6> دەست پێدەکەن، قەبارەی تایبەت بە خۆیان هەیە و font-weight  یان بریتی یە لە 500 و line-height یان بریتی یە لە 1.1  .
نموونەیەک لە کۆدەکان و چۆنیەتی بەکارهێنانیان:

<h1>h1 ( 36px سەردێر)</h1>
<h2>h2 ( 30px سەردێر)</h2>
<h3>h3 ( 24px سەردێر)</h3>
<h4>h4 ( 18px سەردێر)</h4>
<h5>h5 ( 14px سەردێر)</h5>
<h6>h6 ( 12px سەردێر)</h6>


ئەنجامی کۆدەکانی سەرەوە:
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
---
Heading Classes
بووتستراپ هەروەها کلاسی هەیە بۆ سەردێرەکان ، بۆ ئەوەی بتوانی لەهەر هێلێک یان شوێنێک دەقێک بکەیت بە سەردێر، ئەویش بە بەکارهێنانی وەک ئەمەی خوارەوە.

<p class="h1">.h1 ( 36px بەکارهێنانی کلاس)</p>
<p class="h2">.h2 ( 30px بەکارهێنانی کلاس)</p>
<p class="h3">.h3 ( 24px بەکارهێنانی کلاس)</p>
<p class="h4">.h4 ( 18px بەکارهێنانی کلاس)</p>
<p class="h5">.h5 ( 14px بەکارهێنانی کلاس)</p>
<p class="h6">.h6 ( 12px بەکارهێنانی کلاس)</p>


ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
----

Sub-Headings

دەتوانین لەگەل سەردێر نووسینی دووەم یان سەردێری دووەم دروست بکەین بە نووسینی دەقێک لە ناو تاگی <small>   . کە بچووکترە لە سەردێری سەرەکی.

<h1>سەردێر <small>سەردێری دووەم</small></h1>
<h2>سەردێر <small>سەردێری دووەم</small></h2>
<h3>سەردێر  <small>سەردێری دووەم</small></h3>
<h4>سەردێر <small>سەردێری دووەم</small></h4>
<h5>سەردێر <small>سەردێری دووەم</small></h5>
<h6>سەردێر <small>سەردێری دووەم</small></h6>


ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
سەردێر لە نێو تاگی <h1> دایە و سەردێری دووەم بریتی یە لە sub heading کە بچووکترە و لە نێو تاگی small دایە.
----
Display Headings
جیاوازتر دیزاین کراوە لە سەردێرەکان، بۆ ئەوەی شێوازی تریشی هەبێت، Display Headings چوار جۆر شێوەی سەردێرت پێشان دەدات،
چۆنیەتی بەکارهێنان
هەر لە نێو <h1>  دا دەتوانی بەکاری بێنی، بە نووسینی ناوی کلاس و ژمارە و ووشەی display.

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>


----
Marked Text

بووتستراپ دەقێکت بۆ دیاری دەکات لە ناو نووسینەکان چ وەک سەردێر یان وەک نووسینێکی گرنگ بە تاگی mark .
چۆنیەتی بەکار هێنان.
ئەو دەقەی کە دەتەوێت دیاری بکات دەبێت بیخەیتە نێو تاگی mark  دا.

<p>دەقێکی ئاسایی <mark>دەقێکی دیاریکراو</mark>.</p>

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

خشتە - table

Basic Table
خشتەی بنچینەیی، ئەمە سادەترین جۆری خشتەیە کە بە نووسینی کلاسی .table   دروست دەبێت.

چۆنیەتی بەکارهێنان

<table class="table">
<table class="table">
<thead>
<tr>
<th>سەردێری یەکەم</th>
<th>سەردێری دووەم</th>
<th>سەردێری سێ یەم</th>
</tr>
</thead>
<tbody>
<tr>
<td>خانە</td>
<td>خانە</td>
<td>خانە</td>
</tr>
<tr>
<td>خانە</td>
<td>خانە</td>
<td>خانە</td>
</tr>
<tr>
<td>خانە</td>
<td>خانە</td>
<td>خانە</td>
</tr>
</tbody>
</table>

واتە تەنها بە نووسینی کلاسی .table  ئەنجام وەک ئەمەی خوارەوەی لێ دێت.
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
-----
Inverse Table
دەتوانی تەواوی ڕەنگی خشتەکە بگۆڕی بە نووسینی کلاسی  .inverse
بەم جۆرە دەنووسرێت  table-inverse

<table class="table table-inverse">

ئەنجامی هەمان نموونەی سەرەوە بە زیادکردنی کلاسی .inverse
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
-----
Striped Table
بۆ گۆڕینی باکگراوندی خشتە و ڕەنگێکی سادە بدەی بە rows ئەم جۆرە بەکاردێت، بەلام کلاسی .table  دەبێت لە جێی خۆی بمێنیت.
چۆنیەتی نووسینی Striped Table .

<table class="table table-striped">


Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
-----
Bordered Table
بۆ دروست کردنی قەڕاغ بۆ تەواوی خشتەکە، دەبێت ئەم جۆری خشتەیە بەکار بهێنی، و بەلام .table  وەک خۆی بهێلەوە.

چۆنیەتی بەکارهێنان

<table class="table table-bordered">


Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
-----
Hover Rows
بۆ گۆڕینی ڕەنگی خشتەکە، دەتوانی کلاسی .table-hover  بەکار بهێنی بەلام .table  وەک خۆی بمێنێت.

چۆنیەتی بەکار هێنان

<table class="table table-hovered">


Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
-----
Table Head Styles
دەتوانی ڕەنگ بۆ باکگراوندی header  زیاد بکەی بە نووسینی .thead-default  یان .thead-inverse
لە ناو تاگی <thead>

بەم شیوەیە

<thead class="thead-default"> 


یان

<thead class="thead-inverse ">


.thead-default
Bootstrap 4 بە کوردی سۆرانی، وێنە 1.png
--
.thead-inverse
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Condensed Table
ئەگەر تۆ قەبارەی paddingــت پێ زۆرە دەتوانی بچووکی بکەیتەوە بە نووسینی کلاسی .table-sm

بەکارهێنان

<table class="table table-sm">


------
Contextual Classes
دەتوانی هەر خانەیەک یان rowـێک ڕەنگێکی جیاوازی پێ بدەی، لەو ڕەنگانەی کە لە بووتستراپ دیاری کراون. هەر یەکەیان بۆ بارێک دەگونجێت.

ئەوانیش
Active
Success
Info
Danger
Warning

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

چۆنیەتی بەرکار هێنان

<table class="table">
<thead>
<tr>
<th class="table-info">سەردێری یەکەم</th>
<th>سەردێری دووەم</th>
<th>سەردێری سێ یەم</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-success">خانە</td>
<td>خانە</td>
<td class="table-warning">خانە</td>
</tr>
<tr class="table-active">
<td>خانە</td>
<td>خانە</td>
<td>خانە</td>
</tr>
<tr>
<td>خانە</td>
<td class="table-danger">خانە</td>
<td>خانە</td>
</tr>
</tbody>
  </table>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Responsive Tables
بە نووسینی کلاسی .table-responsive  خۆکارانە خشتەکە دەبێتە responsive  و هەر کاتێک لە شاشەیەکی قەبارە بچووکتر لە 768 pixels بکەیتەوە، ئەوا scroll  زیاد دەبێت بە شێوەی horizontal   ئەگەر خشتەکە گەورەتر بوو لە شاشەکە.


نموونە

<table class="table table-responsive">

 خشتە
</table>


-----
Reflow Tables
ئەم جۆرەی خشتە تەواوی heardـەکان دەهێنێتە لای چەپ و شێوازی خشتە بە تەواوی دەگۆڕێت، بە نووسینی کلاسی .table-reflow
واتە بەم جۆرە.

نموونە

<table class="table table-reflow">

 خشتە
</table>


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

Form


لە بووتستراپ 4 دا دەتوانی فۆرمی responsive  دروست بکەی .کە بە نووسینی چەند کلاسێک شێوازی جیاوازت بۆ جێبەجێ دەکات .
توانای display: block و پانی 100%  ـت بۆ دابین دەکات و بەلام تۆ دەتوانی بیگۆڕی ئەگەر پێویست بوو.

Basic Form
کلاسی .form-control بنووسە بۆ کۆنتڕۆل کردنی  <input>, <textarea>, <select>پێدانی پانی 100%  .
وە هەروەها نووسینی کلاسی .form-group  لە ناو <fieldset> یان هەر تاگێکی تر ، کۆنتڕۆلی label ـەکانت بۆ دەکات.

<form action="">
<fieldset class="form-group">
<label for="first_name">ناوی یەکەم</label>
<input type="text" class="form-control" id="first_name" name="first_name">
</fieldset>
<fieldset class="form-group">
<label for="last_name">ناوی دووەم</label>
<input type="text" class="form-control" id="last_name" name="last_name">
</fieldset>
<button type="submit" class="btn btn-default">ناردن</button>
</form>

ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Inline form
نووسینی .form-inline فۆرمەکەت بۆ دەکات بە  inline-block .
ئەمە لە کاتێک دا دەردەکەوێت کاتێک پانی شاشەکە لە 768px  زیاتر بێت. ئەگەر بچووکتر بێت لە شێوەی responsive دەردەکەوێت.

<form action="" class="form-inline">
<fieldset class="form-group">
<label for="first_name">ناوی یەکەم</label>
<input type="text" class="form-control" id="first_name" name="first_name">
</fieldset>
<fieldset class="form-group">
<label for="last_name">ناوی دووەم</label>
<input type="text" class="form-control" id="last_name" name="last_name">
</fieldset>
<button type="submit" class="btn btn-default">ناردن</button>
</form>


ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Hidden Labels
دەتوانرێت بە نووسینی کلاسی .sr-only  label  ناوی فێلدەکە بشاردرێتەوە، بەلام لە جیاتی ئەو دەتوانی  placeholder  بەکاربهێنی کە ناوی label  دەچێتە ناو خانەکەوە.
نموونەی کۆدەکە:

<label for="ناوی یەکەم" class="sr-only">ناوی یەکەم</label>


لێرە ناوی یەکەم دەشاردرێتەوە بەلام plcaceholder بەکار دێنین.

Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Horizontal Form
دەتوانی فۆرمەکە بکەیت بە Horizontal بە نووسینی کلاسی .form-horizontalبۆ هەموو قەبارەی شاشەکان.

وە هەروەها دەبێت کلاسی .form-control-label بنووسی بۆ label  ، بۆ ئەوەی بە ڕێکی بکەوێتە پێش فۆرمەکە.

<form action=" " class="form-horizontal">


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Form control size
دەتوانی قەبارەی فۆرمەکە بگۆڕی بە نووسینی ئەم کلاسانە

.form-control-lg
.form-control-sm

نموونەی کۆد:

<input type="text" class="form-control form-control-sm" placeholder="Small">


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Column Size
دەتوانی هەمان قەبارەی grid  بەکار بهێنی بۆ بچووک کردن و گەورە کردنی قەبارەی فۆرمەکە.

<div class="col-xs-5">

ڕوونتر:

<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" placeholder=".col-xs-5">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
</div>


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

Help text
بریتی یە لە دەقێک بۆ باسکردن یان هاوکاری کردن بۆ تێگەیشتن لە label ێک کە بە کلاسی .text-muted دروست دەکرێت بۆ تاگێک وەک تاگەکانی <P> , <span> , <small>

<label for="account">ناوی بەکارهێنەر</label>
<input type="text" id="account" class="form-control" aria-describedby="helpAccount">
<span id="helpAccount" class="text-muted">ناوی بەکارهێنەر،  بریتی یە لەو ناوەی کە هەژمارەکەت پێ دروست کردووە لە سەرەتادا</span></div>


ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Validation Styles & Feedback Icons
بۆ ڕەنگ کردن یان گونجانی فۆرمەکە لەگەل ئەو زانیاریانەی کە پڕی دەکەیتەوە، بە یەکێک لەم بارانە.
Success
Warning
Danger

کە بەم جۆرە کلاسەکەی دەنووسرێت

.has-success  
 .has-danger 
 .has-warning


کە بۆ تاگەکان دەنووسرێت.
وە هەروەها دەتوانرێت بەکار ببرت بۆ خانەکانی textual بەم جۆرە.

.form-control-success
 .form-control-warning
 .form-control-danger


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

div class="form-group has-success">
<label class="control-label" for="username">Success</label>
<input type="text" class="form-control form-control-success" id="username" aria-describedby="usernameStatus">
</div>

<div class="form-group has-warning">
<label class="control-label" for="password">Warning</label>
<input type="password" class="form-control form-control-warning" id="password" aria-describedby="passwordStatus">
</div>

<div class="form-group has-danger">
<label class="control-label" for="phone">Danger</label>
<input type="tel" class="form-control form-control-danger" id="phone" aria-describedby="phoneStatus">
</div>'

ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Static Control

دەتوانی بۆ تاگی <p>   بەکار بهێنی بۆ نووسینی دەقێک لە تەنیشت <label>  .

<p class="form-control-static">Static Text</p>

روونتر:

<label class="col-xs-3 form-control-label">Username</label>
<div class="col-xs-8">
<p class="form-control-static">Static Text</p>

ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
----
Checkboxes & Radio Buttons
دەتوانی checkbox ناچالاک بکەی یان بیکەی بە inline  تەنها بە نووسینی کلاس.
بەگوێرەی پێوسیت ئەم کلاسانە بنووسە بۆ div  ـێک کە Checkbox ـەکانی تێدایە.

.radio
 .radio-inline
 .checkbox 
.checkbox-inline


-----
Disabled
ئەگەر بتەوێت checkboxێک یان دوگمەیەکی radio ناچالاک بکەی تەنها بە نووسینی کلاسی .disabled  کارەکەت بۆ ئەنجام دەدات.

نموونە

<div class="checkbox">
<label>
<input type="checkbox" value="">
چالاک  </label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
ناچالاک کراوە.
</label>
</div>

<div class="radio">
<label>
<input type="radio" name="exampleRadios" id="exampleRadios1" value="radio1">
چالاک</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="exampleRadios" id="exampleRadios3" value="radio2" disabled>
ناچالاک کراوە.

</label>
</div>

ئەنجام:
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
----
Inline

دەتوانی checkbox  یان radio  بیکەی بە inline یاخود ڕیزیان بکەی لە دوای یەک بە کلاسی تایبەت. ئەوانیش

.radio-inline
 .checkbox-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>


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

Button


بووتستراپ 4  ، حەوت جۆر دوگمەی دروست کردووە.

Semantic Styles
بۆ دیزاینکردنی دوگمەیەک کلاسی .btn  وە جۆرەکەی بەم شێوەیە دیاری دەکەی بۆ نموونە دوگمەی primary 
کلاسی تایبەت بە دوگمەکە.
btn-primary
نموونەی خوارەوە جوانتر بۆت ڕوون دەکاتەوە.

<button type="button" class="btn btn-primary">Primary</button>


ئەمەیان دوگمەی primary  ـت بۆ دروست دەکات، کە ڕەنگی تایبەت بەخۆی هەیە.

ئەمە نموونەی کۆدەکانی هەر حەوت دوگمەکان.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

ئەنجامەکەی بەم جۆرەیە
Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Button Elements
دوگمەکان لە بووتستراپ بۆ button  دروست کراون بەلام دەتوانی لە تاگی <input>  یان <a> بەکار بهێنی.
وە هەروەها دەتوانی بۆ <label> بەکاربهێنی کاتێک لەگەل checkbox  یان button radio  دا دێت.
نموونەیەک بۆ هەمووان

<a class="btn btn-primary" href="#" role="button">Anchor</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Button Outlines
دەتوانی بە نووسینی کلاسی .btn-outline-
دوگمەکان بکەیت بە سادە، واتە تەنها قەراغی هەبێت.

<button type="button" class="btn btn-outline-primary">Primary</button>

----
Button Size
گۆڕینی قەبارەی دوگمەکە بە کلاسی
تایبەت بە خۆی دەبێت ئەوانیش

.btn-lg   .btn-sm

<button type="button" class="btn btn-success btn-sm">Small</button>


-----
Block Level Buttons
بۆ دروست کردنی دوگمەی block  کلاسی .btn-block بنووسە ، سوودی ئەم دوگمەیە بریتیە لەوەی کە یەک بە قەبارەی شوێنەکە دەردەکەوێت. کە تێیدا دانراوە.
نموونە

<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>


Bootstrap 4 بە کوردی سۆرانی، وێنە .png
-----
Disabled Buttons
بۆ ناچالاک کردنی دوگمەیەک دەتوانی کلاسی .disabled بەکار بهێنی.
نموونە

<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a></p>

<p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button></p>

<p><input type="button" class="btn btn-lg btn-success" disabled="disabled" value="The 'input' Element"></p>


-----
Toggle Checkboxes & Radio Buttons

checkbox
دەتوانی checkbox  و radio  بکەیت بە دوگمە بەمەرجێک کلاسەکە لە نێو label  بەکار بهێنی.  و دەبێت لەنێو تاگێک toggle  دابنێی کە .btn-group تێدایە وەک .

<div class="btn-group" data-toggle="buttons">


بەکلیک کردن لەسەر دوگمەکان کاریگەری toggle  دیار دەبێت.

نموونەی هەمووان

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> تاقیکردنەوە
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> تاقیکردنەوە
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> تاقیکردنەوە
</label>
</div>


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

Toggle radio button
بۆ radio ـش بە هەمان شێوەی سەرەوە.

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="boots" autocomplete="off" checked> تاقیکردنەوە
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="shoes" autocomplete="off"> تاقیکردنەوە
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="feet" autocomplete="off"> تاقیکردنەوە
</label>
</div>


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

Images


دەتوانی وێنەی responsive  و وێنەی shapes  دروست بکەی لەگەل بووتستراپ .
بووتستراپ بە چەندین کلاس بۆ تاگی <img>  شێوازی وێنەی responsive  و shapes ـت بۆ دابین دەکات.

Responsive Images
کلاسی .img-fluid وێنەکەت ڕێک دەخات بە دروستی لەگەل هەموو ئامێرەکان و قەبارەی وێنەکان پڕ بە شاشەکە، واتە بە نرخی 100%  بۆ پانی وێنەکە.
وە هەروەها نرخی درێژی بە خۆکار بۆت دیاری دەکات واتە  height: auto

نموونەی بەکارهێنان

<img src="bekhal.jpg" class="img-fluid" alt="kurdistan bekhal">


ئەنجامی ئەم وێنەیە لە سەر دیسکتۆپ و مۆبایل و تەبلێت پڕ بە شاشەی ئامێرەکە دەردەکەوێت.
----
Image Shapes
دەتوانرێت وێنە بچووک بکرێتەوە وەک thumbnail لەگەل radius کردنی وێنەکە، وە بە ٣ کلاس دروست دەکرێت.

.img-rounded  گۆشەکانی Radius بکرێت
.img-circle بکریتە شێوەی بازنەیی
.img-thumbnail بچووک بکرێتەوە.

نموونە

<img src="bekhal.jpg" class="img-rounded" alt="kurdistan Bekhal">
<img src="bekhal.jpg" class="img-circle" alt="Kurdistan Bekhal">
<img src="bekhal.jpg" class="img-thumbnail" alt="Kurdistan bekhal">


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

Float

دەتوانی ئەم کلاسانە بەکار بهێنی بۆ گۆڕینی شوێنی وێنەکە، واتە ڕاست و چەپ،

.pull-*-left 
.pull-*-right

نموونە

<img src="bekhal.jpg" class="img-circle pull-xs-left" alt="bekhal">
<img src="bekhal.jpg" class="img-circle pull-xs-right" alt="bekhal">


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

بۆ responsive  ئەم وێنانە ئەم کلاسانە بەکاربێنە.
ئەمە بۆ وێنەی floatـی چەپ

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


ئەمانەش بۆ وێنەی floatـی راست

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


-----
Center Block
بۆ هێنانی وێنە بۆ ناوەڕاست. کلاسی .center-block بەکاربهێنە وە هەروەها بە شێوازێکی تریش دەکرێت ئەویش  پێی دەلێن Center Text
نموونە

 class="text-xs-center" 

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

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