Bootstrap 2.3.2: Bibẹrẹ Itọsọna

Twitter Bootstrap aami

Bootstrap jẹ a Ilana CSS iyẹn ti di olokiki pupọ jakejado nẹtiwọọki. Awọn aza wọn idahun wọn rii lori awọn nẹtiwọọki awujọ Tuenti y twitter. Lilo eleyi gba wa ni ọpọlọpọ akoko nigba idagbasoke ohun elo wẹẹbu kan nitori o fi gbogbo iṣẹ ati ipa wa ninu ṣiṣẹda aṣa oju-iwe mimọ ti o yẹ fun gbogbo awọn ẹrọ. Ṣiṣọrọ awọn aza ti a lo ninu ilana yii, a yoo mọ pe wọn mọ wa, nitori loni ọpọlọpọ awọn oju opo wẹẹbu ti ṣe imuse.

Ilana naa

Aworan eto Bootstrap

Ẹya Omi Okun Bootstrap

Fun oju opo wẹẹbu wa lati ni iraye si lati awọn foonu alagbeka ati awọn tabulẹti, a yoo ni lati lo eto iṣan ti Bootstrap fun wa. Lilo be yii rọrun pupọ, ohun gbogbo da lori awọn eroja igba diẹ iyẹn yoo ṣe iranlọwọ fun wa akọkọ apẹrẹ wẹẹbu wa. Nigbamii, nigba ti a ba wọle si apẹrẹ yii lati a foonuiyara o tabulẹti, eyi yoo ṣe adaṣe adaṣe si ẹrọ wi ni imudarasi didara lilọ kiri. A yoo lo awọn igba diẹ pẹlu awọn kilasi ni awọn ipin ọgbọngbọn laarin eto iṣan, ie:

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

Nibiti nọmba 2 ṣe aṣoju iwọn igba. Ọna kọọkan ni aaye to to fun awọn akoko 12 ti iwọn 1, tabi 2 ti iwọn 6, eyi le pin si ifẹ rẹ. Lọgan ti aaye ti ọna kan ba ti kọja, yoo sọkalẹ lọ si atẹle ni adaṣe, gbigba wa laaye lati lo a igba diẹ iwọn 12 lati ṣẹda fifọ ila kan. Ti a ba fẹ foju diẹ ninu igba diẹ nigba ṣiṣẹda ọkan, iyẹn ni, bẹrẹ lati 4 igba diẹ, ati lo iwọn ti 3, a yoo lo koodu yii:

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

Eyi gba aaye pipin lati fo mẹrin ṣe awin ṣaaju iṣafihan akoonu naa. A le lo eyi ni ifẹ ọfẹ wa, fifa ohun ti a fẹ pẹlu koodu wa.

Awọn akoko fifin pẹlu kilasi aiṣedeede

Awọn akoko fifin pẹlu kilasi aiṣedeede

Oniruuru apẹrẹ fun ẹrọ kọọkan

Aworan pẹlu awọn kilasi iyasọtọ fun awọn ẹrọ Bootstrap

Awọn kilasi CSS lati ṣe iyatọ ẹrọ kọọkan

Lati lo apẹrẹ ti o yatọ fun iru ẹrọ kọọkan, a yoo sọ fun pipin ọgbọn kọọkan fun ẹrọ wo ni o ni ila-oorun, ni lilo awọn kilasi wọnyi:

Ni ọna yii a le ṣe afihan apẹrẹ ti o yatọ patapata fun ẹrọ kọọkan pẹlu URL kanna.

Awọn bọtini

Awọn bọtini Awọ

Atokọ awọn bọtini ti a funni nipasẹ Bootstrap

Bootstrap nfun wa ni iwe-mimọ ti awọn bọtini awọ, lilo rẹ rọrun pupọ:

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

Nibo btn btn-success n tọka si awọ ti bọtini, lati yi pada, a yoo ni lati rọpo nikan pẹlu awọn kilasi ti o han ni aworan iṣaaju.

Fifi Bootstrap

Fun fifi sori ilana CSS yii, a yoo gba zip lati ọna asopọ ti Emi yoo fi silẹ ni opin ifiweranṣẹ, ati pe a yoo kọ koodu atẹle ni ori faili HTML wa.

<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>

Ni kete ti a ti rii daju pe awọn faili CSS ati JS wa ninu folda kanna bi faili HTML wa, a le bẹrẹ siseto oju opo wẹẹbu idahun wa.

Alaye diẹ sii - Fọwọsi fọọmu

Ṣe igbasilẹ - Bootstrap: Ilana CSS


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Ọrọìwòye kan, fi tirẹ silẹ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade. O beere aaye ti wa ni samisi pẹlu *

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.

  1.   Alejandra wi

    Ṣe o ko ni awọn itọnisọna diẹ sii lori ilana yii ???