Bootstrap 3


1. რა არის Bootstrap ?
როგორც ცნობილია ვებ-მწარმოებლობა ანუ ვებ-დეველოპმენტი იყოფა ორ ნაწილად: სერვერული მხარე და კლიენტის მხარე (frontend და backend, ან server side და client side). კლიენტის მხარე მოიცავს ყველაფერს რაც ხილვადია მომხმარებლისათვის, დიზაინისა და ზოგიერთი ენის ჩათვლით (მაგ: HTML, CSS, Javascript). სერვერული მხარე კი განსაზღვრავს ვებ-გვერდის მუშაობის სქემას, ფაქტიურად არის ვებ-გვერდის "ტვინი", მასში აღწერილია ინსტრუქციები რომლებიც ახდენენ გვერდის ჩატვირთვას განახლებას და ა.შ. სერვერული მხარე, ბუნებრივია უხილავია მომხმარებლისათვის. (მონაცემთა ბაზა, მისი ცხრილები და ა.შ.)
  • Bootstrap არის ფრეიმვორკი რომელიც გამოიყენება კლიენტის მხარის სტრუქტურასთან სამუშაოდ და რომლის დახმარებითაც ვებ-გვერდის შექმნა გაცილებით მარტივად და სწრაფად შეიძლება.
  • Bootstrap მოიცავს HTML და CSS-ზე დაფუძნებულ შაბლონებს, ფორმებს, ღილაკებს, ცხრილებს, ნავიგაციის ელემენტებს, სურათების კარუსელებს და ა.შ
  • Bootstrap-ის საშუალებით მარტივად შეიძლება რეაგირებადი დიზაინების შექმნა.
Bootstrap შექმნეს და ღია წყაროს სახით გაავრცელეს მარკ ოტტომ და იაკობ თჰორნტონმა 2011 წელს. 2014 წელს კი ეს ფრეიმვორკი იყო No.1 პროექტი GitHub-ზე!

Bootstrap-ის უპირატესობები

  • ადვილია მისი გამოყენება: ყველასთვის ვისაც HTML და CSS-ის საბაზისო ცოდნა აქვს.
  • რეაგირებადი დიზაინის ფუნქციები: Bootstrap-ით შექმნილი დიზაინი ერგება ტელეფონების, ტაბლეტების და პერსონალური კომპიუტერების წკრანებს.
  • მობილური მიდგომა: Bootstrap 3-ში, მობილური სტილები არის ძირითადი ფრეიმვორკის ნაწილი.
  • ბრაუზერთა მხარდაჭერა: Bootstrap-ს აქვს ყველა თანამედროვე ბრაუზერის მხარდაჭერა (Chrome, Firefox, Internet Explorer, Safari, და Opera).

Bootstrap-თან წვდომა

იმისათვის რათა Bootstrap ჩავრთოთ ჩვენს ვებ გვერდზე იგი ან უნდა გადმოვწეროთ საიტიდან - getbootstrap.com, ანდა გამოვიყენოთ CDN ბმული, ამ შემთხვევაში სასურველია ჩავრთოთ jQuery ბიბლიოთეკაც <!-- უახლესი CSS ვერსია-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery ბიბლიოთეკა -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- უახლესი JavaScript ვერსია -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> Bootstrap იყენებს jQuery-ს JavaScript ელემენტებისათვის (modals, tooltips), თუ მათი გამოყენება არ გვიხდება საიტზე მაშინ შესაძლებელია jQuery ბიბლიოთეკა საერთოდ არ ჩავრთოთ გვერდზე.
2. Bootstrap ცხრილები
საბაზისო ცხრილს გააჩნია მცირე შიდა მიჯნა (padding) და მხოლოდ ჰორიზონტალური გამყოფი ხაზები. საბაზისო ცხრილების მისანიჭებლად ცხრილს უნდა მივცეთ კლასი .table

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

ზებრა სტილი

ცხრილის კენტი და ლუწი სტრიქონების ფონის ფერები რომ განვასხვავოთ ცხრილს უნდა მივცეთ კლასი .table-striped, ანუ კლასი გახდება "table table-striped"

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

ცხრილის ჩარჩო

თუ გვსურს, რომ ცხრილს გააჩნდეს ჩარჩოები, მას უნდა მივცეთ კლასი .table-bordered, ანუ კლასი გახდება "table table-bordered"

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

hover ეფექტი ცხრილის სტრიქონებისათვის

იმისათვის რომ ცხრილის სტრიქონთან მაუსის მიტანისას მისი ფონის ფერი იცვლებოდეს ცხრილც უნდა მივცეთ კლასი .table-hover, ანუ მთლიანი კლასი იქნება "table table-hover"

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

კონტექსტური კლასები

კონტექსტური კლასებით შესაძლებეილა ცხრილის <tr> or table cells <td>: ელემენტების ფონის ფერის შეცვლა შინაარსიდან გამომდინარე.

კლასი აღწერა
.active ცვლის სტრიქონის ან უჯრის ფონის ფერს როცა მასთან მაუსი მიაქვთ
.success მიუთითებს წარმატებულ ან პოზიტიურ ქმედებაზე
.info მიუთითებს ნეიტრალურ ინფორმაციულ ქმედებაზე ან ცვლილებაზე
.warning მიუთითებს გაფრთხილებაზე, რომლსაც ყურადღება უნდა მიექცეს
.danger მიუთითებს საფრთხის შემცველ და ნეგატიურ ქმედებაზე
3. Bootstrap სურათები

მომრგვალებული კუთხეები

img-rounded კლასი ამრგვალებს სურათის კუთხეებს (IE8 ვერ აღიქვამს): <img src="tbilisi.jpg" class="img-rounded" alt="თბილისი" width="304" height="236"> შედეგი

თბილისი

წრიული სურათები

img-circle კლასი სურათს გამოსახავს წრიულად (IE8 ვერ აღიქვამს): <img src="tbilisi.jpg" class="img-circle" alt="თბილისი" width="304" height="236"> შედეგი

Cinque Terre

სურათები როგორც მინიატურები

img-thumbnail კლასი სურათს ანიჭებს მინიატურულ სტილს: <img src="tbilisi.jpg" class="img-thumbnail" alt="თბილისი" width="304" height="236"> შედეგი

Cinque Terre

რეაგირებადი ზომების სურათი

თუ გვსურს რომ სურათის ზომები ავტომატურად შეიცვალოს ეკრანის ზომების ცვლილებისას, მას უნდა მივცეთ img-responsive კლასი . ეს კლასი იყენებს შემდეგ თვისებებს: display: block; max-width: 100%; height: auto; <img class="img-responsive" src="img_chania.jpg" alt="Chania">
4. Bootstrap Jumbotron
Bootstrap Jumbotron ქმნის კონტეინერს, არეს, რომელიც ყურადღებას იქცევს განსაზღვრული სპეციალური შიგთავსით და ინფორმაციით. Jumbotron-ს აქვს რუხი ფონი და ადიდებს ამ კონტეინერში მოთავსებული ტექსტის ზომას, მასში შესაძლებელია სხვა HTML და Bootstrap ელემენტებისა და კლასების ჩასმა. Jumbotron-ის შესაქმნელად <div> ელემენტს უნდა მივანიჭოთ კლასი "jumbotron". იმისათვის რათა Jumbotron-მა არ დაიკავოს ეკრანის მთლიანი სიგანე იგი უნდა მოვათავსოთ <div class="container"> ელემენტში <div class="container">
  <div class="jumbotron">
   <h1>Bootstrap Tutorial</h1>
   <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. </p>
  </div>
</div> შედეგი

Jumbotron

გვერდის ქუდის შექმნა

page-header ამატებს ჰორიზონტალურ ხაზს კონტეინერის შემდეგ (+ ამატებს დამატებით სივრცეს მის ირგვლივ): <div class="page-header">
   <h1>გვერდის სათაური, ქუდი</h1>
</div> შედეგი

გვერდის სათაური, ქუდი
5. Bootstrap კლასი well
well კლასი ელემენტს ამატებს რუხ ფონის ფერსა და შიდა მიჯნას (padding), ამრგვალებს მის კუთხეებს: <div class="well">Basic Well</div> შედეგი
Basic Well
 ამ კლასის მონათესავე კლასებია well-sm კლასი პატარა ზომის well ელემენტებისათვის და well-lg კლასი იდი ზომის well ელემენტებისათვის. <div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>
6. Bootstrap შეტყობინებები
შეტყობინებები იქმნება alert კლასის მეშვეობით, მისი მონათესავე კონტექსტური კლასებია alert-success, alert-info, alert-warning და alert-danger. <div class="alert alert-success">
   <strong>წარმატება !</strong> მიუთითებს წარმატებულ ან პოზიტიურ ქმედებაზე.
</div>

<div class="alert alert-info">
   <strong>ინფო !</strong> მიუთითებს ნეიტრალურ ინფორმაციულ ქმედებაზე ან ცვლილებაზე.
</div>

<div class="alert alert-warning">
   <strong>გაფრთხილება !</strong> მიუთითებს გაფრთხილებაზე, რომლსაც ყურადღება უნდა მიექცეს.
</div>

<div class="alert alert-danger">
   <strong>საფრთხე !</strong> მიუთითებს საფრთხის შემცველ და ნეგატიურ ქმედებაზე.
</div> შედეგი
წარმატება ! მიუთითებს წარმატებულ ან პოზიტიურ ქმედებაზე.
ინფო ! მიუთითებს ნეიტრალურ ინფორმაციულ ქმედებაზე ან ცვლილებაზე.
გაფრთხილება ! მიუთითებს გაფრთხილებაზე, რომლსაც ყურადღება უნდა მიექცეს.
საფრთხე ! მიუთითებს საფრთხის შემცველ და ნეგატიურ ქმედებაზე.

ბმულები შეტყობინებებში

თუ შეტყობინებაში მოთავსებულ ბმულს მივცემთ კლასს - alert-link მაშინ ბმული მიიღებს თავისი მშობელი შეტყობინების შესაბამის ფერს <div class="alert alert-success">
   <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div> შედეგი
წარმატება ! წაიკითხეთ შეტყობინება.

შეტყობინებები დამხურავი ღილაკით

იმისათვის რათა შეგვეძლოს შეტყობინების დახურვა უნდა დავამატოთ მას კლასი alert-dismissable. შემდეგ კი შეტყობინების კონტეინერში მოთავსებულ ბმულს ან ღილაკ უნდა მივუთითოთ ატრიბუტები class="close" და data-dismiss="alert <div class="alert alert-success alert-dismissable">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
   <strong>წარმატება !</strong> მიუთითებს წარმატებულ ან პოზიტიურ ქმედებაზე.
</div> შედეგი
× წარმატება ! მიუთითებს წარმატებულ ან პოზიტიურ ქმედებაზე.

შეტყობინებების დახურვა ანიმაციის ეფექტით

შეტყობინების კონტეინერზე fade და in კლასების დამატებით ჩნდება ანიმაციის ეფექტი შეტყობინების დახურვისას <div class="alert alert-danger fade in"> შედეგი
× Danger! This alert box could indicate a dangerous or potentially negative action.
7. Bootstrap ღილაკები
ღილაკების სტილების განსაზღვრა ხდება შემდეგი კლასების მეშვეობით
  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</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> შედეგი ზემოთ ჩამოთვლილი კლასები შეიძლება გამოვიყენოთ <a>, <button> და <input> ელემენტებთან.

ღილაკების ზომები

ღილაკების ზომების განსაზღვრა ხდება შემდეგი კლასებით
  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button> შედეგი

ბლოკური მასშტაბის ღილაკები

ბლოკური მასშტაბის ღილაკი გაწელილია მშობელი ელემენტის მთლიან სიგანეზე, ამისათვის ღილაკს უნდა დავამატოთ btn-block კლასი. <button type="button" class="btn btn-primary btn-block">Button 1</button> შედეგი

აქტიური და გამორთული ღილაკები

ღილაკი შეიძლება იყოს აქტიური ან გამორთული, აქტიურ ღილაკზე მაუსის დაჭერა შესაძლებელია გამორთულზე არა. active კლასი ღილაკს ხდის ხელმისაწვდომს, disabled კლასის მქონე ღილაზე მაუსის დაჭერა კი შეუძლებელია: <button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button> შედეგი
8. Bootstrap ღილაკთა ჯგუფები
Bootstrap საშუალებას გვაძლევს რამოდენიმე ღილაკი დავაჯგუფოთ გავაერთიანოთ ერთ კონკრეტულ არეში. იმისათვის რათა ეს არე შეიქმნას <div> ელემენტს უნდა მივანიჭოთ კლასი btn-group <div class="btn-group">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
</div> შედეგი
ვთქვათ გვსურს რომ შევცვალოთ ჯგუფში შემავალი ღილაკების ზომა, ეს შესაძლებელია თუ სათითაოდ ყველა ღილაკის ზომას შევცლით სათითაოდ, მაგრამ იგივეს გაკეთება გაცილებით მართივად შეიძლება btn-group-lg|sm|xs კლასის მეშვეობით <div class="btn-group btn-group-lg">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
</div> შედეგი

ღილაკთა ვერტიკალური დაჯგუფებები

ღილაკთა ვერტიკალური დაჯგუფების შესაქმნელად უნდა გამოვიყენოთ btn-group-vertical კლასი. <div class="btn-group-vertical">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
</div> შედეგი

ღილაკები ეკრანის მთელ სიგანეზე

თუ გვსურს რომ ღილაკთა ჯგუფმა დაიკავოს ეკრანის მთლიანი სიგანე, მას უნდა მივანიჭოთ btn-group-justified კლასი <div class="btn-group btn-group-justified">
   <a href="#" class="btn btn-primary">Apple</a>
   <a href="#" class="btn btn-primary">Samsung</a>
   <a href="#" class="btn btn-primary">Sony</a>
</div> შედეგი
Apple Samsung Sony

ღილაკთა დაჯგუფებაში ჩამოსაშლელი მენიუს ჩადგმა

<div class="btn-group">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <div class="btn-group">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony <span class="caret"></span></button>
     <ul class="dropdown-menu" role="menu">
       <li><a href="#">Tablet</a></li>
       <li><a href="#">Smartphone</a></li>
     </ul>
   </div>
</div> შედეგი
9. Bootstrap იარლიყები, ნიშნულები

ნიშნულები

Bootstrap იარლიყები, ნიშნულები გამოიყენება მაგალითად იმის მისათითებლად თუ რამდენი ელემენტი უკავშირდება კონკრეტულ ბმულს. <a> ელემენტში ჩავდგათ <span> ელემენტი კლასით - badge <a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a> შედეგი News 5
Comments 10
Updates 2 ნიშნულების გამოყენება შესაძლებელია ღილაკებშიც <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button> შედეგი

იარლიყები

იარლიყები გამოიყენება რაიმეს შესახებ დამატებითი ინფორმაციის მისათითებლად. იარლიყის შესაქმნელად <span> ელემენტში უნდა გამოვიყენოთ label კლასი შემდეგ მონათესავე კლასებთან ერთად: label-default, label-primary, label-success, label-info, label-warning ან label-danger <h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-primary">New</span></h2>
<h3>Example <span class="label label-success">New</span></h3>
<h4>Example <span class="label label-info">New</span></h4>
<h5>Example <span class="label label-warning">New</span></h5>
<h6>Example <span class="label label-danger">New</span></h6> შედეგი

Example New

Example New

Example New

Example New

Example New
Example New
10. Bootstrap პროცესის ამსახველი (Progress Bar)

საბაზისო პროგრესბარი

პროგრესბარის დახმარებით მომხმარებელს საშუალება ეძლევა თვალყური ადევნოს თუ რა ეტაპზეა ესა თუ ის ოპერაცია (მაგ: ფაილის გადმოწერა). საბაზისო პროგრესბარის შესაქმნელად a <div> ელემენტს უნდა მივცეთ კლასი progress. <div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
     <span class="sr-only">70% Complete</span>
   </div>
</div> შედეგი
70% Complete
თუ <span> ელემენტს მოვუშლით კლასს - sr-only, მივიღებთ შედეგს
70% Complete

ფერადი პროგრესბარები

ზემოთ აღწერილი კონტექსტური კლასების გამოყენება შესაძლებელია პროგრესბარებთანაც
  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
     <span>70% Complete</span>
   </div>
</div> შედეგი
70% Complete
11. Bootstrap პაგინაცია, გვერდების გადანომრვა
თუ გვაქვს გვერდი სადაც ძალიან დიდი რაოდენობის ჩანაწერებია განთავსებული, სასურველია მოხდეს ამ ჩანაწერთა განაწილება გვერდების მიხედვით, ვთქვათ პირველ გვერდზე მოთავსდეს პირველი ათი ჩანაწერი მეორე გვერდზე მეორე ათი და ა.შ. ამას ეწოდება პაგინაცია ანუ გვერდების გადანომრვა. საბაზისო პაგინაციის შესაქმნელად უნდა გამოვიყენოთ <ul> ელემენტი კლასით pagination. <ul class="pagination">
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
</ul> შედეგი გამოვყოთ მიმდინარე ანუ აქტიური გვერდი, ამისათვის რომელიმე <li> ელემენტს უნდა მივანიჭოთ კლასი active <ul class="pagination">
   <li><a href="#">1</a></li>
   <li class="active"><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
</ul> შედეგი შესაძლებელია ბმულების ამ მწკრივიდან რომელიმე გავთიშოთ, ამისათვის უნდა გამოვიყენოთ კლასი disabled <ul class="pagination">
   <li><a href="#">1</a></li>
   <li class="active"><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li class="disabled"><a href="#">4</a></li>
   <li><a href="#">5</a></li>
</ul> შედეგი

ნავიგაციური იერარქია

ხანდახან საჭიროა მიმდინარე გვერდზე გამოვსახოთ, ამ გვერდის ლოკაცია მთლიან ნავიგაციურ იერარქიაში, ამისათვის გამოიყენება breadcrumb კლასი. <ul class="breadcrumb">
   <li><a href="#">Home</a></li>
   <li><a href="#">Private</a></li>
   <li><a href="#">Pictures</a></li>
   <li><a href="#">Vacation</a></li>
</ul> შედეგი

გვერდების გადამრთველი

გვერდების გადამრთველი არის პაგინაციის ფორმის ელემენტი, რომელიც შეიცავს ორ ღილაკს "წინა" და "შემდეგი". გვერდების გადამრთველის შესაქმნელად <ul> ელემენტს უნდა მივცეთ კლასი pager <ul class="pager">
   <li><a href="#">Previous</a></li>
   <li><a href="#">Next</a></li>
</ul> შედეგი

გადამრთველის ღილაკთა განლაგება

იმისათვის რათა ღილაკები გვერდის კიდეებზე განთავსდეს უნდა გამოვიყენოთ კლასები previous და next <ul class="pager">
   <li class="previous"><a href="#">Previous</a></li>
   <li class="next"><a href="#">Next</a></li>
</ul> შედეგი
12. Bootstrap სიათა ჯგუფები
საბაზისო სიათა ჯგუფის შესაქმნელად <ul> ელემენტს უნდა მივცეთ კლსი list-group, ხოლო <li> ელემენტებს მივცეთ კლასი list-group-item <ul class="list-group">
   <li class="list-group-item">First item</li>
   <li class="list-group-item">Second item</li>
   <li class="list-group-item">Third item</li>
</ul> შედეგი
  • First item
  • Second item
  • Third item

სიათა ჯგუფი ნიშნულებით

<ul class="list-group">
   <li class="list-group-item">First item <span class="badge">12</span></li>
   <li class="list-group-item">Second item <span class="badge">16</span></li>
   <li class="list-group-item">Third item <span class="badge">32</span></li>
</ul> შედეგი
  • First item 12
  • Second item 16
  • Third item 32

სიათა ჯგუფი ბმულებით

ბმულებიანი სიათა ჯგუფის შესაქმნელად <ul> ელემენტის მაგივრად უნდა გამოვიყენოთ <div> ელემენტი ხოლო <li> ელემენტის ნაცვლად - <a> ელემენტი, თუ სიის ელემენტებიდან რომელიმეს მივანიჭებთ კლასს - active, მივიღებთ აქტიურბმულიან სიას, ხოლო თუ გვსურს რომ რომელიმე ბმული გავხადოთ არააქტიური, მას უნდა მივცეთ კლასი disabled <div class="list-group">
   <a href="#" class="list-group-item">First item</a>
   <a href="#" class="list-group-item active">Second item</a>
   <a href="#" class="list-group-item disabled">Third item</a>
</div> შედეგი
First item Second item Third item
შესაძლებელია კონტექსტური კლასების გამოყენებაც: list-group-item-success, list-group-item-info, list-group-item-warning და list-group-item-danger <ul class="list-group">
   <li class="list-group-item list-group-item-success">First item</li>
   <li class="list-group-item list-group-item-info">Second item</li>
   <li class="list-group-item list-group-item-warning">Third item</li>
   <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul> შედეგი
  • First item
  • Second item
  • Third item
  • Fourth item
13. Bootstrap პანელები
bootstrap პანელი არის კონტეინერი ჩარჩოთი და შიდა მიჯნით (padding). პანელის შექმნა ხდება panel კლასით პანელის შიგთავსს კი აქვს კლასი panel-body. პანელს შეიძლება გაუკეთდეს ქუდი და ძირი, ქუდის კლასია panel-heading, ხოლო ძირის კლასი - panel-footer <div class="panel panel-default">
   <div class="panel-heading">Panel Heading</div>
   <div class="panel-body">A Basic Panel</div>
   <div class="panel-footer">Panel Footer</div>
</div> შედეგი
Panel Heading
A Basic Panel
Panel Footer

პანელთა ჯგუფები

იმისათვის რათა შევქმნათ პანელთა ჯგუფი საჭიროა ეს პანელები მოვათავსოთ <div> ელემენტში, რომლის კლასი იქნება panel-group, ეს კლასი შლის bottom-margin-ს თითოეული პანელისათვის <div class="panel-group">
   <div class="panel panel-default">
      <div class="panel-body">Panel Content</div>
   </div>
   <div class="panel panel-default">
      <div class="panel-body">Panel Content</div>
   </div>
</div> შედეგი
Panel Content
Panel Content
 პანელებთან შესაძლებელია კონტექსტური კლასების გამოყენებაც panel-default, panel-primary, panel-success, panel-info, panel-warning, და panel-danger <div class="panel-group">

   <div class="panel panel-default">
     <div class="panel-heading">Panel with panel-default class</div>
     <div class="panel-body">Panel Content</div>
   </div>

   <div class="panel panel-primary">
     <div class="panel-heading">Panel with panel-primary class</div>
     <div class="panel-body">Panel Content</div>
   </div>

   <div class="panel panel-success">
     <div class="panel-heading">Panel with panel-success class</div>
     <div class="panel-body">Panel Content</div>
   </div>

   <div class="panel panel-info">
     <div class="panel-heading">Panel with panel-info class</div>
     <div class="panel-body">Panel Content</div>
   </div>

   <div class="panel panel-warning">
     <div class="panel-heading">Panel with panel-warning class</div>
     <div class="panel-body">Panel Content</div>
   </div>

   <div class="panel panel-danger">
     <div class="panel-heading">Panel with panel-danger class</div>
     <div class="panel-body">Panel Content</div>
   </div>

</div> შედეგი
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
14. Bootstrap ჩამოსაშლელი მენიუები

საბაზისო ჩამოსაჭლელი მენიუ

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
       Dropdown Example <span class="caret"></span>
    </button>
   <ul class="dropdown-menu">
     <li class="disabled"><a href="#">HTML</a></li>
     <li class="active"><a href="#">CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li class="divider"></li>
     <li><a href="#">PHP</a></li>
     <li><a href="#">SQL</a></li>
   </ul>
</div> შედეგი
dropdown კლასი განსაზღვრავს მენიუს კონტეინერს, მენიუს შესაქმნელად უნდა გამოვიყენოთ <button> ან <a> ელემენტი რომელსაც ექნება dropdown-toggle კლასი და data-toggle="dropdown" ატრიბუტი. caret კლასი ქმნის პატარა სამკუთხედს რომელიც მიუთითებს, რომ ელემენტში მოთავსებულია ჩამოსაშლელი მენიუ (). dropdown-menu კლასის მქონე <ul> ელემენტი კი განსაზღვრავს თავად მენიუს. divider კლასი განსაზღვრავს მენიუში არსებულ ერთგვარ გამყოფს. disabled კლასის მეშვეობით შეგვიძლია გავთიშოთ რომელიმე ბმული, active კლასით კი განვსაზღვროთ აქტიური ბმული.

თუ გვსურს რომ მენიუ ზედა მიმართულებით აიშალოს მაშინ მენიუს კონტეინერის განმსაზღვრელ <div> ელემენტს უნდა მივცეთ კლასი dropup.
15. Bootstrap კეცვადი განყოფილებები
კეცვადი განყოფილებები გამოიყენება შიგთავსის კონრეტული ნაწილების დასამალად ან გამოსაჩენად.
Lorem ipsum dolor text....
collapse კლასი განსაზღვრავს კეცვად ელემენტს (ჩვენს შემთხვევაში <div>), ეს არის ის განყოფილება რომელიც დაიმალება ან გამოჩნდება ღილაკზე დაჭერისას. <a> ან <button> ელემენტს უნდა მივცეთ ატრიბუტი data-toggle="collapse". ღილაკის კეცვად კონტეინერთან დასაკავშირებლად, ამ კონტეინერს უნდა მივცეთ ატრიბუტი data-target="#id" (ჩვენს შემთხვევაში ეს კონტეინერი არის <div id="demo">). <a> ელემენტისათვის data-target ატრიბუტის ნაცვლად შესაძლებელია href ატრიბუტის გამოყენება. ნაგულისმეობის პრინციპით დასაწყისში კონტეინერი ყოველთვის დამალულია, თუ გვინდა რომ იგი ჩანდეს უნდა მივცეთ კლასი class="collapse in"

კეცვადი პანელი

<div class="panel-group">
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
       </h4>
     </div>
       <div id="collapse1" class="panel-collapse collapse">
         <div class="panel-body">Panel Body</div>
         <div class="panel-footer">Panel Footer</div>
     </div>
   </div>
</div> შედეგი

Collapsible panel

Panel Body
Panel Footer

კეცვადი სიათა ჯგუფი

<div class="panel-group">
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
       </h4>
     </div>
     <div id="collapse1" class="panel-collapse collapse">
       <ul class="list-group">
         <li class="list-group-item">One<</li>
         <li class="list-group-item">Two</li>
         <li class="list-group-item">Three</li>
       </ul>
       <div class="panel-footer">Footer</div>
     </div>
  </div>
</div>

Bootstrap აკორდეონი

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                    Collapsible Group 1</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                    Collapsible Group 2</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                    Collapsible Group 3</a>
            </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.</div>
        </div>
    </div>
</div>
შედეგი

Collapsible Group 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
16. Bootstrap მენიუები
მენიუების შესაქმნელად ხშირად გამოიყენება <ul> ელემენტი, თუ მას მივცემთ კლასს - list-inline, <h3>Inline List</h3>
<ul class="list-inline">
   <li><a href="#">Home</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
</ul> მივიღებთ შედეგს

Inline List

 <ul> ელემენტს ახლა მივცეთ კლასი nav nav-tabs, ხოლო მის ერთ-ერთ შვილობილ <li> ელემენტს კი კლასი - active <ul class="nav nav-tabs">
   <li><a href="#">Home</a></li>
   <li class="active"><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
</ul> მივიღებთ შედეგს ახლა შევქმნათ ჩამოსაშლელი მენიუ 
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
            <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Submenu 1-1</a></li>
            <li><a href="#">Submenu 1-2</a></li>
            <li><a href="#">Submenu 1-3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
</ul>
შედეგი <ul> ელემენტს ახლა მივცეთ კლასი nav nav-pills, ხოლო მის ერთ-ერთ შვილობილ <li> ელემენტს კი კლასი - active <ul class="nav nav-pills">
   <li><a href="#">Home</a></li>
   <li class="active"><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
</ul> მივიღებთ შედეგს <ul> ელემენტს დავამატოთ კლასი nav-stacked <ul class="nav nav-pills nav-stacked">
   <li><a href="#">Home</a></li>
   <li class="active"><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
</ul> მივიღებთ შედეგს

გადამრთველიანი დინამიური მენიუ

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

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
    </div>
</div>
შედეგი

HOME

Some content.
17. Bootstrap ნავიგაციური კონტეინერი
სტანდარტული ნავიგაციური კონტეინერის შესაქმნელად უნდა გამოვიყენოთ <nav class="navbar navbar-default">. 
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <h3>Basic Navbar Example</h3>
    <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
შედეგი

Basic Navbar Example

A navigation bar is a navigation header that is placed at the top of the page.

 თუ კლასს navbar-default შევცვლით კლასით navbar-inverse, მივიღებთ შედეგს ჩავდგათ ჩამოსაშლელი მენიუ ნავიგაციურ კონტეინერში 
<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Page 1-1</a></li>
                <li><a href="#">Page 1-2</a></li>
                <li><a href="#">Page 1-3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>
შედეგი ახლა ნავიგაციურ კონტეინერს დავუმატოთ მარჯვენა მხარეს განთავსებული ელემენტები 
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
    </div>
</nav>
შედეგი ნავიგაციურ კონტეინერს დავუმატოთ საძიებო ფორმა 
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" style="height: 28px;">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit">
                        <i class="glyphicon glyphicon-search"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</nav>
შედეგი ფიქსირებული პოზიციის მქონე ნავიგაციური კონტეინერის კლასებია navbar navbar-inverse navbar-fixed-top და navbar navbar-inverse navbar-fixed-bottom
18. Bootstrap ფორმები
Bootstrap-ის დახმარებით HTML ფორმის ელემენტები ავტომატურად იღებენ ზოგიერთ გლობალურ სტილს. form-control კლასის მქონე <input>, <textarea> და <select> ელემენტები იკავებენ სიგანის 100%-ს. Bootstrap-ში გვხვდება სამი სახის ფორმები
  • ვერტიკალური ფორმები (ნაგულისმეობის პრინციპი)
  • ჰორიზონტალური ფორმები
  • ხაზსშიდა ფორმები
ფორმის კონტეინერის განსაზღვრა ხდება <div class="form-group"> ელემენტით, <input>, <textarea> და <select> ელემენტებს კი უნდა მივცეთ კლასი form-control.

ვერტიკალური ფორმა

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
შედეგი

ხაზსშიდა ფორმა

<form class="form-inline">
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
შედეგი

ჰორიზონტალური ფორმა

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>
შედეგი
19. Bootstrap მოდალური ფანჯრები
შევქმნათ საბაზისო მოდალური ფანჯარა 
<!-- მოდალური ფანჯრის ღილაკი -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
შედეგი მოდალური ფანჯრის ზომების განსაზღვრა ხდება კლასებით: <div class="modal-dialog modal-sm"> და <div class="modal-dialog modal-lg">
20. Bootstrap Scrollspy
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body {
            position: relative;
        }
        #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
        #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
        #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
        #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
        #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
    </style>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a href="#section1">Section 1</a></li>
                    <li><a href="#section2">Section 2</a></li>
                    <li><a href="#section3">Section 3</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#section41">Section 4-1</a></li>
                            <li><a href="#section42">Section 4-2</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<div id="section1" class="container-fluid">
    <h1>Section 1</h1>
    <p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="section2" class="container-fluid">
    <h1>Section 2</h1>
    <p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="section3" class="container-fluid">
    <h1>Section 3</h1>
    <p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="section41" class="container-fluid">
    <h1>Section 4 Submenu 1</h1>
    <p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="section42" class="container-fluid">
    <h1>Section 4 Submenu 2</h1>
    <p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>

<script>
    $(document).ready(function(){
        // Add scrollspy to <body>
        $('body').scrollspy({target: ".navbar", offset: 50});

        // Add smooth scrolling on all links inside the navbar
        $("#myNavbar a").on('click', function(event) {
            // Make sure this.hash has a value before overriding default behavior
            if (this.hash !== "") {
                // Prevent default anchor click behavior
                event.preventDefault();

                // Store hash
                var hash = this.hash;

                // Using jQuery's animate() method to add smooth page scroll
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function(){

                    // Add hash (#) to URL when done scrolling (default click behavior)
                    window.location.hash = hash;
                });
            }  // End if
        });
    });
</script>

</body>
</html>
21. Bootstrap ბადური სისტემა
Bootstrap ბადური სისტემა გვერდს ყოფს 12 სვეტად, თუ არ გვსურს 12-ვე სვეტის გამოყენება, შესაძლებელია ამ სვეტების დაჯგუფებაც.



Bootstrap ბადური სისტემით შექმნილი დიზაინი არის რეაგირებადი (responsive), სვეტთა განლაგება იცვლება ეკრანის ზომენიდან გამომდინარე: კონკრეტული დიზაინი დიდ ეკრანზე შესაძლებელია იყოფოდეს სამ სვეტად, მაგრამ პატარა ეკრანებისათვის უკეთესი იქნება თუ ამ სვეტების შიგთავსი ერთ სვეტში წარმოდგება და განთავსდება ერთმანეთის თავზე. Bootstrap ბადური სისტემას აქვს სვეტების განსაზღვრის ოთხი კლასი:
  • xs (მობილურებისათვის)
  • sm (ტაბლეტებისათვის)
  • md (დესკტოპებისათვის)
  • lg (დიდი ზომის დესკტოპებისთვის)
შესძლებელია ამ კლასთა გაერთიანებები, რათა დიზაინი იყოს უფრო დინამიური და მოქნილი. მოვიყვანოთ ზოგიერთი წესი რომელიც აუცუილებლად უნდა დავიცვათ ბადური დიზაინის შექმნისას:

  • სვეტთა დაჯგუფებები უნდა მოვაქციოთ სტრიქონში, რომელიც არის ჩვეულებრივი </div> ელემენტი კლასით row.
  • სტრიქონები უნდა მოვაქციოთ კონტეინერში, რომელიც არის ჩვეულებრივი </div> ელემენტი კლასით container (ფიქსირებული სიგანე) ან კლასით container-fluid (მთლიანი სიგანე).
  • შიგთავსი უნდა მოთავსდეს მხოლოდ და მხიოლოდ სვეტებში, სტრიქონებს კი არ უნდა გააჩნდეთ სხვა შვილობილი ელემენტები გარდა სვეტებისა.
  • როგორც აღვნიშნეთ ბადური სისტემა მთლიან სიგანეს ჰყოფს თორმეტ ნაწილად, თუ გვსურს რომ სვეტი გაიწელოს 3 სვეტზე მას უნდა მივცეთ კლასი col-sm-3, ბუნებრივია ამავე სტრიქონში ვეღარ მოვათავსებთ სვეტს კლასით col-sm-11, რადგან პირველი სვეტი მოიცავს სიგანის სამ მეთორმეტედს, მეორე კი თერთმეტ მეთორმეტედს, სულ გვაქვს 12 ცალი მეთორმეტედი, 11+3 კი მეტია 12-ზე. ერთ სტრიქონში მოთავსებულ სვეტებში შემავალი მთლიანი სიგანის მეთორმეტედთა რაოდენობა ყოველთვის უნდა იყოს 12.


პატარა ზომის ეკრანები

მოვიყვანოთ საბაზისო ბადური სისტემის მაგალითი <div class="container">
   <div class="row">
     <div class="col-sm-12">col-sm-12</div>
   </div>
   <div class="row">
     <div class="col-sm-3">col-sm-3</div>
     <div class="col-sm-9">col-sm-9</div>
   </div>
   <div class="row">
     <div class="col-sm-12">col-sm-12</div>
   </div>
</div> შედეგი
col-sm-12
col-sm-3
col-sm-9
col-sm-12
 col-sm-* კლასებით ხდება დიზაინების შექმნა პატარა ზომის ეკრანებისათვის, პატარა ეკრანებად ითვლება ეკრანები რომელთა სიგანე 768 პიქსელიდან 991 პიქსელამდეა. ჩვენს შემთხვევაში სვეტთა სიგანეების მთლიან სიგანესთან შეფარდება გადანაწილდება ასე - 25%/75%.

საშუალო ზომის ეკრანები

საშუალო ზომის ეკრანებად ითვლება ეკრანები რომელთა სიგანე 992 პიქსელიდან 1199 პიქსელამდეა. ასეთი ეკრანებისათვის დიზაინის შესაქმნელად გამოიყენება col-md-* კლასები. ვთქვათ გვსურს, რომ საშუალო ზომის ეკრანებზე ჩვენი ორი სვეტის სიგანეები პროცენტულად გადანაწილდეს ასე - 50%/50%. ამისათვის სვეტთა კლასები ჩაიწერება შემდეგნაირად <div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div> ამ შემთხვევაში თუ ეკრანის ზომა იქნება 768 პიქსელიდან 991 პიქსელამდე მაშინ გვექნება ის სურათი რაც ზემოთაა მოყვანილი, ხოლო თუ ეკრანის სიგანე 992 პიქსელიდან 1199 პიქსელამდეა მივიღებთ შედეგს
col-sm-12
col-sm-3, col-md-6
col-sm-9, col-md-6
col-sm-12

დიდი ეკრანები

დიდ ეკრანებად ითვლება ეკრანები, რომელთა სიგანეები 1200 პიქსელზე მეტია, ასეთი ეკრანებისათვის დიზაინის შესაქმნელად გამოიყენება col-lg-* კლასები. <div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div> მოყვანილი მაგალითის მიხედვით ეკრანთა მთლიანი სიგანე დაიყოფა შემდეგი პროცენტული შეფარდებებით: 25%/75% პატარა ეკრანებისათვის, 50%/50% საშუალო ეკრანებისათვის და 33%/66% დიდი ზომის ეკრანებისათვის.

სვეტების გადაადგილება

სვეტების გადაადგილება მარჯვნივ შესაძლებელია .offset-md-* კლასის მეშვეობით. ეს კლასი განსაზღვრავს თუ რამდენი col-md-1-ით ანუ მთლიანი სტრიქონის რამდენი ერთი მეთორმეტედით უნდა გაიწიოს კონკრეტული სვეტი მარჯვნივ, სხვა სიტყვებით კლასი განსაზღვრავს სვეტის მარცხენა მიჯნას სვეტებში (margin-left). მაგალითად .offset-md-4 კლასი .col-md-4 სვეტს გადაადგილებს მარჯვნივ 4 ცალი col-md-1 სვეტით. 
<div class="container" style="width: 100%;">
 <div class="row">
   <div class="col-md-4">col-md-4</div>
   <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
 </div>
 <div class="row">
   <div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
   <div class="col-md-4 col-md-offset-2">col-md-4 col-md-offset-2</div>
 </div>
 <div class="row">
   <div class="col-md-6 col-md-offset-3">col-md-6 col-md-offset-3</div>
 </div>
</div>
შედეგი
col-md-4
col-md-4 col-md-offset-4
col-md-4 col-md-offset-1
col-md-4 col-md-offset-2
col-md-6 col-md-offset-3



Bootstrap 4


1. შესავალი
Bootstrap 4 არის ბიბლიოთეკის ბოლო ვერსია, ამ თავში განვიხილავთ მხოლოდ იმ ელემენტებს და ინსტრუმენტებს რაც არ იყო ბიბლიოთეკის მე-3-ე ვერსიაში.

Bootstrap 4 იყენებს jQuery-ს და Popper.js-ს JavaScript კომპონენტებთან მუშაობისათვის. (მოდალური ფანჯრები და ა.შ). თუმცა თუ Bootstrap-ის მხოლოდ CSS ნაწილი გვჭირდება მაშინ არც ამ ფაილების გადმოწერაა აუცილებელი.
2. ბადური სისტემის საფუძველი
როგორც ვიცით Bootstrap-ის ბადური სისტემა შედგება 12 სვეტისაგან. Bootstrap 4-ში ამ სვეტებს შეიძლება გააჩნდეთ შემდეგი კლასები
  • .col- (ექსტრემალურად პატარა ეკრანი - 576px ნაკლები)
  • .col-sm- (პატარა ეკრანი - 576px და მეტი)
  • .col-md- (საშუალო ზომის ეკრანი - 768px და მეტი)
  • .col-lg- (დიდი ზომის ეკრანი - 992px და მეტი)
  • .col-xl- (ექსტრემალურად დიდი ეკრანი - 1200px და მეტი)
უფრო მეტი ეფექტურობისათვის შესაძლებელია ამ კლასთა კომბინაციების გამოყენებაც (ერთდროულად მივანიჭოთ რომელიმე ელემენტს რამოდენიმე მათგანი).

თუ ერთი და იმავე სიგანის მქონე სვეტების გაკეთება გვინდა აღარაა აუცილებელი კლასის ყველა პარამეტრის მითითება .col-*-* საკმარისია სვეტებს მივცეთ კლასი .col 
<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>
სამი სვეტის შემთხვევაში მათი სიგანეები იქნება დაახლოებით 33.33%, ოთხი სვეტის შემთხვევაში - 25% და ა.შ.
3. ფერები

ტექსტის ფერები

Bootstrap 4-ში არის კონტექსტური კლასები, რომლებიც გამოიყენება ტექსტის ფერის შესაცვლელად: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (ნაგულისხმეობის პრინციპით body ელემენტის ფერი), .text-light 
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
შედეგი

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

Default body color (often black).

This text is light grey (on white background).

This text is white (on white background).

ფონის ფერები

ფონის ფერის შესაცვლელი კლასებია .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light. 
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
შედეგი

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

4. Scrollspy
Scrollspy გამოიყენება ნავიგაციაში ბმულების მდგომარეობის განახლებისათვის, იმის მიხედვით თუ როგორ ჩამოვაცურებთ საიტის გვერდს.