Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap არის Twitter-ის ინსტრუმენტარიუმი, რომელიც შექმნილია ვებ აპებისა და საიტების განვითარების დასაწყებად.
მასში შედის ძირითადი CSS და HTML ტიპოგრაფიისთვის, ფორმებისთვის, ღილაკებისთვის, ცხრილებისთვის, ბადეებისთვის, ნავიგაციისთვის და სხვა.
Nerd გაფრთხილება: Bootstrap აგებულია Less-ით და შექმნილია კარიბჭის გარეთ მუშაობისთვის თანამედროვე ბრაუზერების გათვალისწინებით.
უსწრაფესი და მარტივი დასაწყებად, უბრალოდ დააკოპირეთ ეს ფრაგმენტი თქვენს ვებ გვერდზე.
Less-ის გამოყენების ფანი? პრობლემა არ არის, უბრალოდ კლონირეთ რეპო და დაამატეთ ეს ხაზები:
ჩამოტვირთეთ, გაანადგურეთ, გაიყვანეთ, ფაილების პრობლემები და სხვა ოფიციალური Bootstrap რეპო Github-ზე.
Twitter-ის ადრინდელ დღეებში, ინჟინრები იყენებდნენ თითქმის ნებისმიერ ბიბლიოთეკას, რომელსაც იცნობდნენ, წინა მოთხოვნების დასაკმაყოფილებლად. Bootstrap დაიწყო, როგორც პასუხი იმ გამოწვევებზე, რომლებიც წარმოდგენილ იქნა და განვითარება სწრაფად დაჩქარდა Twitter-ის პირველი Hackweek-ის დროს.
Twitter-ის მრავალი ინჟინრის დახმარებითა და გამოხმაურებით, Bootstrap მნიშვნელოვნად გაიზარდა და მოიცავდა არა მხოლოდ ძირითად სტილებს, არამედ უფრო ელეგანტურ და გამძლე წინა დიზაინის ნიმუშებს.
წაიკითხეთ მეტი dev.twitter.com-ზე ›
Bootstrap ტესტირებულია და მხარდაჭერილია ძირითად თანამედროვე ბრაუზერებში, როგორიცაა Chrome, Safari, Internet Explorer და Firefox.
Bootstrap მოყვება კომპილირებული CSS, არაკომპილირებული და მაგალითების შაბლონები.
ნაგულისხმევი ბადის სისტემა, რომელიც მოცემულია Bootstrap-ის ნაწილად, არის 940 პიქსელი სიგანის 16 სვეტიანი ბადე. ეს არის პოპულარული 960 ბადე სისტემის არომატი, მაგრამ მარცხენა და მარჯვენა მხარეს დამატებითი ზღვრის/შეფუთვის გარეშე.
როგორც აქ ნაჩვენებია, ძირითადი განლაგება შეიძლება შეიქმნას ორი "სვეტით", თითოეული მოიცავს 16 ძირითადი სვეტის რაოდენობას, რომელიც ჩვენ განვსაზღვრეთ, როგორც ჩვენი ბადის სისტემის ნაწილი. მეტი ვარიაციებისთვის იხილეთ ქვემოთ მოცემული მაგალითები.
- <div class = "row" >
- <div class = "span6 სვეტები" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
ნაგულისხმევი და მარტივი 940 პიქსელი სიგანის, ორიენტირებული განლაგება თითქმის ნებისმიერი ვებსაიტის ან გვერდისთვის, რომელიც მოწოდებულია ერთი <div.container>
.
- <სხეული>
- <div class = "კონტეინერი" >
- ...
- </div>
- </body>
ალტერნატიული, მოქნილი სითხის გვერდის სტრუქტურა მინიმალური და მაქსიმალური სიგანეებით და მარცხენა გვერდითი ზოლით. შესანიშნავია აპებისა და დოკუმენტებისთვის.
- <სხეული>
- <div class = "კონტეინერის სითხე" >
- <div class = "გვერდითი ზოლი" >
- ...
- </div>
- <div class = "შინაარსი" >
- ...
- </div>
- </div>
- </body>
სტანდარტული ტიპოგრაფიული იერარქია თქვენი ვებგვერდების სტრუქტურირებისთვის.
მთელი ტიპოგრაფიული ბადე ეფუძნება ორ Less ცვლადს ჩვენს preboot.less ფაილში: @basefont
და @baseline
. პირველი არის საბაზისო შრიფტის ზომა, რომელიც გამოიყენება მთელს ტერიტორიაზე და მეორე არის საბაზისო ხაზის სიმაღლე.
ჩვენ ვიყენებთ ამ ცვლადებს და ზოგიერთ მათემატიკას, რათა შევქმნათ ყველა ჩვენი ტიპის მინდვრები, ბალიშები და ხაზების სიმაღლეები და სხვა.
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.
დოქტორი იულიუს ჰიბერტი
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
მაგიდები შესანიშნავია - ბევრი რამისთვის. თუმცა, დიდ ცხრილებს სჭირდებათ მარკირების სიყვ��რული, რომ იყოს სასარგებლო, მასშტაბური და წაკითხული (კოდის დონეზე). აქ მოცემულია რამდენიმე რჩევა დასახმარებლად.
ყოველთვის გადააფარეთ თქვენი სვეტის სათაურები ისე, <thead>
რომ იერარქია იყოს <thead>
> <tr>
> <th>
.
სვეტების სათაურების მსგავსად, თქვენი ცხრილის მთელი შინაარსი უნდა იყოს შეფუთული <tbody>
ისე, რომ თქვენი იერარქია იყოს <tbody>
> <tr>
> <td>
.
ყველა ცხრილი ავტომატურად იქნება სტილიზებული მხოლოდ ძირითადი საზღვრებით, რათა უზრუნველყოს წაკითხვა და შეინარჩუნოს სტრუქტურა. არ არის საჭირო დამატებითი კლასების ან ატრიბუტების დამატება.
# | Სახელი | Გვარი | Ენა |
---|---|---|---|
1 | Ზოგიერთი | ერთი | ინგლისური |
2 | ჯო | Ექვსი შეკვრა | ინგლისური |
3 | სტუ | დენტი | კოდი |
- <მაგიდა>
- ...
- </table>
ზებრა-ზოლების დამატებით დაამატეთ თქვენი მაგიდები - უბრალოდ დაამატეთ .zebra-striped
კლასი.
# | Სახელი | Გვარი | Ენა |
---|---|---|---|
1 | Ზოგიერთი | ერთი | ინგლისური |
2 | ჯო | Ექვსი შეკვრა | ინგლისური |
3 | სტუ | დენტი | კოდი |
შენიშვნა: Zebra-striping არის პროგრესული გაუმჯობესება, რომელიც მიუწვდომელია ძველი ბრაუზერებისთვის, როგორიცაა IE8 და ქვემოთ.
- <table class = "ზებრა-ზოლიანი" >
- ...
- </table>
წინა მაგალითის გათვალისწინებით, ჩვენ ვაუმჯობესებთ ჩვენი ცხრილების სარგებლიანობას jQuery- ისა და Tablesorter მოდულის მეშვეობით დახარისხების ფუნქციების უზრუნველყოფით . დააწკაპუნეთ ნებისმიერი სვეტის სათაურზე დალაგების შესაცვლელად.
# | Სახელი | Გვარი | Ენა |
---|---|---|---|
1 | შენი | ერთი | ინგლისური |
2 | ჯო | Ექვსი შეკვრა | ინგლისური |
3 | სტუ | დენტი | კოდი |
- <script src = "js/jquery/jquery.tablesorter.min.js" </script>
- <სკრიპტი >
- $ ( ფუნქცია () {
- $ ( "table# sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "ზებრა-ზოლიანი" >
- ...
- </table>
ყველა ფორმას ეძლევა ნაგულისხმევი სტილი, რათა წარმოადგინონ ისინი წაკითხული და მასშტაბური გზით. სტილები მოწოდებულია ტექსტის შეყვანისთვის, სიების შერჩევისთვის, ტექსტური ზონებისთვის, რადიო ღილაკებისთვის და მოსანიშნი ველებისთვის და ღილაკებისთვის.
დაამატეთ .form-stacked
თქვენი ფორმის HTML-ში და გექნებათ ლეიბლები მათი ველების ზემოთ, მარცხნივ. ეს მშვენივრად მუშაობს, თუ თქვენი ფორმები მოკლეა ან გაქვთ შეყვანის ორი სვეტი უფრო მძიმე ფორმებისთვის.
როგორც წესი, ღილაკები გამოიყენება მოქმედებებისთვის, ხოლო ბმულები გამოიყენება ობიექტებისთვის. მაგალითად, "ჩამოტვირთვა" შეიძლება იყოს ღილაკი და "ბოლო აქტივობა" შეიძლება იყოს ბმული.
ყველა ღილაკზე ნაგულისხმევია ღია ნაცრისფერი სტილი, მაგრამ რამდენიმე ფუნქციური კლასის გამოყენება შესაძლებელია სხვადასხვა ფერის სტილისთვის. ეს კლასები მოიცავს ლურჯი .primary
კლასს, ღია ცისფერ .info
კლასს, მწვანე .success
კლასს და წითელ .danger
კლასს. გარდა ამისა, საკუთარი სტილის მოძრავი მარტივია.
ღილაკების სტილები შეიძლება გამოყენებულ იქნას ნებისმიერზე .btn
. როგორც წესი, თქვენ გსურთ გამოიყენოთ ისინი მხოლოდ <a>
, <button>
და აირჩიეთ <input>
ელემენტებზე. აი, როგორ გამოიყურება:
გსურთ უფრო დიდი თუ პატარა ღილაკები? მიიღეთ ეს!
ღილაკებისთვის, რომლებიც არ არის აქტიური ან გამორთულია აპის მიერ ამა თუ იმ მიზეზით, გამოიყენეთ გამორთული მდგომარეობა. ეს არის .disabled
ბმულებისთვის და :disabled
ელემენტებისთვის <button>
.
div.alert-message
ერთსტრიქონიანი შეტყობინებები მოქმედების წარუმატებლობის, შესაძლო წარუმატებლობის ან წარმატების ხაზგასასმელად. განსაკუთრებით სასარგებლოა ფორმებისთვის.
div.alert-message.block-message
შეტყობინებებისთვის, რომლებიც საჭიროებენ მცირე განმარტებას, გვაქვს აბზაცის სტილის გაფრთხილებები. ისინი შესანიშნავია უფრო გრძელი შეცდომის შეტყობინებების დასაბეჭდად, მომხმარებლის მოლოდინში მოქმედების შესახებ გაფრთხილებისთვის ან უბრალოდ ინფორმაციის წარდგენისთვის გვერდზე მეტი აქცენტისთვის.
მოდალები - დიალოგები ან ლაითბოქსები - შესანიშნავია კონტექსტური ქმედებებისთვის იმ სიტუაციებში, როდესაც მნიშვნელოვანია ფონის კონტექსტის შენარჩუნება.
ერთი კარგი სხეული…
Twipsies ძალიან სასარგებლოა დაბნეული მომხმარებლის დასახმარებლად და სწორი მიმართულებით მითითებისთვის.
Lorem ipsum dolar sit amet illo შეცდომა ipsum veritatis aut iste perspiciatis ისტე voluptas natus illo quasi odit aut natus შედეგების შედეგი, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam vouptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed voluptas qua odit fugit accusantium ტოტამ ტოტამ არქიტექტურა
გამოიყენეთ popovers, რათა მიაწოდოთ გვერდის ქვეტექსტური ინფორმაცია განლაგებაზე გავლენის გარეშე.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap აშენდა Preboot-ით , მიქსინებისა და ცვლადების ღია კოდის პაკეტით, რომელიც გამოიყენებოდა Less-თან ერთად , CSS პრეპროცესორთან უფრო სწრაფი და მარტივი ვებ განვითარებისთვის.
შეამოწმეთ, როგორ გამოვიყენეთ Preboot Bootstrap-ში და როგორ შეგიძლიათ გამოიყენოთ იგი, თუ აირჩევთ Less-ის გაშვებას თქვენს შემდეგ პროექტზე.
გამოიყენეთ ეს ოფცია Bootstrap-ის Less ცვლადების, მიქსინებისა და CSS-ში ჩადგმის სრულად გამოსაყენებლად თქვენს ბრაუზერში Javascript-ის საშუალებით.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ყველა" />
- <script src = "js/less-1.1.3.min.js" </script>
არ გრძნობთ .js გადაწყვეტას? სცადეთ Less Mac აპი ან გამოიყენეთ Node.js კომპილაციისთვის, როდესაც თქვენ განათავსებთ თქვენს კოდს.
აქ არის რამოდენიმე მნიშვნელოვანი წერტილი, რაც შედის Twitter Bootstrap-ში, როგორც Bootstrap-ის ნაწილი. გადადით Bootstrap ვებსაიტზე ან Github პროექტის გვერდზე, რომ ჩამოტვირთოთ და გაიგოთ მეტი.
Less-ში ცვლადები შესანიშნავია თქვენი CSS თავის ტკივილის შესანარჩუნებლად და განახლებისთვის. როდესაც გსურთ შეცვალოთ ფერის მნიშვნელობა ან ხშირად გამოყენებული მნიშვნელობა, განაახლეთ იგი ერთ ადგილზე და მზად ხართ.
- // ბმულები
- @linkColor : #8b59c2;
- @linkColorHover : ჩაბნელება ( @linkColor , 10 );
- // ნაცრისფერი
- @შავი : #000;
- @grayDark : გაღიავება ( @შავი , 25 %);
- @grey : გაღიავება ( @შავი , 50 %);
- @grayLight : გაღიავება ( @შავი , 70 %);
- @grayLighter : გაღიავება ( @შავი , 90 %);
- @white : #fff;
- // აქცენტი ფერები
- @ლურჯი : #08b5fb ;
- @მწვანე : #46a546 ;
- @red : #9d261d;
- @ყვითელი : #ffc40d ;
- @ნარინჯისფერი : #f89406 ;
- @pink : #c3325f;
- @იისფერი : #7a43b6 ;
- // საბაზისო ბადე
- @basefont : 13px ;
- @baseline : 18px ;
Less ასევე გთავაზობთ კომენტარების სხვა სტილს CSS-ის ნორმალური /* ... */
სინტაქსის გარდა.
- // ეს არის კომენტარი
- /* ესეც კომენტარია */
მიქსინები ძირითადად მოიცავს ან ნაწილობრივ CSS-სთვის, რაც საშუალებას გაძლევთ დააკავშიროთ კოდის ბლოკი ერთში. ისინი შესანიშნავია გამყიდველის პრეფიქსირებული თვისებებისთვის, როგორიცაა box-shadow
, ბრაუზერის ჯვარედინი გრადიენტები, შრიფტების დასტა და სხვა. ქვემოთ მოცემულია მიქსების ნიმუში, რომლებიც შედის Bootstrap-ში.
- #შრიფტი {
- . სტენოგრამა ( @weight : ნორმალური , @size : 14px , @lineheight : 20px ) {
- შრიფტის ზომა : @size ; _
- font - weight : @weight ;
- ხაზი - სიმაღლე : @lineHeight ;
- }
- . sans - serif ( @weight : ნორმალური , @size : 14px , @lineსიმაღლე : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- შრიფტის ზომა : @size ; _
- font - weight : @weight ;
- ხაზი - სიმაღლე : @lineHeight ;
- }
- . serif ( @weight : ნორმალური , @size : 14px , @lineსიმაღლე : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- შრიფტის ზომა : @size ; _
- font - weight : @weight ;
- ხაზი - სიმაღლე : @lineHeight ;
- }
- . monospace ( @weight : ნორმალური , @size : 12px , @lineheight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- შრიფტის ზომა : @size ; _
- font - weight : @weight ;
- ხაზი - სიმაღლე : @lineHeight ;
- }
- }
- #გრადიენტი {
- . ჰორიზონტალური ( @startColor : #555, @endColor: #333) {
- ფონი - ფერი : @endColor ;
- ფონი - გამეორება : გამეორება - x ;
- ფონი - სურათი : - khtml - გრადიენტი ( წრფივი , მარცხნივ ზედა , მარჯვენა ზევით , ( @startColor ), ( @endColor ) - მდე ); // დამპყრობელი
- ფონი - სურათი : - moz - ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // FF 3.6+
- ფონი - სურათი : - ms - ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // IE10
- ფონი - სურათი : - webkit - გრადიენტი ( წრფივი , მარცხენა ზედა , მარჯვენა ზედა , ფერი - გაჩერება ( 0 %, @startColor ), ფერი - გაჩერება ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ფონი - სურათი : - webkit - ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ფონი - სურათი : - o - წრფივი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // Opera 11.10
- ფონი - სურათი : ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // ლე სტანდარტი
- }
- . ვერტიკალური ( @startColor : #555, @endColor: #333) {
- ფონი - ფერი : @endColor ;
- ფონი - გამეორება : გამეორება - x ;
- ფონი - სურათი : - khtml - გრადიენტი ( წრფივი , მარცხნივ ზედა , მარცხნივ ქვემოდან , ( @startColor ), ( @endColor ) - მდე ); // დამპყრობელი
- ფონი - სურათი : - moz - ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // FF 3.6+
- ფონი - სურათი : - ms - ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // IE10
- ფონი - სურათი : - webkit - გრადიენტი ( წრფივი , მარცხნივ ზედა , მარცხენა ქვედა , ფერი - გაჩერება ( 0 %, @startColor ), ფერი - გაჩერება ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ფონი - სურათი : - webkit - ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ფონი - სურათი : - o - წრფივი - გრადიენტი ( @startColor , @endColor ); // Opera 11.10
- ფონი - სურათი : ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // Სტანდარტი
- }
- . მიმართულების ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . ვერტიკალური - სამი - ფერები ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
გამოიჩინეთ ფანტაზია და შეასრულეთ მათემატიკა, რათა შექმნათ მოქნილი და ძლიერი მიქსები, როგორიცაა ქვემოთ მოცემული.
- //გრიდიტუდი
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // ბადის სისტემა
- . კონტეინერი {
- სიგანე : @siteWidth ;
- ზღვარი : 0 ავტო ;
- . გარკვევა ();
- }
- . სვეტები ( @columnSpan : 1 ) {
- სიგანე : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . ოფსეტი ( @columnOffset : 1 ) {
- ზღვარი - მარცხნივ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }