Bootstrap

Սկսել

Ծրագրի ակնարկ, դրա բովանդակությունը և ինչպես սկսել պարզ ձևանմուշով:

1. Ներբեռնեք

Ներբեռնումից առաջ համոզվեք, որ ունեք կոդերի խմբագրիչ (խորհուրդ ենք տալիս Sublime Text 2 ) և HTML և CSS աշխատանքային գիտելիքներ: Մենք այստեղ չենք անցնի սկզբնաղբյուր ֆայլերը, բայց դրանք հասանելի են ներբեռնման համար: Մենք կկենտրոնանանք մեր կազմված Bootstrap ֆայլերը սկսելու վրա:

Ներբեռնումը կազմված է

Սկսելու ամենաարագ ճանապարհը. ստացեք մեր CSS-ի, JS-ի և պատկերների կազմված և փոքրացված տարբերակները: Փաստաթղթեր կամ սկզբնաղբյուր ֆայլեր չկան:

Ներբեռնեք Bootstrap-ը

Ներբեռնման աղբյուրը

Ստացեք բնօրինակ ֆայլերը բոլոր CSS-ի և Javasript-ի համար, ինչպես նաև փաստաթղթերի տեղական պատճենը՝ ներբեռնելով վերջին տարբերակը անմիջապես GitHub-ից:

Ներբեռնեք Bootstrap աղբյուրը

2. Ֆայլի կառուցվածքը

Ներբեռնման ընթացքում դուք կգտնեք հետևյալ ֆայլի կառուցվածքը և բովանդակությունը՝ տրամաբանորեն խմբավորելով ընդհանուր ակտիվները և տրամադրելով ինչպես կոմպիլացված, այնպես էլ փոքրացված տատանումներ:

Ներբեռնվելուց հետո անջատեք սեղմված թղթապանակը՝ տեսնելու (կազմված) Bootstrap-ի կառուցվածքը: Դուք կտեսնեք նման բան.

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . ր . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap : ր . js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── գլիֆիկոններ - կիսատներ - սպիտակ : png
  
  
        
        
        └── ԿԱՐԴԱՑԵՔ . մդ

Սա Bootstrap-ի ամենահիմնական ձևն է՝ կոմպիլացված ֆայլեր՝ գրեթե ցանկացած վեբ-նախագծում արագ բացվող օգտագործման համար: Մենք տրամադրում ենք կոմպիլացված CSS և JS ( bootstrap.*), ինչպես նաև կոմպիլացված և փոքրացված CSS և JS ( bootstrap.min.*): Պատկերային ֆայլերը սեղմվում են ImageOptim- ի միջոցով , որը Mac հավելված է՝ PNG-ները սեղմելու համար:

3. Ինչ է ներառված

Bootstrap-ը հագեցած է HTML-ով, CSS-ով և JS-ով բոլոր տեսակի բաների համար, սակայն դրանք կարելի է ամփոփել մի քանի կատեգորիաներով, որոնք տեսանելի են Bootstrap-ի փաստաթղթերի վերևում :

Փաստաթղթերի բաժիններ

Փայտամած

Համաշխարհային ոճեր մարմնի համար՝ տեսակը և ֆոնը վերականգնելու համար, կապի ոճերը, ցանցային համակարգը և երկու պարզ դասավորությունը:

Բազային CSS

HTML-ի սովորական տարրերի ոճեր, ինչպիսիք են տպագրությունը, կոդը, աղյուսակները, ձևերը և կոճակները: Ներառում է նաև Glyphicons , փոքր պատկերակների հավաքածու:

Բաղադրիչներ

Հիմնական ոճեր ընդհանուր ինտերֆեյսի բաղադրիչների համար, ինչպիսիք են ներդիրները և դեղահատերը, նավարկղը, ծանուցումները, էջի վերնագրերը և այլն:

Javascript հավելվածներ

Ինչպես Components-ին, այս Javascript հավելվածները ինտերակտիվ բաղադրիչներ են այնպիսի բաների համար, ինչպիսիք են գործիքների հուշումները, պոպովերը, մոդալները և այլն:

Բաղադրիչների ցանկ

Միասին, Components և Javascript plugins բաժինները ապահովում են հետևյալ ինտերֆեյսի տարրերը.

  • Կոճակների խմբեր
  • Կոճակների բացվող ցանկեր
  • Նավիգացիոն ներդիրներ, հաբեր և ցուցակներ
  • Navbar
  • Պիտակներ
  • Պիտակներ
  • Էջի վերնագրեր և հերոսների միավոր
  • Մանրապատկերներ
  • Ահազանգեր
  • Առաջընթացի բարեր
  • Մոդալներ
  • Բացվող պատուհաններ
  • Գործիքների հուշումներ
  • Պոպովերներ
  • Ակորդեոն
  • Կարուսել
  • Typeahead

Հետագա ուղեցույցներում մենք կարող ենք ավելի մանրամասն քննարկել այս բաղադրիչները առանձին-առանձին: Մինչ այդ, փնտրեք դրանցից յուրաքանչյուրը փաստաթղթերում` դրանք օգտագործելու և հարմարեցնելու մասին տեղեկությունների համար:

4. Հիմնական HTML կաղապար

Բովանդակության հակիրճ ներածությամբ մենք կարող ենք կենտրոնանալ Bootstrap-ի օգտագործման վրա: Դա անելու համար մենք կօգտագործենք հիմնական HTML ձևանմուշ, որը ներառում է այն ամենը, ինչ մենք նշել ենք Ֆայլի կառուցվածքում :

Այժմ, ահա տիպիկ HTML ֆայլի տեսք .

  1. <html>
  2.   <գլուխ>
  3.     <title> Bootstrap 101 Կաղապար </title>
  4.   </head>
  5.   <մարմին>
  6.     <h1> Բարև աշխարհ: </h1>
  7.   </body>
  8. </html>

Սա Bootstrapped ձևանմուշ դարձնելու համար պարզապես ներառեք համապատասխան CSS և JS ֆայլերը.

  1. <html>
  2.   <գլուխ>
  3.     <title> Bootstrap 101 Կաղապար </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <մարմին>
  8.     <h1> Բարև աշխարհ: </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

Եվ դուք պատրաստ եք: Այս երկու ֆայլերի ավելացմամբ դուք կարող եք սկսել Bootstrap-ով ցանկացած կայք կամ հավելված մշակել:

5. Օրինակներ

Շարժվեք բազային կաղապարից այն կողմ՝ մի քանի օրինակ դասավորություններով: Մենք խրախուսում ենք մարդկանց կրկնել այս օրինակները և ոչ թե պարզապես օգտագործել դրանք որպես վերջնական արդյունք:

  • Հիմնական մարքեթինգային կայք

    Առաջնային հաղորդագրության համար նախատեսված հերոսի միավոր և երեք օժանդակ տարրեր:

  • Հեղուկ դասավորություն

    Օգտագործում է մեր նոր արձագանքող, հեղուկ ցանցային համակարգը՝ հեղուկի անխափան դասավորություն ստեղծելու համար:

  • Սկսնակ ձևանմուշ

    Բաց HTML փաստաթուղթ՝ ներառված Bootstrap CSS-ով և Javascript-ով:

Ի՞նչ հետո:

Տեղեկությունների, օրինակների և կոդի հատվածների համար այցելեք փաստաթղթեր, կամ կատարեք հաջորդ քայլը և հարմարեցրեք Bootstrap-ը ցանկացած գալիք նախագծի համար:

Այցելեք Bootstrap փաստաթղթերը Անհատականացրեք Bootstrap-ը