Gbigba · Bootstrap ni Yorùbá

Ṣaaju ki o to ṣe igbasilẹ, rii daju pe o ni olootu koodu kan (a ṣeduro Sublime Text 2 ) ati diẹ ninu imọ iṣẹ ti HTML ati CSS. A kii yoo rin nipasẹ awọn faili orisun nibi, ṣugbọn wọn wa fun igbasilẹ. A yoo dojukọ lori bibẹrẹ pẹlu awọn faili Bootstrap ti o ṣajọ.

Gbigba lati ayelujara

Ọna ti o yara ju lati bẹrẹ: gba akojọpọ ati awọn ẹya ti o dinku ti CSS, JS, ati awọn aworan. Ko si awọn iwe aṣẹ tabi awọn faili orisun atilẹba.

Ṣe igbasilẹ Bootstrap

Download orisun

Gba awọn faili atilẹba fun gbogbo CSS ati JavaScript, pẹlu ẹda agbegbe ti awọn docs nipa ṣiṣe igbasilẹ ẹya tuntun taara lati GitHub.

Ṣe igbasilẹ orisun Bootstrap

Laarin igbasilẹ naa iwọ yoo rii eto faili atẹle ati akoonu, ni oye ṣe akojọpọ awọn ohun-ini to wọpọ ati pese awọn iyatọ mejeeji ti a ṣe akojọpọ ati idinku.

Ni kete ti o ba ti gbasilẹ, ṣii folda fisinuirindigbindigbin lati wo eto ti Bootstrap (akojọ). Iwọ yoo rii nkan bii eyi:

bata bata /   ├── css / │ ├── bata bata . css
   │ ├── bata bata . min . css
   ├── js / │ ├── bata bata . js
   │ ├── bata bata . min . js
   └── img / ├── glyphicons - idaji . png
       └── glyphicons - idaji - funfun . png

Eyi ni ọna ipilẹ julọ ti Bootstrap: awọn faili ti a ṣajọ fun lilo sisọ-sinu ni iyara ni fere eyikeyi iṣẹ akanṣe wẹẹbu. A pese CSS ti a kojọpọ ati JS ( bootstrap.*), bakannaa ti a ṣajọpọ ati minifised CSS ati JS ( bootstrap.min.*). Awọn faili aworan ti wa ni fisinuirindigbindigbin nipa lilo ImageOptim , ohun elo Mac kan fun titẹ awọn PNGs.

Jọwọ ṣe akiyesi pe gbogbo awọn afikun JavaScript nilo jQuery lati wa pẹlu.

Bootstrap wa ni ipese pẹlu HTML, CSS, ati JS fun gbogbo awọn nkan, ṣugbọn wọn le ṣe akopọ pẹlu ọwọ awọn ẹka ti o han ni oke ti iwe Bootstrap .

Awọn apakan Docs

Scafolding

Awọn aza agbaye fun ara lati tunto iru ati lẹhin, awọn ọna ọna asopọ, eto grid, ati awọn ipalemo ti o rọrun meji.

CSS ipilẹ

Awọn ara fun awọn eroja HTML ti o wọpọ gẹgẹbi iwe-kikọ, koodu, awọn tabili, awọn fọọmu, ati awọn bọtini. Paapaa pẹlu Glyphicons , ṣeto aami kekere nla kan.

Awọn eroja

Awọn aza ipilẹ fun awọn paati wiwo ti o wọpọ bii awọn taabu ati awọn oogun, navbar, awọn itaniji, awọn akọle oju-iwe, ati diẹ sii.

JavaScript afikun

Iru si Awọn ẹya ara ẹrọ, awọn afikun JavaScript wọnyi jẹ awọn paati ibaraenisepo fun awọn nkan bii awọn imọran irinṣẹ, awọn agbejade, awọn awoṣe, ati diẹ sii.

Akojọ ti awọn irinše

Papọ, Awọn paati ati awọn apakan awọn afikun JavaScript pese awọn eroja wiwo atẹle wọnyi:

Awọn ẹgbẹ bọtini
Awọn ifilọlẹ bọtini
Awọn taabu lilọ kiri, awọn oogun, ati awọn atokọ
Navbar
Awọn akole
Baajii
Page afori ati akoni kuro
Awọn eekanna atanpako
Awọn itaniji
Awọn ifi ilọsiwaju
Awọn awoṣe
Awọn idasile
Awọn imọran irinṣẹ
Popovers
Accordion
Carousel
Iru ori

Ni awọn itọsọna iwaju, a le rin nipasẹ awọn paati wọnyi ni ẹyọkan ni awọn alaye diẹ sii. Titi di igba naa, wa ọkọọkan awọn wọnyi ninu iwe fun alaye lori bi o ṣe le lo ati ṣe wọn.

Pẹlu iforo kukuru sinu awọn akoonu ti o wa ni ọna, a le dojukọ lori fifi Bootstrap si lilo. Lati ṣe iyẹn, a yoo lo awoṣe HTML ipilẹ ti o pẹlu ohun gbogbo ti a mẹnuba ninu eto Faili .

Bayi, eyi ni wo ni aṣoju HTML faili :

<!DOCTYPE html>
<html>
  <ori>
    <akọle> Bootstrap 101 Àdàkọ </title>
    <meta name = "viewport" akoonu = "iwọn=iwọn-ẹrọ, ibẹrẹ-scale=1.0" >  
  </i>ori>
  <ara>
    <h1> Kaabo, agbaye! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
  </ ara>
</html>

Lati jẹ ki eyi jẹ awoṣe Bootstrapped , kan ṣafikun CSS ati awọn faili JS ti o yẹ:

<!DOCTYPE html>
<html>
  <ori>
    <akọle> Bootstrap 101 Àdàkọ </title>
    <meta name = "viewport" akoonu = "iwọn=iwọn-ẹrọ, ibẹrẹ-scale=1.0" >  
    <!-- Bootstrap -->
    <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "iboju" >   
  </i>ori>
  <ara>
    <h1> Kaabo, agbaye! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
    <script src = "js/bootstrap.min.js" </script> 
  </ ara>
</html>

Ati pe o ti ṣeto! Pẹlu awọn faili meji ti a ṣafikun, o le bẹrẹ lati ṣe idagbasoke eyikeyi aaye tabi ohun elo pẹlu Bootstrap.

Gbe lọ kọja awoṣe ipilẹ pẹlu awọn ipilẹ apẹẹrẹ diẹ. A gba awọn eniyan niyanju lati tun ṣe lori awọn apẹẹrẹ wọnyi kii ṣe lo wọn nikan bi abajade ipari.

Awoṣe ibẹrẹ

Iwe HTML barebones pẹlu gbogbo Bootstrap CSS ati JavaScript to wa.
Ipilẹ tita ojula

Ifihan ẹya akọni kan fun ifiranṣẹ akọkọ ati awọn eroja atilẹyin mẹta.
Ifilelẹ omi

Nlo idahun tuntun wa, eto akoj ito lati ṣẹda ifilelẹ omi ti ko ni oju.
Titaja dín

Slim, awoṣe titaja iwuwo fẹẹrẹ fun awọn iṣẹ akanṣe kekere tabi awọn ẹgbẹ.
Lare nav

Oju-iwe titaja pẹlu awọn ọna asopọ lilọ kiri iwọn iwọn dogba ni navbar ti a ṣe atunṣe.
wọle

Barebones wole ni fọọmu pẹlu aṣa, awọn iṣakoso fọọmu ti o tobi ju ati ipilẹ to rọ.
Ẹsẹ alalepo

Pin ẹsẹ iga ti o wa titi si isalẹ ti wiwo olumulo.
Carousel jumbotron

Riff ibaraenisepo diẹ sii lori aaye titaja ipilẹ ti o nfihan carousel olokiki kan.