Bootstrap

Ag tosú

Forbhreathnú ar an tionscadal, a bhfuil ann, agus conas tús a chur le teimpléad simplí.

1. Íoslódáil

Sula n-íoslódálann tú é, bí cinnte go bhfuil eagarthóir cód agat (molaimid Téacs Sublime 2 ) agus roinnt eolais oibre ar HTML agus CSS. Ní shiúlfaimid trí na comhaid foinse anseo, ach tá siad ar fáil le híoslódáil. Díreoimid ar thús a chur leis na comhaid Bootstrap tiomsaithe.

Íosluchtaigh tiomsú

An bealach is tapúla chun tús a chur leis: faigh na leaganacha tiomsaithe agus mionghearrtha dár CSS, JS, agus íomhánna. Uimh docs nó comhaid foinse bunaidh.

Íosluchtaigh bootstrap i rúisis

Íoslódáil an fhoinse

Faigh na comhaid bhunaidh le haghaidh gach CSS agus JavaScript, chomh maith le cóip áitiúil de na docs tríd an leagan is déanaí a íoslódáil go díreach ó GitHub.

Íosluchtaigh bootstrap foinse

2. Struchtúr comhaid

Laistigh den íoslódáil gheobhaidh tú an struchtúr comhaid seo a leanas agus a bhfuil iontu, ag grúpáil sócmhainní coitianta go loighciúil agus ag soláthar éagsúlachtaí tiomsaithe agus mionathraithe.

Nuair a bheidh sé íoslódáilte, dízip an fillteán comhbhrúite chun struchtúr Bootstrap (an tiomsaithe) a fheiceáil. Feicfidh tú rud mar seo:

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

Is é seo an fhoirm is bunúsaí de Bootstrap: comhaid tiomsaithe le haghaidh úsáide buail isteach tapa i mbeagnach aon tionscadal gréasáin. Soláthraímid CSS agus JS ( bootstrap.*) tiomsaithe , chomh maith le CSS agus JS ( bootstrap.min.*) tiomsaithe agus mionghearrtha. Déantar na comhaid íomhá a chomhbhrú le ImageOptim , aip Mac chun PNG a chomhbhrú.

Tabhair faoi deara go dteastaíonn jQuery le gach breiseán JavaScript.

3. Cad atá san áireamh

Tagann Bootstrap feistithe le HTML, CSS, agus JS do gach cineál rudaí, ach is féidir iad a achoimriú le dornán catagóirí atá le feiceáil ag barr dhoiciméadú Bootstrap .

Ailt doiciméad

Scafall

Stíleanna domhanda don chomhlacht chun cineál agus cúlra a athshocrú, stíleanna nasc, córas greille, agus dhá leagan amach simplí.

Bonn CSS

Stíleanna d'eilimintí HTML coitianta cosúil le clóghrafaíocht, cód, táblaí, foirmeacha agus cnaipí. Áirítear freisin Glyphicons , sraith deilbhín beag iontach.

Comhpháirteanna

Stíleanna bunúsacha le haghaidh comhpháirteanna comhéadain coitianta amhail cluaisíní agus piollaí, barra nascleanúna, foláirimh, ceanntásca leathanaigh, agus go leor eile.

Breiseáin le haghaidh javascript

Cosúil le Comhpháirteanna, is comhpháirteanna idirghníomhacha iad na forlíontáin JavaScript seo le haghaidh rudaí cosúil le leideanna uirlisí, popovers, módúil agus go leor eile.

Liosta comhpháirteanna

Le chéile, soláthraíonn na hailt Comhpháirteanna agus breiseán JavaScript na heilimintí comhéadan seo a leanas:

  • Grúpaí cnaipí
  • Cnaipí anuas
  • Cluaisíní loingseoireachta, pills, agus liostaí
  • Navbar
  • Lipéid
  • Suaitheantais
  • Ceanntásca leathanaigh agus aonad laoch
  • Mionsamhlacha
  • Foláirimh
  • Barraí dul chun cinn
  • Modhanna
  • Droim anuas
  • Leideanna uirlisí
  • Popovers
  • Bosca ceoil
  • Timpealláin
  • Clóscríobh ar aghaidh

I dtreoracha amach anseo, is féidir linn siúl trí na comhpháirteanna seo ina n-aonar níos mine. Go dtí sin, féach ar gach ceann díobh seo sa doiciméadú le haghaidh faisnéise ar conas iad a úsáid agus a shaincheapadh.

4. Teimpléad HTML Bunúsach

Le réamhrá gairid ar an ábhar as an mbealach, is féidir linn díriú ar Bootstrap a úsáid. Chun é sin a dhéanamh, úsáidfimid bun-theimpléad HTML a chuimsíonn gach rud a luaigh muid sa struchtúr Comhad .

Anois, seo chugat breathnú ar ghnáthchomhad HTML :

<!DOCTYPE html>
<html>
  <ceann>
    <title>Teimpléad Bootstrap 101</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </ceann>
  <comhlacht>
    <h1>Dia duit, a shaoghail!</h1>
    <script src="https://code.jquery.com/jquery.js"> </script>
  </corp>
</html>

Chun seo a dhéanamh mar theimpléad Bootstrapped , níl le déanamh ach na comhaid CSS agus JS cuí a chur san áireamh:

<!DOCTYPE html>
<html>
  <ceann>
    <title>Teimpléad Bootstrap 101</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </ceann>
  <comhlacht>
    <h1>Dia duit, a shaoghail!</h1>
    <script src="https://code.jquery.com/jquery.js"> </script>
    <script src="js/bootstrap.min.js"> </script>
  </corp>
</html>

Agus tá tú socraithe! Agus an dá chomhad sin curtha leis, is féidir leat tosú ar aon suíomh nó feidhmchlár a fhorbairt le Bootstrap.

5. Samplaí

Bog thar an bunteimpléad le roinnt leagan amach samplach. Spreagaimid daoine chun athrá a dhéanamh ar na samplaí seo agus gan iad a úsáid mar thoradh deiridh.

  • Teimpléad tosaithe

    Doiciméad HTML lomchnámh ina bhfuil CSS agus JavaScript Bootstrap ar fad san áireamh.

  • Suíomh margaíochta bunúsach

    Featuring aonad laoch do phríomhtheachtaireacht agus trí ghné tacaíochta.

  • Leagan amach sreabhach

    Úsáideann sé ár gcóras greille sreabhán sofhreagrach nua chun leagan amach leachtach gan uaim a chruthú.

  • Margaíocht chaol

    Teimpléad margaíochta caol éadrom le haghaidh tionscadal nó foirne beaga.

  • Nav inchosanta

    Leathanach margaíochta le naisc loingseoireachta ar chomhleithead i mbarra nascleanúna modhnaithe.

  • Sínigh isteach

    Síníonn Barebones foirm le rialuithe foirme saincheaptha níos mó agus leagan amach solúbtha.

  • Buntásc greamaitheach

    Pinn buntásc airde fosaithe go bun amhairc an úsáideora.

  • Cluiche timpealláin jumbotron

    Rif níos idirghníomhaí ar an suíomh margaíochta bunúsach le timpeallán feiceálach.

Cad eile?

Téigh chuig na doiciméid le haghaidh faisnéise, samplaí, agus gearrthóga cód, nó tóg an chéad léim eile agus saincheap Bootstrap d'aon tionscadal atá le teacht.

Tabhair cuairt ar na docs Bootstrap Customize Bootstrap