სწრაფი დაწყების მაგალითები

გჭირდებათ სწრაფი შაბლონები? შეამოწმეთ ეს ძირითადი მაგალითები, რომლებიც ჩვენ ერთად მოვამზადეთ:

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

ნაგულისხმევი ბადის სისტემა, რომელიც მოცემულია Bootstrap-ის ნაწილად, არის 940 პიქსელი სიგანის 16 სვეტიანი ბადე. ეს არის პოპულარული 960 ბადე სისტემის არომატი, მაგრამ მარცხენა და მარჯვენა მხარეს დამატებითი ზღვრის/შეფუთვის გარეშე.

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

როგორც აქ ნაჩვენებია, ძირითადი განლაგება შეიძლება შეიქმნას ორი "სვეტით", თითოეული მოიცავს 16 ძირითადი სვეტის რაოდენობას, რომელიც ჩვენ განვსაზღვრეთ, როგორც ჩვენი ბადის სისტემის ნაწილი. მეტი ვარიაციებისთვის იხილეთ ქვემოთ მოცემული მაგალითები.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

მობუდული სვეტები

.rowგანათავსეთ თქვენი შინაარსი, თუ საჭიროა , არსებული სვეტის ფარგლებში შექმნით .

ჩადგმული სვეტების მაგალითი

<div class = "row" > 
  <div class = "span12" > 
    სვეტის 1 დონე
    <div class = "row" > 
      <div class = "span6" > 
        დონე 2
      </div>
      <div class = "span6" > 
        დონე 2
      </div>
    </div>
  </div>
</div>

გააფართოვოს საკუთარი ბადე

Bootstrap-ში ჩაშენებული რამდენიმე ცვლადია ნაგულისხმევი 940px ბადის სისტემის მორგებისთვის. ცოტა პერსონალიზებით, შეგიძლიათ შეცვალოთ სვეტების ზომა, მათი ღარები და კონტეინერი, რომელშიც ისინი ცხოვრობენ.

ქსელის შიგნით

ქსელის სისტემის შესაცვლელად საჭირო ცვლადები ამჟამად ყველა ბინადრობს variables.less.

ახლა მორგება

ბადის შეცვლა ნიშნავს სამი @grid-*ცვლადის შეცვლას და Less ფაილების ხელახლა კომპილაციას.

Bootstrap აღჭურვილია ქსელის სისტემის დასამუშავებლად 24-მდე სვეტით; ნაგულისხმევი არის მხოლოდ 16. აი, როგორ გამოიყურება თქვენი ბადის ცვლადები მორგებული 24-სვეტიან ბადეზე.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

ხელახლა შედგენის შემდეგ, თქვენ დაყენებული იქნებით!

ფიქსირებული განლაგება

ნაგულისხმევი და მარტივი 940 პიქსელი სიგანის, ორიენტირებული განლაგება თითქმის ნებისმიერი ვებსაიტის ან გვერდისთვის, რომელიც მოწოდებულია ერთი <div.container>.

<სხეული>
  <div class = "კონტეინერი" > 
    ...
  </div>
</body>

სითხის განლაგება

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

<სხეული>
  <div class = "კონტეინერის სითხე" > 
    <div class = "გვერდითი ზოლი" > 
      ...
    </div>
    <div class = "შინაარსი" > 
      ...
    </div>
  </div>
</body>

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

სტანდარტული ტიპოგრაფიული იერარქია თქვენი ვებგვერდების სტრუქტურირებისთვის.

მთელი ტიპოგრაფიული ბადე ეფუძნება ორ Less ცვლადს ჩვენს variables.less ფაილში: @basefontდა @baseline. პირველი არის საბაზისო შრიფტის ზომა, რომელიც გამოიყენება მთელს ტერიტორიაზე და მეორე არის საბაზისო ხაზის სიმაღლე.

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

h1. სათაური 1

h2. სათაური 2

h3. სათაური 3

h4. სათაური 4

h5. სათაური 5

h6. სათაური 6

მაგალითი პარაგრაფი

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula ut id elit.

მაგალითის სათაურს აქვს ქვესათაური…

სხვადასხვა ელემენტები

ხაზგასმის, მისამართების და აბრევიატურების გამოყენება

<strong> <em> <address> <abbr>

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

ხაზგასმის ტეგები ( <strong>და <em>) უნდა იყოს გამოყენებული სიტყვის ან ფრაზის დამატებითი მნიშვნელობის ან აქცენტის აღსანიშნავად მის მიმდებარე ასლთან შედარებით. გამოიყენეთ <strong>მნიშვნელობისთვის და <em>სტრესის აქცენტისთვის .

აქცენტი აბზაცში

Fusce dapibus , telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

შენიშვნა:<b> HTML5- ში ტეგების გამოყენება <i>მაინც არასასურველია და არ არის აუცილებელი, რომ მათი სტილი იყოს თამამი და დახრილი, შესაბამისად (თუმცა, თუ უფრო სემანტიკური ელემენტია, გამოიყენეთ იგი). <b>მიზნად ისახავს სიტყვების ან ფრაზების ხაზგასმას დამატებითი მნიშვნელობის გადმოცემის გარეშე, ხოლო <i>ძირითადად ხმისთვის, ტექნიკური ტერმინებისთვის და ა.შ.

მისამართები

<address>ელემენტი გამოიყენება მისი უახლოესი წინაპრის, ან მთელი სამუშაო ნაწილის საკონტაქტო ინფორმაციისთვის . აქ მოცემულია ორი მაგალითი იმისა, თუ როგორ შეიძლება მისი გამოყენება:

შენიშვნა: ყოველი სტრიქონი <address>უნდა დასრულდეს სტრიქონის წყვეტით ( <br />) ან იყოს გახვეული ბლოკის დონის ტეგში (მაგ., <p>) შინაარსის სწორად სტრუქტურირებისთვის.

აბრევიატურები

აბრევიატურებისა და აკრონიმებისთვის გამოიყენეთ <abbr>ტეგი ( <acronym>მოძველებულია HTML5- ში ). ჩასვით სტენოგრამის ფორმა ტეგში და დაასახელეთ სრული სახელი.

ბლოკციტატები

<blockquote> <p> <small>

როგორ ციტირება

ბლოკციტატის ჩასართავად, შემოახვიეთ <blockquote>და <p>მონიშნეთ <small>. გამოიყენეთ <small>ელემენტი თქვენი წყაროს მოსაყვანად და მის წინ მიიღებთ em ტირე —.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante venenatis dapibus posuere velit aliquet.

დოქტორი იულიუს ჰიბერტი

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> დოქტორი იულიუს ჰიბერტი </small>
</blockquote>

შეუკვეთელი<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• მთელი რიცხვი molestie lorem at massa
• გამარტივება პრეტიუმ ნისლ ალიკეტში
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• ენეან იჯდეს ამეთ ერატ ნუნც
• ეგეთი პორტტიტორი ლორემი

უსტიილი<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• მთელი რიცხვი molestie lorem at massa
• გამარტივება პრეტიუმ ნისლ ალიკეტში
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• ენეან იჯდეს ამეთ ერატ ნუნც
• ეგეთი პორტტიტორი ლორემი

უბრძანა<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. მთელი რიცხვი molestie lorem at massa
4. გამარტივება პრეტიუმ ნისლ ალიკეტში
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. ენეან იჯდეს ამეთ ერატ ნუნც
8. ეგეთი პორტტიტორი ლორემი

აღწერაdl

აღწერილობის სიები

აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.

ევისმოდი

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

კოდი

<code> <pre>

Pimp თქვენი კოდი სტილით ორი მარტივი ტეგით. JavaScript-ის საშუალებით კიდევ უფრო გასაოცრებისთვის, ჩააგდეთ Google-ის კოდის გაუმჯობესების ბიბლიოთეკა და მზად ხართ.

კოდის წარდგენა

კოდი, ბლოკები ან უბრალოდ ფრაგმენტები ხაზში, შეიძლება გამოჩნდეს სტილით მხოლოდ სწორ ტეგში შეფუთვით. კოდის ბლოკებისთვის, რომლებიც მოიცავს მრავალ ხაზს, გამოიყენეთ <pre>ელემენტი. შიდა კოდისთვის გამოიყენეთ <code>ელემენტი.

<div>
  <h1>სათაური</h1>
  <p>აქ არის რაღაც...</p>
</div>

<div> <h1> სათაური </h1> <p> რაღაც აქ... </p> </div>
  
  

ინლაინ ლეიბლები

<span class="label">

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

რაიმეს მარკირება

ოდესმე სჭირდებოდა ერთი იმ ლამაზი ახალი! ან მნიშვნელოვანი დროშები კოდის დაწერისას? კარგი, ახლა თქვენ გაქვთ ისინი. აი, რა შედის ნაგულისხმევად:

მედია ბადე

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

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

ესკიზები .media-gridშეიძლება იყოს ნებისმიერი ზომის, მაგრამ ისინი საუკეთესოდ მუშაობენ პირდაპირ ჩაშენებულ Bootstrap ქსელის სისტემაზე შედგენისას. სურათის სიგანეები, როგორიცაა 90, 210 და 330, გაერთიანდება რამდენიმე პიქსელთან ერთად, რათა გაუტოლდეს .span2, .span4, და .span6სვეტის ზომებს.

დიდი

საშუალო

Პატარა

მათი კოდირება

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

<ul class = "მედია ბადე" > 
  <li>
    <a href = "#" > 
      <img class = "მინიატურა" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "მინიატურა" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

მაგიდების აგება

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

მაგიდები შესანიშნავია - ბევრი რამისთვის. თუმცა, დიდ ცხრილებს სჭირდებათ მარკირების სიყვარული, რომ იყოს სასარგებლო, მასშტაბური და წაკითხული (კოდის დონეზე). აქ მოცემულია რამდენიმე რჩევა დასახმარებლად.

ყოველთვის გადააფარეთ თქვენი სვეტის სათაურები ისე, <thead>რომ იერარქია იყოს <thead>> <tr>> <th>.

სვეტების სათაურების მსგავსად, თქვენი ცხრილის მთელი შინაარსი უნდა იყოს შეფუთული <tbody>ისე, რომ თქვენი იერარქია იყოს <tbody>> <tr>> <td>.

მაგალითი: ცხრილის ნაგულისხმევი სტილები

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

<მაგიდა>
  ...
</table>

მაგალითი: შედედებული მაგიდა

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

მაგალითი: შემოსაზღვრული მაგიდა

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

<table class = "bordered-table" > 
  ...
</table>

მაგალითი: ზებრა ზოლიანი

ზებრა-ზოლების დამატებით დაამატეთ თქვენი მაგიდები - უბრალოდ დაამატეთ .zebra-stripedკლასი.

შენიშვნა: Zebra-striping არის პროგრესული გაუმჯობესება, რომელიც მიუწვდომელია ძველი ბრაუზერებისთვის, როგორიცაა IE8 და ქვემოთ.

<table class = "ზებრა-ზოლიანი" > 
  ...
</table>

მაგალითი: Zebra-striped w/ TableSorter.js

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

<script src = "js/jquery/jquery.tablesorter.min.js" </script> 
<სკრიპტი > 
  $ ( ფუნქცია () { 
    $ ( "table# sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "ზებრა-ზოლიანი" > 
  ...
</table>

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

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

დაწყობილი ფორმები

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

ჩამოაყალიბეთ ველის ზომები

შეცვალეთ ნებისმიერი ფორმა input, selectან textareaსიგანე თქვენს მარკირებაში მხოლოდ რამდენიმე კლასის დამატებით.

v1.3.0-დან, ჩვენ დავამატეთ ბადეზე დაფუძნებული ზომის კლასები ფორმის ელემენტებისთვის. გთხოვთ, გამოიყენოთ ეს არსებული .mini, .smallდა ა.შ კლასების მიმართ.

ღილაკები

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

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

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

ღილაკების სტილები შეიძლება გამოყენებულ იქნას ნებისმიერზე .btn. როგორც წესი, თქვენ გსურთ გამოიყენოთ ისინი მხოლოდ <a>, <button>და აირჩიეთ <input>ელემენტებზე. აი, როგორ გამოიყურება:

ალტერნატიული ზომები

გსურთ უფრო დიდი თუ პატარა ღილაკები? მიიღეთ ეს!

ინვალიდი მდგომარეობა

ღილაკებისთვის, რომლებიც არ არის აქტიური ან გამორთულია აპის მიერ ამა თუ იმ მიზეზით, გამოიყენეთ გამორთული მდგომარეობა. ეს არის .disabledბმულებისთვის და :disabledელემენტებისთვის <button>.

ბმულები

ღილაკები

Რა არის ეს

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

დააკონფიგურიროთ

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

ჩამოსაშლელი ფაილები შედის

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

ტაბლეტები და აბები

შექმენით მარტივი მეორადი ნავიგაცია <ul>. შეცვალეთ ჩანართებს ან აბებს შორის შესაბამისი კლასის დამატებით.

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

ძირითადი ჩანართების მაგალითი

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

• მთავარი
• პროფილი
• შეტყობინებები
• პარამეტრები
• კონტაქტი
• Ძირს დაგდება
  • მეორადი ბმული
  • რაღაც სხვა აქ
  • კიდევ ერთი ბმული

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > მთავარი </a></li>  
  <li><a href = "#" > პროფილი </a></li> 
  <li><a href = "#" > შეტყობინებები </a></li> 
  <li><a href = "#" > პარამეტრები </a></li> 
  <li><a href = "#" > კონტაქტი </a></li> 
</ul>

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

• მთავარი
• პროფილი
• შეტყობინებები
• პარამეტრები
• კონტაქტი

<ul class = "აბი" > 
  <li class = "active" ><a href = "#" > მთავარი </a></li>  
  <li><a href = "#" > პროფილი </a></li> 
  <li><a href = "#" > შეტყობინებები </a></li> 
  <li><a href = "#" > პარამეტრები </a></li> 
  <li><a href = "#" > კონტაქტი </a></li> 
</ul>

პურის ნამსხვრევები

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

• მთავარი

• მთავარი /
• შუა გვერდი

• მთავარი /
• შუა გვერდი /
• Სხვა

• მთავარი /
• შუა გვერდი /
• კიდევ ერთი /
• Აქ ხარ

<ul class = "პურის ნამსხვრევი" > 
  <li><a href = "#" > მთავარი </a> <span class = "გამყოფი" > / </span></li>   
  <li><a href = "#" > შუა გვერდი </a> <span class = "გამყოფი" > / </span></li>   
  <li><a href = "#" > კიდევ ერთი </a> <span class = "გამყოფი" > / </span></li>   
  <li class = "active" > თქვენ აქ ხართ </li> 
</ul>

პაგირება

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

<div class = "გვერდები" > 
  <ul>
    <li class = "წინა გამორთულია" ><a href = "#" > ← წინა </a></li>  
    <li class = "აქტიური" ><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> 
    <li class = "შემდეგი" ><a href = "#" > შემდეგი → </a></li>  
  </ul>
</div>

ძირითადი გაფრთხილებები

.alert-message

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

მიიღეთ javascript »

მაგალითი კოდი

<div class = "გაფრთხილება-შეტყობინებების გაფრთხილება" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> წმინდა გუაკამოლე! </strong> საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით. </p>
</div>

შეტყობინებების დაბლოკვა

.alert-message.block-message

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

მიიღეთ javascript »

მაგალითი კოდი

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> წმინდა გუაკამოლე! ეს გაფრთხილებაა! </strong> საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "გაფრთხილება-მოქმედებები" > 
    <a class = "btn small" href = "#" > გააკეთე ეს მოქმედება </a> <a class = "btn small" href = "#" > ან გააკეთე ეს </a>     
  </div>
</div>

მოდალები

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

მიიღეთ javascript »

ინსტრუმენტების რჩევები

Twipsies ძალიან სასარგებლოა დაბნეული მომხმარებლის დასახმარებლად და სწორი მიმართულებით მითითებისთვის.

მიიღეთ javascript »

პოპოვერები

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

მიიღეთ javascript »

Ვიწყებთ

javascript-ის ინტეგრირება Bootstrap ბიბლიოთეკასთან ძალიან მარტივია. ქვემოთ განვიხილავთ საფუძვლებს და მოგაწვდით რამდენიმე გასაოცარ დანამატს, რომ დაიწყოთ!

javascript დოკუმენტების ნახვა »

რა შედის

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

საჭიროა javascript?

არა! Bootstrap შექმნილია უპირველეს ყოვლისა, რომ იყოს CSS ბიბლიოთეკა. ეს javascript უზრუნველყოფს ძირითად ინტერაქტიულ ფენას შეტანილი სტილის თავზე.

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

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