Bootstrap

Hanomboka

Overview ny tetikasa, ny ao anatiny, ary ny fomba hanombohana amin'ny môdely tsotra.

Fampitandremana! Ireo doka ireo dia natao ho an'ny v2.3.2, izay tsy tohanana amin'ny fomba ofisialy intsony. Jereo ny kinova farany an'ny Bootstrap!

1. Download

Alohan'ny hisintonana dia aoka ho azo antoka fa manana tonian-dahatsoratry ny kaody (manolotra ny Sublime Text 2 izahay ) ary fahalalana sasany momba ny HTML sy CSS. Tsy handeha hamaky ireo rakitra loharano eto izahay, fa azo alaina maimaim-poana izy ireo. Hifantoka amin'ny fanombohana ireo rakitra Bootstrap natambatra isika.

Natambatra ny fampidinana

Fomba haingana indrindra hanombohana: alaivo ny dikan-teny voaangona sy nohavaozina amin'ny CSS, JS ary sary. Tsy misy antontan-taratasy na rakitra loharano tany am-boalohany.

Download Bootstrap

Loharano alaina

Raiso ny rakitra tany am-boalohany ho an'ny CSS sy JavaScript rehetra, miaraka amin'ny dika mitovy amin'ny antontan-taratasy eo an-toerana amin'ny alàlan'ny fampidinana mivantana ny kinova farany avy amin'ny GitHub.

Ampidino ny loharano Bootstrap

2. Firafitry ny rakitra

Ao anatin'ilay fampidinana dia ho hitanao ity firafitry ny rakitra manaraka ity sy ny atiny, manambatra ny fananana iombonana ara-lojika ary manome fiovaovana voaangona sy nohamafisina.

Vantany vao alaina dia sokafy ny lahatahiry voatsindry hahitana ny firafitry ny (ilay natambatra) Bootstrap. Hahita zavatra toy izao ianao:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - fotsy . png

Ity no endrika fototra indrindra amin'ny Bootstrap: rakitra natambatra ho an'ny fampidinana haingana amin'ny tetikasa web rehetra. Manome CSS sy JS ( bootstrap.*), ary koa CSS sy JS ( bootstrap.min.*). Ny rakitra sary dia voatsindry amin'ny fampiasana ImageOptim , fampiharana Mac amin'ny fanerena PNG.

Mariho fa ny plugins JavaScript rehetra dia mitaky jQuery ampidirina.

3. Inona no tafiditra

Ny Bootstrap dia tonga miaraka amin'ny HTML, CSS, ary JS ho an'ny karazan-javatra rehetra, saingy azo fintinina amin'ny sokajy vitsivitsy hita eo an-tampon'ny antontan-taratasy Bootstrap .

Fizarana Docs

torolalana

Fomba eran'izao tontolo izao ho an'ny vatana hamerenana ny karazana sy ny fiaviana, ny fomba fampifandraisana, ny rafitra grid, ary ny fandrafetana tsotra roa.

Base CSS

Styles ho an'ny singa HTML mahazatra toy ny typography, code, tables, forms, ary bokotra. Ahitana ihany koa ny Glyphicons , setroka kisary kely lehibe.

singa

Fomba fototra ho an'ny singa interface tsara toy ny tabilao sy pilina, navbar, fanairana, lohatenin'ny pejy, sy ny maro hafa.

JavaScript plugins

Mitovy amin'ny Components, ireo plugins JavaScript ireo dia singa ifanakalozan-kevitra ho an'ny zavatra toy ny fitaovana, popovers, modals, sy ny maro hafa.

Lisitry ny singa

Miara-miasa, ny fizarana plugins Components sy JavaScript dia manome ireto singa interface manaraka ireto:

  • Vondrona bokotra
  • Bokotra midina
  • Tabilao navigateur, pilina ary lisitra
  • Navbar
  • etikety
  • Badges
  • Lohatenin'ny pejy sy vondrona mahery fo
  • vinety
  • fanairana
  • Bara fandrosoana
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • angorodao
  • Carousel
  • Typeahead

Ao amin'ny torolalana ho avy, afaka mamaky tsirairay ireo singa ireo amin'ny antsipiriany bebe kokoa isika. Mandra-pahatongan'izany, tadiavo ny tsirairay amin'izy ireo ao amin'ny tahirin-kevitra mba hahazoana fampahalalana momba ny fomba fampiasana sy fanamboarana azy ireo.

4. môdely HTML fototra

Miaraka amin'ny fampidirana fohy amin'ny atiny, afaka mifantoka amin'ny fampiasana Bootstrap isika. Mba hanaovana izany dia hampiasa môdely HTML fototra isika izay ahitana ny zavatra rehetra voalazanay ao amin'ny firafitry ny File .

Ankehitriny, jereo ny rakitra HTML mahazatra :

  1. <!DOCTYPE html>
  2. <html>
  3.   <loha>
  4.     <title> Template Bootstrap 101 </title>
  5.     <meta name = "viewport" votoaty = "width=device-width, initial-scale=1.0" >  
  6.   </head>
  7.   <vatana>
  8.     <h1> Miarahaba, izao tontolo izao! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </body>
  11. </html>

Mba hahatonga ity modely Bootstrapped ity dia ampidiro fotsiny ny rakitra CSS sy JS mety:

  1. <!DOCTYPE html>
  2. <html>
  3.   <loha>
  4.     <title> Template Bootstrap 101 </title>
  5.     <meta name = "viewport" votoaty = "width=device-width, initial-scale=1.0" >  
  6.     <!-- Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "efijery" >   
  8.   </head>
  9.   <vatana>
  10.     <h1> Miarahaba, izao tontolo izao! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </body>
  14. </html>

Ary efa vonona ianao! Miaraka amin'ireo rakitra roa ireo dia afaka manomboka mamolavola tranokala na fampiharana amin'ny Bootstrap ianao.

5. Ohatra

Mandehana any ivelan'ny môdely fototra miaraka amin'ny fandrafetana ohatra vitsivitsy. Mamporisika ny olona izahay hamerina ireo ohatra ireo fa tsy hampiasa azy ireo ho vokatra farany.

  • Modely fanombohana

    Taratasy HTML barebones miaraka amin'ny Bootstrap CSS sy JavaScript rehetra.

  • Tranonkala marketing fototra

    Ahitana vondrona mahery fo ho an'ny hafatra voalohany sy singa telo manohana.

  • Fametrahana ranon-javatra

    Mampiasa ny rafi-pandrefesana mivaingana vaovao ataonay mba hamoronana fandrafetana ranon-javatra mirindra.

  • Varotra tery

    Modely ara-barotra maivana sy maivana ho an'ny tetikasa kely na ekipa.

  • Nohamarinina nav

    Pejy marketing misy rohy fitetezana mitovy sakany amin'ny navbar novaina.

  • Hiditra

    Barebones dia misoratra amin'ny endrika miaraka amin'ny fanaraha-maso mahazatra, endrika lehibe kokoa ary firindrana miovaova.

  • Tongotra miraikitra

    Asio tohin-tongotra raikitra amin'ny farany ambany amin'ny seranan-tsambon'ny mpampiasa.

  • Carousel jumbotron

    Reff ifandrimbonana kokoa amin'ny tranokalam-barotra fototra ahitana carousel malaza.

Inona no manaraka?

Mankanesa any amin'ny doka raha mila fampahalalana, ohatra, ary sombin-kaody, na alao ny dingana manaraka ary amboary ny Bootstrap ho an'ny tetikasa ho avy.

Tsidiho ny docs Bootstrap Amboary ny Bootstrap