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

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

მაგალითები

ორი ძირითადი ვარიანტი, ორ უფრო კონკრეტულ ვარიაციასთან ერთად.

ჯგუფი ერთი ღილაკით

შემოახვიეთ ღილაკების სერია .btnში .btn-group.

  1. <div class = "btn-ჯგუფი" >
  2. <button class = "btn" > მარცხენა </button>
  3. <button class = "btn" > შუა </button>
  4. <button class = "btn" > მარჯვენა </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>

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

ღილაკების ნაკრები გამოჩნდეს ვერტიკალურად დაწყობილი და არა ჰორიზონტალურად.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

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

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

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

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

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

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

  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.

საჭიროებს JavaScript-ს

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

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


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

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

  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>

ზომები

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

  1. <div class = "btn-ჯგუფი" >
  2. <button class = "btn btn-mini" > მოქმედება </button>
  3. <button class = "btn btn-mini 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-ით, შესანიშნავია აპებისა და ძიების შედეგებისთვის. დიდი ბლოკი ძნელია გამოტოვოთ, ადვილად მასშტაბირებადია და უზრუნველყოფს დაწკაპუნების დიდ არეებს.

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

Პარამეტრები

ინვალიდი და აქტიური ქვეყნები

ბმულები მორგებულია სხვადასხვა სიტუაციისთვის. გამოიყენეთ .disabledდაუწკაპუნებელი ბმულებისთვის და .activeმიმდინარე გვერდის მითითებისთვის.

  1. <div class = "გვერდები" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "აქტიური" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "გვერდები" >
  2. <ul>
  3. <li class = "გამორთული" ><span> « </span></li>
  4. <li class = "აქტიური" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

ზომები

გნებავთ უფრო დიდი თუ პატარა პაგინაცია? დაამატეთ .pagination-large, .pagination-smallან .pagination-miniდამატებითი ზომებისთვის.

  1. <div class = "Pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "გვერდები" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "პაგირება პაგინაცია-პატარა" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "Pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

გასწორება

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

  1. <div class = "გვერდების პაგირებაზე ორიენტირებული" >
  2. ...
  3. </div>
  1. <div class = "გვერდების პაგინაცია-მარჯვნივ" >
  2. ...
  3. </div>

პეიჯერი

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

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

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

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

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

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

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

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

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

  1. <ul class = "პეიჯერ" >
  2. <li class = "წინა გამორთული" >
  3. <a href = "#" > უფრო ძველი </a>
  4. </li>
  5. ...
  6. </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>

სამკერდე ნიშნები

სახელი მაგალითი მარკირება
ნაგულისხმევი 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>

ადვილად იშლება

მარტივი განხორციელებისთვის, ლეიბლები და სამკერდე ნიშნები უბრალოდ იშლება (CSS-ის :emptyამომრჩეველის მეშვეობით), როდესაც მასში შინაარსი არ არის.

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

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

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

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

Გაიგე მეტი

  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> გვერდის სათაურის მაგალითი <small> ქვეტექსტი სათაურისთვის </small></h1>
  3. </div>

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

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

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

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

  • 300x200

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

    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.

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

  • 300x200

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

    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.

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

  • 300x200

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

    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 = "span4" >
  3. <a href = "#" class = "მინიატურა" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "მინიატურები" >
  2. <li class = "span4" >
  3. <div class = "მინიატურა" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> მინიატურების ლეიბლი </h3>
  6. <p> ესკიზის წარწერა... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

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

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

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

ღილაკების გაუქმება

მობილური Safari და Mobile Opera ბრაუზერები, გარდა data-dismiss="alert"ატრიბუტისა, მოითხოვს ტეგის href="#"გამოყენებისას გაფრთხილებების გაუქმებას.<a>

  1. <a href = "#" class = "დახურვა" data-dismiss = "გაფრთხილება" > × </a>

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

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

გაფრთხილებების გაუქმება JavaScript-ის საშუალებით

გამოიყენეთ გაფრთხილებების jQuery მოდული სიგნალების სწრაფი და მარტივი გაუქმებისთვის.


Პარამეტრები

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

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

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

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> გაფრთხილება! </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 = "bar" style = " width : 60 %; " </div>
  3. </div>

ზოლიანი

იყენებს გრადიენტს ზოლიანი ეფექტის შესაქმნელად. მიუწვდომელია IE7-8-ში.

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

ანიმაციური

დაამატეთ ზოლების ანიმაციისთვის მარჯვნივ მარცხნივ .active. .progress-stripedმიუწვდომელია IE-ს ყველა ვერსიაში.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " სიგანე : 40 %; " </div>
  3. </div>

დაწყობილი

მოათავსეთ რამდენიმე ზოლი იმავეში, .progressრომ დააწყოთ ისინი.

  1. <div class = "პროგრესი" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " </div>
  4. <div class = "bar bar-danger" style = " სიგანე : 10 %; " </div>
  5. </div>

Პარამეტრები

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

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

  1. <div class = "პროგრესი პროგრესი-ინფორმაცია" >
  2. <div class = "bar" style = " width : 20 % " </div>
  3. </div>
  4. <div class = "პროგრესი პროგრესი-წარმატება" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "პროგრესის პროგრესი-გაფრთხილება" >
  8. <div class = "bar" style = " width : 60 % " </div>
  9. </div>
  10. <div class = "პროგრესი პროგრესი-საფრთხე" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " </div>
  3. </div>
  4. <div class = "პროგრესი პროგრესი-წარმატება პროგრესი-ზოლიანი" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "პროგრესი პროგრესი-გაფრთხილება პროგრესი-ზოლიანი" >
  8. <div class = "bar" style = " width : 60 % " </div>
  9. </div>
  10. <div class = "პროგრესი პროგრესი-საშიში პროგრესი-ზოლიანი" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

Internet Explorer 10-ზე და Opera 12-ზე ადრინდელი ვერსიები არ უჭერს მხარს ანიმაციას.

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

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

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

64x64

მედიის სათაური

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

მედიის სათაური

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

მედიის სათაური

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "მედია" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "მედია-სხეული" >
  6. <h4 class = "media-heading" > მედია სათაური </h4>
  7. ...
  8.  
  9. <!-- ჩადგმული მედია ობიექტი -->
  10. <div class = "მედია" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

მედიის სია

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

  • 64x64

    მედიის სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    ჩადგმული მედია სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    ჩადგმული მედია სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    ჩადგმული მედია სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    მედიის სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "მედია" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "მედია-სხეული" >
  7. <h4 class = "media-heading" > მედია სათაური </h4>
  8. ...
  9.  
  10. <!-- ჩადგმული მედია ობიექტი -->
  11. <div class = "მედია" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

ჭალები

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

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

არჩევითი კლასები

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

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

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

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

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

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

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

დამხმარე კლასები

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

.წაწიე-მარცხნივ

დაცურეთ ელემენტი მარცხნივ

  1. class = "გაახვიე მარცხნივ"
  1. . გაიყვანე - მარცხნივ {
  2. float : მარცხნივ ;
  3. }

.გააბრუნეთ-მარჯვნივ

მოძრავი ელემენტი მარჯვნივ

  1. კლასი = "მარჯვნივ დახევა"
  1. . გაიყვანე - მარჯვნივ {
  2. float : მარჯვნივ ;
  3. }

.დადუმდა

შეცვალეთ ელემენტის ფერი#999

  1. კლასი = "მდუმარე"
  1. . დადუმებული {
  2. ფერი : #999;
  3. }

.გაასწორე

გაასუფთავეთ floatნებისმიერ ელემენტზე

  1. class = "გარკვევა"
  1. . გარკვევა {
  2. * მასშტაბირება : 1 ;
  3. &: ადრე ,
  4. &: შემდეგ {
  5. ჩვენება : მაგიდა ;
  6. შინაარსი : "" ;
  7. }
  8. &: შემდეგ {
  9. ნათელი : ორივე ;
  10. }
  11. }