Bootstrap

Kutanga

Mhedziso yepurojekiti, zvirimo, uye maitiro ekutanga ne template iri nyore.

1. Dhawunirodha

Usati wadhawunirodha, ita shuwa kuti une kodhi mupepeti (isu tinokurudzira Sublime Chinyorwa 2 ) uye neruzivo rwekushanda rweHTML neCSS. Isu hatisi kuzofamba nemasource mafaera pano, asi aripo kuti adhawunirodhe. Isu tichatarisa kutanga nemafaira akaunganidzwa eBootstrap.

Dhaunirodha yaunganidzwa

Inokurumidza nzira yekutanga: tora yakaunganidzwa uye yakamisikidzwa shanduro yedu CSS, JS, uye mifananidzo. Hapana mapepa kana epakutanga mafaira ekutanga.

Dhawunirodha Bootstrap

Download source

Tora iwo ekutanga mafaera eese CSS neJavaScript, pamwe nekopi yemuno yemagwaro nekudhawunirodha yazvino vhezheni zvakananga kubva kuGitHub.

Dhawunirodha Bootstrap source

2. Chimiro chefaira

Mukati mekudhawunirodha iwe unowana inotevera faira chimiro uye zviri mukati, zvine musoro kurongedza zvinhu zvakajairika uye nekupa zvese zvakaunganidzwa uye zvakaderedzwa misiyano.

Kana yangodhawunirodha, sunungura iyo yakamanikidzwa folda kuti uone chimiro che (iyo yakaunganidzwa) Bootstrap. Iwe uchaona chimwe chinhu chakadai:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── glyphicons - halflings - white . png
  
  
        
        
        └── VERENGA . md

Iyi ndiyo inonyanya kukosha fomu yeBootstrap: yakaunganidzwa mafaera ekukurumidza kudonhedza-mukati kushandiswa mune ingangoita chero yewebhu purojekiti. Isu tinopa yakaunganidzwa CSS uye JS ( bootstrap.*), pamwe neyakaunganidzwa uye minified CSS uye JS ( bootstrap.min.*). Iwo mafaera emifananidzo anomanikidzwa uchishandisa ImageOptim , a Mac app yekumanikidza PNGs.

Ndokumbira utarise kuti ese JavaScript plugins inoda kuti jQuery ibatanidzwe.

3. Chii chinosanganisirwa

Bootstrap inouya yakashongedzerwa neHTML, CSS, uye JS yemarudzi ese ezvinhu, asi ivo vanogona kupfupikiswa neashoma emapoka anooneka kumusoro kweBootstrap zvinyorwa .

Docs zvikamu

Scaffolding

Zvitaera zvepasi rose zvemuviri kuti ugadzirise mhando uye kumashure, zvitaera zvekubatanidza, grid system, uye maviri akapusa marongero.

Base CSS

Zvitaera zvezvakajairika HTML zvinhu senge typography, kodhi, matafura, mafomu, uye mabhatani. Inosanganisirawo Glyphicons , yakanaka diki icon set.

Zvikamu

Masitaera ekutanga ezvakajairwa mashandisirwo emhando sematebhu nemapiritsi, navbar, chenjedzo, misoro yemapeji, nezvimwe.

Javascript plugins

Zvakafanana neZvikamu, aya maJavascript plugins zvinhu zvinodyidzana zvezvinhu senge tooltips, popovers, modals, nezvimwe.

Rondedzero yezvikamu

Pamwe chete, zvikamu uye Javascript plugins zvikamu zvinopa zvinotevera interface zvinhu:

  • Mabhatani mapoka
  • Mabhatani anodonhedza
  • Navigational tabs, mapiritsi, uye zvinyorwa
  • Navbar
  • Labels
  • Mabheji
  • Peji misoro uye hero unit
  • Thumbnails
  • Alerts
  • Mabhawa ekufambira mberi
  • Modals
  • Dropdowns
  • Tooltips
  • Popover
  • Accordion
  • Carousel
  • Typeahead

Mune magwara anotevera, tinogona kufamba muzvikamu izvi mumwe nemumwe zvakadzama. Kusvika panguva iyoyo, tsvaga imwe neimwe yeiyi muzvinyorwa kuti uwane ruzivo rwemashandisirwo nemaitiro avo.

4. Basic HTML template

Nekusuma kupfupi mune zviri mukati kunze, tinogona kutarisa kuisa Bootstrap yekushandisa. Kuti tiite izvozvo, isu tichashandisa yakakosha HTML template inosanganisira zvese zvatakataura muFaira chimiro .

Ikozvino, heino kutarisa kune yakajairika HTML faira :

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title> Bootstrap 101 template </ musoro>
  5.   </head>
  6.   <muviri>
  7.     <h1> Mhoro, nyika! </ h1>
  8.     <script src = "https://code.jquery.com/jquery-latest.js" > </script> 
  9.   </ body>
  10. </html>

Kuti uite iyi Bootstrapped template , ingo sanganisira yakakodzera CSS uye JS mafaera:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title> Bootstrap 101 template </ musoro>
  5.     <!-- Bootstrap -->
  6.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  7.   </head>
  8.   <muviri>
  9.     <h1> Mhoro, nyika! </ h1>
  10.     <script src = "https://code.jquery.com/jquery-latest.js" > </script> 
  11.     <script src = "js/bootstrap.min.js" ></script> 
  12.   </ body>
  13. </html>

Uye wagadzirira! Nemafaira maviri aya akawedzerwa, unogona kutanga kugadzira chero saiti kana application neBootstrap.

5. Mienzaniso

Famba kupfuura iyo base template ine mishoma mienzaniso marongero. Tinokurudzira vanhu kuti vadzokorore pane iyi mienzaniso uye kwete kungoishandisa semhedzisiro.

  • Basic marketing site

    Inoratidzira gamba rechikamu chekutanga meseji uye zvinhu zvitatu zvinotsigira.

  • Fluid marongerwo

    Inoshandisa yedu nyowani inopindura, yemvura grid system kugadzira isina musono mvura dhizaini.

  • Starter template

    A barebones HTML gwaro rine ese Bootstrap CSS uye javascript inosanganisirwa.

Chii chinotevera?

Tungamira kune zvinyorwa kune ruzivo, mienzaniso, uye kodhi snippets, kana tora iyo inotevera kusvetuka uye gadzirisa Bootstrap kune chero chirongwa chiri kuuya.

Shanyira maBootstrap docs Gadzirisa Bootstrap