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 alarm. Bootstrap-ը ստեղծվել է Less- ով և նախագծվել է դարպասից դուրս աշխատելու համար՝ հաշվի առնելով ժամանակակից բրաուզերները:
Ամենաարագ և հեշտ մեկնարկի համար պարզապես պատճենեք այս հատվածը ձեր կայքէջում:
Less-ի օգտագործման երկրպագու՞ն եք: Խնդիր չկա, պարզապես կլոնավորեք ռեպո և ավելացրեք այս տողերը.
Ներբեռնեք, պատառաքաղեք, քաշեք, ֆայլեր արեք և ավելին Github-ի պաշտոնական Bootstrap ռեպո-ի միջոցով:
Twitter-ի ավելի վաղ օրերին ինժեներներն օգտագործում էին գրեթե ցանկացած գրադարան, որին ծանոթ էին, որպեսզի բավարարեին առջևի պահանջները: Bootstrap-ը սկսվեց որպես պատասխան այն մարտահրավերներին, որոնք ներկայացված էին, և զարգացումը արագ արագացավ Twitter-ի առաջին Hackweek-ի ընթացքում:
Twitter-ի բազմաթիվ ինժեներների օգնությամբ և արձագանքներով՝ Bootstrap-ը զգալիորեն աճել է՝ ներառելով ոչ միայն հիմնական ոճերը, այլև ավելի էլեգանտ և դիմացկուն առջևի դիզայնի նախշերը:
Կարդալ ավելին dev.twitter.com կայքում ›
Bootstrap-ը փորձարկված և աջակցվում է ժամանակակից խոշոր բրաուզերներում, ինչպիսիք են Chrome-ը, Safari-ն, Internet Explorer-ը և Firefox-ը:
Bootstrap-ը համալրված է կոմպիլացված CSS-ով, չկոմպիլյացված և օրինակելի կաղապարներով:
Որպես Bootstrap-ի մաս տրամադրվող լռելյայն ցանցային համակարգը 940px լայնությամբ 16 սյունակ ցանց է: Դա հանրաճանաչ 960 ցանցային համակարգի համն է, բայց առանց ձախ և աջ կողմերի լրացուցիչ լուսանցքի/լիցքավորման:
Ինչպես ցույց է տրված այստեղ, հիմնական դասավորությունը կարող է ստեղծվել երկու «սյունակներով», որոնցից յուրաքանչյուրը ընդգրկում է 16 հիմնային սյուներից, որոնք մենք սահմանել ենք որպես մեր ցանցային համակարգի մաս: Լրացուցիչ տատանումների համար տե՛ս ստորև բերված օրինակները:
- <div class = «շարք» >
- <div class = "span6 սյունակներ" >
- ...
- </div>
- <div class = "span10 սյունակ" >
- ...
- </div>
- </div>
Լռելյայն և պարզ 940px լայնությամբ, կենտրոնացված դասավորությունը գրեթե ցանկացած վեբկայքի կամ էջի համար, որը տրամադրվում է մեկ <div.container>
.
- <մարմին>
- <div class = «կոնտեյներ» >
- ...
- </div>
- </body>
Այլընտրանքային, ճկուն հեղուկ էջի կառուցվածք՝ min- և max-լայնություններով և ձախակողմյան կողագոտով: Հիանալի է հավելվածների և փաստաթղթերի համար:
- <մարմին>
- <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 dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Օգտագործելով շեշտադրումներ, հասցեներ և հապավումներ
<strong>
<em>
<address>
<abbr>
Շեշտադրման պիտակները ( <strong>
և <em>
) պետք է օգտագործվեն բառի կամ արտահայտության լրացուցիչ կարևորությունը կամ շեշտադրումը դրա շրջակա պատճենի հետ կապված: Օգտագործեք <strong>
կարևորության և սթրեսի շեշտադրման <em>
համար :
Fusce dapibus , tellus 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>
օգտագործվում է իր մոտակա նախնիների կամ ամբողջ աշխատանքի համար կոնտակտային տեղեկատվության համար: Ահա թե ինչպես է այն նայում.
Նշում. An-ի յուրաքանչյուր տող <address>
պետք է ավարտվի տողերի ընդմիջումով ( <br />
) կամ փաթաթված լինի բլոկի մակարդակի պիտակով (օրինակ՝ <p>
)՝ բովանդակությունը ճիշտ ձևավորելու համար:
Հապավումների և հապավումների համար օգտագործեք <abbr>
պիտակը ( HTML5-<acronym>
ում հնացած է ): Տեղադրեք սղագրության ձևը պիտակի մեջ և վերնագիր սահմանեք ամբողջական անվան համար:
<blockquote>
<p>
<small>
Բլոկի մեջբերում ներառելու համար փաթաթեք <blockquote>
և նշեք : Օգտագործեք տարրը՝ ձեր աղբյուրը նշելու համար, և դրանից առաջ կստանաք em գծիկ :<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թվերը կարող են առաջանալ կամ առաջանալ:
Դոկտոր Ջուլիուս Հիբերտ
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Սեղանները հիանալի են՝ շատ բաների համար: Հիանալի աղյուսակները, այնուամենայնիվ, կարիք ունեն մի փոքր նշագրման սիրո՝ օգտակար, մասշտաբային և ընթեռնելի (կոդի մակարդակով) լինելու համար: Ահա մի քանի խորհուրդներ, որոնք կօգնեն:
Միշտ փաթաթեք ձեր սյունակների վերնագրերը a<thead>
այնպես, որ հիերարխիան լինի <thead>
> <tr>
> <th>
:
Սյունակների վերնագրերի նման, ձեր աղյուսակի ամբողջ բովանդակությունը պետք է փաթաթված լինի <tbody>
այնպես, որ ձեր հիերարխիան լինի <tbody>
><tr>
> <td>
:
Բոլոր աղյուսակները ավտոմատ կերպով ձևավորվելու են միայն հիմնական եզրագծերով՝ ապահովելու ընթերցանությունը և պահպանելու կառուցվածքը: Կարիք չկա ավելացնել լրացուցիչ դասեր կամ ատրիբուտներ:
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | Մի քանի | Մեկը | Անգլերեն |
2 | Ջո | Վեց տուփ | Անգլերեն |
3 | Ստյու | Դենտ | Կոդ |
- <աղյուսակ>
- ...
- </table>
Մի փոքր շքեղ եղեք ձեր սեղանների հետ՝ ավելացնելով զեբրա գծեր. պարզապես ավելացրեք .zebra-striped
դասը:
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | Մի քանի | Մեկը | Անգլերեն |
2 | Ջո | Վեց տուփ | Անգլերեն |
3 | Ստյու | Դենտ | Կոդ |
Նշում. Zebra-striping-ը առաջադեմ բարելավում է, որը հասանելի չէ հին բրաուզերների համար, ինչպիսիք են IE8-ը և ստորև:
- <table class = "zebra-striped" >
- ...
- </table>
Վերցնելով նախորդ օրինակը՝ մենք բարելավում ենք մեր աղյուսակների օգտակարությունը՝ ապահովելով տեսակավորման գործառույթ jQuery- ի և Tablesorter հավելվածի միջոցով: Սեղմեք ցանկացած սյունակի վերնագրի վրա՝ տեսակավորումը փոխելու համար:
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | Ձեր | Մեկը | Անգլերեն |
2 | Ջո | Վեց տուփ | Անգլերեն |
3 | Ստյու | Դենտ | Կոդ |
- <script src = "js/jquery/jquery.tablesorter.min.js" </script>
- <սկրիպտ >
- $ ( ֆունկցիա () {
- $ ( «table# sortTableExample» ): սեղանի տեսակավորող ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </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 error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus հետեւանք հետեւանք, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas: 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 վիթխարի վոլուանտի վոլորմ quaessi .
Օգտագործեք 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-ում և ինչպես կարող եք օգտագործել այն, եթե ընտրեք ավելի քիչ գործարկել ձեր հաջորդ նախագծում:
Օգտագործեք այս տարբերակը՝ ձեր զննարկիչում javascript-ի միջոցով Bootstrap-ի Less փոփոխականները, միքսները և CSS-ում տեղադրումը ամբողջությամբ օգտագործելու համար:
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <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 %);
- @մոխրագույն ՝ լուսավորել ( @սև , 50 %);
- @grayLight : լուսավորել ( @սև , 70 %);
- @grayLighter ՝ լուսավորել ( @սև , 90 %);
- @white : #fff;
- // Շեշտադրման գույներ
- @blue : #08b5fb;
- @green : #46a546;
- @կարմիր ՝ # 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 , @lineHeight ՝ 20px ) {
- տառատեսակ - ընտանիք ՝ «Helvetica Neue» , Helvetica , Arial , sans - serif ;
- տառատեսակի չափը ՝ @size ; _
- font - weight : @weight ;
- տող - բարձրություն ՝ @lineHeight ;
- }
- . սերիֆ ( @weight : նորմալ , @size : 14px , @lineHeight : 20px ) {
- տառատեսակ - ընտանիք ՝ «Georgia» , Times New Roman , Times , sans - serif ;
- տառատեսակի չափը ՝ @size ; _
- font - weight : @weight ;
- տող - բարձրություն ՝ @lineHeight ;
- }
- . monospace ( @weight : նորմալ , @size : 12px , @lineHeight : 20px ) {
- տառատեսակ - ընտանիք ՝ «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 ); // Օպերա 11.10
- ֆոն - պատկեր . գծային - գրադիենտ ( ձախ , @startColor , @endColor ); // Le ստանդարտ
- }
- . ուղղահայաց ( @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 ); // Օպերա 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 ;
- }