I-Bootstrap 2.3.2: Isikhokelo sokuQala

I-logo ye-Twitter Bootstrap

I-Bootstrap yi Isakhelo seCSS iye yathandwa kakhulu kuyo yonke inethiwekhi. Izimbo zabo noluphendulayo zibonwa kwiinethiwekhi zonxibelelwano Tuenti y Twitter. Ukusetyenziswa koku kusisindisa ixesha elininzi xa kuphuhliswa usetyenziso lwewebhu kuba kusisindisa kuwo wonke umsebenzi kunye nomzamo obandakanyekayo ekwenzeni isitayile esicocekileyo sephepha esifanelekileyo kuzo zonke izixhobo. Ukubonisana nezitayile ezisetyenzisiweyo kwesi sikhokelo, siya kuqonda ukuba ziqhelekile kuthi, kuba namhlanje iiwebhusayithi ezininzi ziyiphumezile.

Ubume

Umfanekiso wesakhiwo seBootstrap

Ulwakhiwo lweFluid

Ukuze iwebhusayithi yethu ifikeleleke kwii-mobiles kunye neetafile kuya kufuneka sisebenzise ulwelo olunikezwa yiBootstrap. Ukusetyenziswa kolu lwakhiwo kulula kakhulu, yonke into isekwe kwizinto ispan oko kuyakusinceda ubeko uyilo lwethu lwewebhu. Emva kwexesha, xa sifikelela kolu loyilo ukusuka kwifayile ye- efowuni o ipilisi, Oku kuyakuzivumelanisa ngokuzenzekelayo nezixhobo esele ziphucule kakhulu umgangatho wokuhamba. Siza kusebenzisa i ispan kunye neeklasi ezahlulwe ngokuvakalayo ngaphakathi kolwakhiwo lobumanzi, okt:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Apho inani u-2 limele ubungakanani besithuba. Umqolo ngamnye unendawo eyoneleyo yezithuba ezili-12 zobungakanani 1, okanye ezi-2 zesayizi 6, oku kungasasazwa ngendlela othanda ngayo. Nje ukuba indawo yomqolo idlule, iya kuhla iye ngokuzenzekelayo, isivumela ukuba sisebenzise ispan ubungakanani 12 ukwenza ikhefu emgceni. Ukuba sifuna ukutsiba ezinye ispan xa usenza enye, oko kukuthi, qala ukusuka ku-4 ispan, kwaye sisebenzise ubungakanani be-3, siya kusebenzisa le khowudi:

<div class="span2 offset4">Contenido</div>

Oku kuvumela ukwahlula ukutsiba kane ububanzi ngaphambi kokubonisa umxholo. Singayisebenzisa le nto ngokuthanda kwethu, sitsiba oko sikufunayo ngekhowudi yethu.

Ukutsiba izithuba kunye neklasi yokulinganisa

Ukutsiba izithuba kunye neklasi yokulinganisa

Uyilo olwahlukileyo kwisixhobo ngasinye

Imifanekiso eneeklasi ezizodwa zezixhobo zeBootstrap

Iiklasi ze-CSS zokwahlula isixhobo ngasinye

Ukufaka uyilo olwahlukileyo kuhlobo ngalunye lwesixhobo siya kuthi sixelele icandelo ngalinye elinengcinga ukuba isixhobo eso sijolise phi, kusetyenziswa ezi klasi zilandelayo:

Ngale ndlela, sinokubonisa uyilo olwahluke mpela kwisixhobo ngasinye esine-URL efanayo.

Amaqhosha

Amaqhosha emibala

Uluhlu lwamaqhosha anikezelwa yiBootstrap

I-Bootstrap isinika indawo yokugcina ecocekileyo yamaqhosha anemibala, ukusetyenziswa kwayo kulula kakhulu:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

Phi btn btn-success ibhekisa kumbala weqhosha, ukulitshintsha, kuya kufuneka silitshintshe kunye neeklasi eziboniswe kumfanekiso ongaphambili.

Ukufaka iBootstrap

Ukufakelwa kwesi sikhokelo seCSS, siya kukhuphela i-zip kwikhonkco endiza kuyishiya ekupheleni kweposti, kwaye siya kubhala le khowudi ilandelayo kwintloko yefayile yethu ye-HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Nje ukuba siqiniseke ukuba iifayile zeCSS kunye neJS zikwifolda efanayo nefayile yethu ye-HTML, sinokuqala ukwenza iwebhusayithi yethu ephendulayo.

Iinkcukacha ezithe xaxe - Ukuqinisekiswa kweFom

Khuphela - I-Bootstrap: Isakhelo seCSS


Izimvo, shiya eyakho

Shiya uluvo lwakho

Idilesi yakho ye email aziyi kupapashwa. ezidingekayo ziphawulwe *

*

*

  1. Uxanduva lwedatha: UMiguel Ángel Gatón
  2. Injongo yedatha: Ulawulo lwe-SPAM, ulawulo lwezimvo.
  3. Umthetho: Imvume yakho
  4. Unxibelelwano lwedatha: Idatha ayizukuhanjiswa kubantu besithathu ngaphandle koxanduva lomthetho.
  5. Ukugcinwa kweenkcukacha
  6. Amalungelo: Ngalo naliphi na ixesha unganciphisa, uphinde uphinde ucime ulwazi lwakho.

  1.   Alejandra sitsho

    Awunazo ezinye iitutorials kwesi sikhokelo ???