კომპონენტები

ათობით მრავალჯერადი გამოყენების კომპონენტი ჩაშენებულია Bootstrap-ში, რათა უზრუნველყოს ნავიგაცია, გაფრთხილებები, პოპოვერები და მრავალი სხვა.

ღილაკების ჯგუფები

გამოიყენეთ ღილაკების ჯგუფები მრავალი ღილაკის შეერთებისთვის, როგორც ერთი კომპოზიტური კომპონენტი. ააშენეთ ისინი სერიით <a>ან <button>ელემენტებით.

საუკეთესო პრაქტიკა

ჩვენ გირჩევთ შემდეგ მითითებებს ღილაკების ჯგუფებისა და ხელსაწყოთა ზოლების გამოყენებისთვის:

  • ყოველთვის გამოიყენეთ ერთი და იგივე ელემენტი ერთი ღილაკის ჯგუფში, <a>ან <button>.
  • არ აურიოთ სხვადასხვა ფერის ღილაკები იმავე ღილაკების ჯგუფში.
  • გამოიყენეთ ხატები ტექსტის დამატებით ან მის ნაცვლად, მაგრამ დარწმუნდით, რომ შეიყვანეთ ალტერნატიული და სათაურის ტექსტი, სადაც საჭიროა.

დაკავშირებული ღილაკების ჯგუფები ჩამოსაშლელი ღილაკებით (იხ. ქვემოთ) უნდა გამოიძახოს ცალკე და ყოველთვის უნდა შეიცავდეს ჩამოსაშლელ ღილაკს, რათა მიუთითებდეს განზრახ ქცევას.

ნაგულისხმევი მაგალითი

აი, როგორ ეძებს HTML სტანდარტული ღილაკების ჯგუფს, რომელიც აგებულია წამყვანის ტეგის ღილაკებით:

  1. <div class = "btn-ჯგუფი" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

ხელსაწყოთა ზოლის მაგალითი

შეუთავსეთ კომპლექტები <div class="btn-group">უფრო <div class="btn-toolbar">რთული კომპონენტებისთვის.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-ჯგუფი" >
  3. ...
  4. </div>
  5. </div>

Checkbox და რადიო არომატები

ღილაკების ჯგუფებს ასევე შეუძლიათ იმოქმედონ როგორც რადიოსადგურები, სადაც შეიძლება იყოს მხოლოდ ერთი ღილაკი აქტიური, ან ჩამრთველი, სადაც ნებისმიერი რაოდენობის ღილაკი შეიძლება იყოს აქტიური. ამისათვის იხილეთ Javascript დოკუმენტები .

მიიღეთ javascript »

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

Თავები მაღლა! ჩამოსაშლელი ღილაკები ცალ-ცალკე უნდა იყოს შეფუთული საკუთარ .btn-groupთავში .btn-toolbarსათანადო რენდერისთვის.

ღილაკების ჩამოსაშლელები

მიმოხილვა და მაგალითები

გამოიყენეთ ნებისმიერი ღილაკი ჩამოსაშლელი მენიუს გასააქტიურებლად, მისი მოთავსებით .btn-groupდა მენიუს შესაბამისი მარკირების უზრუნველყოფით.

მარკირების მაგალითი

ღილაკების ჯგუფის მსგავსად, ჩვენი მარკირება იყენებს ღილაკების რეგულარულ მარკირებას, მაგრამ რამდენიმე დამატებით სტილის დახვეწისთვის და Bootstrap-ის ჩამოსაშლელი jQuery მოდულის მხარდასაჭერად.

  1. <div class = "btn-ჯგუფი" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. მოქმედება
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ჩამოშლილი მენიუ" >
  7. <!-- ჩამოსაშლელი მენიუს ბმულები -->
  8. </ul>
  9. </div>

მუშაობს ყველა ზომის ღილაკზე

ღილაკების ჩამოსაშლელები მუშაობს ნებისმიერ ზომაზე. თქვენი ღილაკების ზომებია .btn-large, .btn-smallან .btn-mini.

მოითხოვს ჯავასკრიპტს

ღილაკების ჩამოსაშლელი ჩანაწერები საჭიროებს Bootstrap ჩამოსაშლელ დანამატს ფუნქციონირებისთვის.

ზოგიერთ შემთხვევაში, როგორიცაა მობილური, ჩამოსაშლელი მენიუები გავრცელდება ხედვის პორტის გარეთ. თქვენ უნდა მოაგვაროთ გასწორება ხელით ან მორგებული Javascript-ით.


გაყოფის ღილაკების ჩამოსაშლელები

მიმოხილვა და მაგალითები

ღილაკების ჯგუფის სტილისა და მარკირების საფუძველზე, ჩვენ შეგვიძლია მარტივად შევქმნათ გაყოფის ღილაკი. გაყოფის ღილაკებს აქვთ სტანდარტული მოქმედება მარცხნივ და ჩამოსაშლელი გადართვა მარჯვნივ კონტექსტური ბმულებით.

ზომები

გამოიყენეთ დამატებითი ღილაკების კლასები .btn-mini, .btn-smallან .btn-largeზომისთვის.

  1. <div class = "btn-ჯგუფი" >
  2. ...
  3. <ul class = "ჩამოშლილი მენიუ pull-right" >
  4. <!-- ჩამოსაშლელი მენიუს ბმულები -->
  5. </ul>
  6. </div>

მარკირების მაგალითი

ჩვენ ვაფართოვებთ ღილაკების ნორმალურ ჩამოსაშლელებს, რათა მივაწოდოთ მეორე ღილაკის მოქმედება, რომელიც მოქმედებს როგორც ცალკე ჩამოსაშლელი გამომწვევი.

  1. <div class = "btn-ჯგუფი" >
  2. <button class = "btn" > მოქმედება </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ჩამოშლილი" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ჩამოშლილი მენიუ" >
  7. <!-- ჩამოსაშლელი მენიუს ბმულები -->
  8. </ul>
  9. </div>

ჩამოსაშლელი მენიუები

ჩამოსაშლელი მენიუები ასევე შეიძლება გადართვა ქვემოდან ზევით, ერთი კლასის დაუყოვნებელი მშობლის დამატებით .dropdown-menu. ის .caretგადააბრუნებს მენიუს მიმართულებას და გადაანაცვლებს მენიუს ისე, რომ გადაადგილდეს ქვემოდან ზემოდან და არა ზემოდან ქვემოთ.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > ჩამოსაშლელი </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ჩამოშლილი" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ჩამოშლილი მენიუ" >
  7. <!-- ჩამოსაშლელი მენიუს ბმულები -->
  8. </ul>
  9. </div>

მულტიკონ-გვერდიანი პაგინაცია

როდის გამოვიყენოთ

ულტრა გამარტივებული და მინიმალურად სტილიზებული გვერდები, შთაგონებული Rdio-ით, შესანიშნავია აპებისა და ძიების შედეგებისთვის. დიდი ბლოკი ძნელია გამოტოვოთ, ადვილად მასშტაბირებადია და უზრუნველყოფს დაწკაპუნების დიდ არეებს.

სახელმწიფო გვერდის ბმულები

ბმულები კონფიგურირებადია და მუშაობს რიგ გარემოებებში სწორი კლასით. .disabledდაუწკაპუნებელი ბმულებისთვის და .activeმიმდინარე გვერდისთვის.

მოქნილი განლაგება

დაამატეთ ორი არჩევითი კლასიდან რომელიმე, რათა შეცვალოთ პაგინაციის ბმულების გასწორება: .pagination-centeredდა .pagination-right.

მაგალითები

ნაგულისხმევი პაგინაციის კომპონენტი მოქნილია და მუშაობს რამდენიმე ვარიაციით.

მარკირება

შეფუთული <div>, პაგინაცია არის მხოლოდ <ul>.

  1. <div class = "გვერდები" >
  2. <ul>
  3. <li><a href = "#" > წინა </a></li>
  4. <li class = "აქტიური" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > შემდეგი </a></li>
  11. </ul>
  12. </div>

პეიჯერი სწრაფი წინა და შემდეგი ბმულებისთვის

პეიჯერის შესახებ

პეიჯერის კომპონენტი არის ბმულების ერთობლიობა მარტივი პაგინაციის განხორციელებისთვის მსუბუქი მარკირებით და კიდევ უფრო მსუბუქი სტილით. ეს შესანიშნავია მარტივი საიტებისთვის, როგორიცაა ბლოგები ან ჟურნალები.

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

პეიჯერის ბმულები ასევე იყენებენ ზოგად .disabledკლასს პაგინაციიდან.

ნაგულისხმევი მაგალითი

ნაგულისხმევად, პეიჯერის ცენტრებში ბმულები.

  1. <ul class = "პეიჯერ" >
  2. <li>
  3. <a href = "#" > წინა </a>
  4. </li>
  5. <li>
  6. <a href = "#" > შემდეგი </a>
  7. </li>
  8. </ul>

გასწორებული ბმულები

ალტერნატიულად, თქვენ შეგიძლიათ გაასწოროთ თითოეული ბმული გვერდებზე:

  1. <ul class = "პეიჯერ" >
  2. <li class = "წინა" >
  3. <a href = "#" > უფრო ძველი </a>
  4. </li>
  5. <li class = "შემდეგი" >
  6. <a href = "#" > უფრო ახალი → </a>
  7. </li>
  8. </ul>
ეტიკეტები მარკირება
ნაგულისხმევი <span class="label">Default</span>
წარმატებები <span class="label label-success">Success</span>
გაფრთხილება <span class="label label-warning">Warning</span>
Მნიშვნელოვანი <span class="label label-important">Important</span>
ინფორმაცია <span class="label label-info">Info</span>
ინვერსიული <span class="label label-inverse">Inverse</span>

შესახებ

სამკერდე ნიშნები არის პატარა, მარტივი კომპონენტები ინდიკატორის ან რაიმე სახის რაოდენობის ჩვენებისთვის. ისინი ჩვეულებრივ გვხვდება ელ.ფოსტის კლიენტებში, როგორიცაა Mail.app ან მობილურ აპებში Push-შეტყობინებებისთვის.

ხელმისაწვდომი კლასები

სახელი მაგალითი მარკირება
ნაგულისხმევი 1 <span class="badge">1</span>
წარმატებები 2 <span class="badge badge-success">2</span>
გაფრთხილება 4 <span class="badge badge-warning">4</span>
Მნიშვნელოვანი 6 <span class="badge badge-important">6</span>
ინფორმაცია 8 <span class="badge badge-info">8</span>
ინვერსიული 10 <span class="badge badge-inverse">10</span>

გმირის ერთეული

Bootstrap უზრუნველყოფს მსუბუქ, მოქნილ კომპონენტს, რომელსაც ეწოდება გმირის ერთეული, რათა აჩვენოს შინაარსი თქვენს საიტზე. ის კარგად მუშაობს მარკეტინგისა და შინაარსით დატვირთულ საიტებზე.

მარკირება

შეფუთეთ თქვენი შინაარსი divლაიქით ასე:

  1. <div class = "გმირი-ერთეული" >
  2. <h1> სათაური </h1>
  3. <p> სლოგანი </p>
  4. <p>
  5. <a class = "btn btn-ძირითადი btn-large" >
  6. Გაიგე მეტი
  7. </a>
  8. </p>
  9. </div>

Გამარჯობა მსოფლიო!

ეს არის მარტივი გმირის ერთეული, მარტივი ჯუმბოტრონის სტილის კომპონენტი, რომელიც დამატებით ყურადღებას აქცევს გამორჩეულ შინაარსს ან ინფორმაციას.

Გაიგე მეტი

გვერდის სათაური

მარტივი გარსი h1გვერდის შინაარსის სექციების სათანადოდ განსათავსებლად და სეგმენტისთვის. მას შეუძლია გამოიყენოს h1ნაგულისხმევი smallელემენტი, ისევე როგორც სხვა კომპონენტების უმეტესობა (დამატებითი სტილებით).

  1. <div class = "გვერდის სათაური" >
  2. <h1> გვერდის სათაურის მაგალითი </h1>
  3. </div>

ნაგულისხმევი ესკიზები

ნაგულისხმევად, Bootstrap-ის ესკიზები შექმნილია იმისთვის, რომ აჩვენოს დაკავშირებული სურათები მინიმალური საჭირო მარკირებით.

მაღალი კონფიგურირებადი

ცოტა დამატებითი მარკირებით, შესაძლებელია ნებისმიერი სახის HTML შინაარსის დამატება, როგორიცაა სათაურები, აბზაცები ან ღილაკები ესკიზებში.

  • მინიატურების ეტიკეტი

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

    მოქმედება მოქმედება

  • მინიატურების ეტიკეტი

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

    მოქმედება მოქმედება

რატომ გამოვიყენოთ ესკიზები

ესკიზები (ადრე .media-grid1.4-მდე) შესანიშნავია ფოტოების ან ვიდეოების ბადეებისთვის, სურათების ძიების შედეგებისთვის, საცალო ვაჭრობის პროდუქტებისთვის, პორტფოლიოებისთვის და მრავალი სხვა. ისინი შეიძლება იყოს ბმულები ან სტატიკური შინაარსი.

მარტივი, მოქნილი მარკირება

მინიატურების მარკირება მარტივია - ulნებისმიერი რაოდენობის liელემენტებით არის ყველაფერი რაც საჭიროა. ის ასევე არის სუპერ მოქნილი, რაც საშუალებას გაძლევთ მიიღოთ ნებისმიერი ტიპის კონტენტი ცოტა მეტი მარკირებით თქვენი შინაარსის შესაფუთად.

იყენებს ბადის სვეტის ზომებს

და ბოლოს, მინიატურების კომპონენტი იყენებს ქსელის სისტემის არსებულ კლასებს, როგორიცაა .span2ან .span3— ესკიზების ზომების გასაკონტროლებლად.

მარკირება

როგორც უკვე აღვნიშნეთ, ესკიზებისთვის საჭირო მარკირება მსუბუქი და მარტივია. აქ მოცემულია ნაგულისხმევი დაყენება დაკავშირებული სურათებისთვის :

  1. <ul class = "მინიატურები" >
  2. <li class = "span3" >
  3. <a href = "#" class = "მინიატურა" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

ესკიზებში მორგებული HTML შინაარსისთვის, მარკირება ოდნავ იცვლება. ბლოკის დონის შინაარსის სადმე დასაშვებად, ჩვენ ვცვლით <a>მსგავსს <div>ასე:

  1. <ul class = "მინიატურები" >
  2. <li class = "span3" >
  3. <div class = "მინიატურა" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> მინიატურების ლეიბლი </h5>
  6. <p> ესკიზის წარწერა სწორედ აქ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

მეტი მაგალითები

გამოიკვლიეთ თქვენი ყველა ვარიანტი თქვენთვის ხელმისაწვდომი სხვადასხვა ბადის კლასებით. ასევე შეგიძლიათ აურიოთ და შეადაროთ სხვადასხვა ზომის.

ნაგულისხმევი მსუბუქი წონა

გადაწერილი საბაზისო კლასი

Bootstrap 2-ით ჩვენ გავამარტივეთ საბაზისო კლასი: .alertნაცვლად .alert-message. ჩვენ ასევე შევამცირეთ მინიმალური საჭირო მარკირება — <p>ნაგულისხმევად არაა საჭირო, მხოლოდ გარე <div>.

ერთი გაფრთხილების შეტყობინება

უფრო გამძლე კომპონენტისთვის ნაკლები კოდით, ჩვენ წავშალეთ ბლოკის გაფრთხილებების დიფერენცირებადი სახე, შეტყობინებები, რომლებიც მოჰყვება მეტ ბალიშს და, როგორც წესი, მეტ ტექსტს. კლასი ასევე შეიცვალა .alert-block.


შესანიშნავად უხდება JavaScript-ს

Bootstrap-ს გააჩნია შესანიშნავი jQuery მოდული, რომელიც მხარს უჭერს გაფრთხილების შეტყობინებებს, რაც მათ სწრაფ და მარტივს ხდის მათ გაუქმებას.

მიიღეთ დანამატი »

გაფრთხილების მაგალითები

შეფუთეთ თქვენი შეტყობინება და სურვილისამებრ დახურვის ხატულა div-ში მარტივი კლასით.

გაფრთხილება! საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით.
  1. <div class = "გაფრთხილება" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> გაფრთხილება! </strong> საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით.
  4. </div>

Თავები მაღლა! iOS მოწყობილობები საჭიროებენ href="#"გაფრთხილებების გაუქმებას. დარწმუნდით, რომ ჩართეთ იგი და მონაცემთა ატრიბუტი წამყვანის დახურვის ხატულებისთვის. ალტერნატიულად, შეგიძლიათ გამოიყენოთ <button>ელემენტი მონაცემთა ატრიბუტით, რომელიც ჩვენ ავირჩიეთ ჩვენი დოკუმენტებისთვის. გამოყენებისას <button>თქვენ უნდა შეიტანოთ, წინააღმდეგ შემთხვევაში type="button"თქვენი ფორმები შეიძლება არ იყოს წარმოდგენილი.

მარტივად გააფართოვეთ სტანდარტული გაფრთხილების შეტყობინება ორი სურვილისამებრ კლასით: .alert-blockმეტი padding და ტექსტური კონტროლისთვის და .alert-headingშესაბამისი სათაურისთვის.

გაფრთხილება!

საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > გაფრთხილება! </h4>
  4. საუკეთესოდ შეამოწმე შენი თავი, შენ არ ხარ...
  5. </div>

კონტექსტური ალტერნატივები დაამატეთ არჩევითი კლასები გაფრთხილების კონოტაციის შესაცვლელად

შეცდომა ან საფრთხე

ოჰ სნეპი! შეცვალეთ რამდენიმე რამ და სცადეთ ხელახლა გაგზავნა.
  1. <div class = "გაფრთხილების გაფრთხილება-შეცდომა" >
  2. ...
  3. </div>

წარმატებები

კარგად გააკეთე! თქვენ წარმატებით წაიკითხეთ ეს მნიშვნელოვანი გაფრთხილება.
  1. <div class = "გაფრთხილება-წარმატება" >
  2. ...
  3. </div>

ინფორმაცია

Თავები მაღლა! ეს გაფრთხილება საჭიროებს თქვენს ყურადღებას, მაგრამ ეს არ არის ძალიან მნიშვნელოვანი.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

მაგალითები და მარკირება

ძირითადი

ნაგულისხმევი პროგრესის ზოლი ვერტიკალური გრადიენტით.

  1. <div class = "პროგრესი" >
  2. <div class = "ბარი"
  3. style = " სიგანე : 60 %; " </div>
  4. </div>

ზოლიანი

იყენებს გრადიენტს ზოლიანი ეფექტის შესაქმნელად (IE არ არის).

  1. <div class = "პროგრესი პროგრესი-ზოლიანი" >
  2. <div class = "ბარი"
  3. style = " სიგანე : 20 %; " </div>
  4. </div>

ანიმაციური

იღებს ზოლიან მაგალითს და ანიმირებს მას (IE არ არის).

  1. <div class = "პროგრესი პროგრესი-ზოლიანი
  2. აქტიური" >
  3. <div class = "ბარი"
  4. style = " სიგანე : 40 %; " </div>
  5. </div>

ოფციები და ბრაუზერის მხარდაჭერა

დამატებითი ფერები

პროგრესის ზოლები იყენებენ იმავე ღილაკებს და გაფრთხილების კლასებს თანმიმდევრული სტილისთვის.

ზოლიანი ზოლები

მყარი ფერების მსგავსად, ჩვენ გვაქვს მრავალფეროვანი ზოლიანი პროგრესის ზოლები.

Მოქმედება

პროგრესის ზოლები იყენებს CSS3 გადასვლებს, ასე რომ, თუ დინამიურად დაარეგულირებთ სიგანეს Javascript-ის საშუალებით, ის შეუფერხებლად შეიცვლის ზომას.

თუ იყენებთ .activeკლასს, თქვენი .progress-stripedპროგრესის ზოლები აცოცხლებს ზოლებს მარცხნიდან მარჯვნივ.

ბრაუზერის მხარდაჭერა

პროგრესის ზოლები იყენებენ CSS3 გრადიენტებს, გადასვლებს და ანიმაციებს, რათა მიაღწიონ ყველა მათ ეფექტს. ეს ფუნქციები არ არის მხარდაჭერილი IE7-9 ან Firefox-ის უფრო ძველ ვერსიებში.

Opera და IE ამჯერად ანიმაციებს არ უჭერს მხარს.

ჭალები

გამოიყენეთ ჭა, როგორც მარტივი ეფექტი ელემენტზე, რომ მისცეთ მას ჩასმული ეფექტი.

შეხედე, ჭაში ვარ!
  1. <div class = "კარგად" >
  2. ...
  3. </div>

დახურვის ხატულა

გამოიყენეთ ზოგადი დახურვის ხატულა ისეთი კონტენტის გასაუქმებლად, როგორიცაა მოდალები და გაფრთხილებები.

  1. <button class = "დახურვა" > × </button>

iOS მოწყობილობებს ესაჭიროებათ href="#" დაწკაპუნების მოვლენებისთვის, თუ თქვენ უფრო მეტად იყენებთ წამყვანს.

  1. <a class = "close" href = "#" > × </a>