Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ati eros.
Bootstrap jẹ ohun elo irinṣẹ lati Twitter ti a ṣe apẹrẹ lati bẹrẹ idagbasoke awọn ohun elo wẹẹbu ati awọn aaye.
O pẹlu CSS ipilẹ ati HTML fun iwe-kikọ, awọn fọọmu, awọn bọtini, awọn tabili, awọn grids, lilọ kiri, ati diẹ sii.
Itaniji Nerd: Bootstrap jẹ itumọ pẹlu Kere ati pe a ṣe apẹrẹ lati ṣiṣẹ ni ẹnu-ọna pẹlu awọn aṣawakiri ode oni nikan ni lokan.
Fun ibẹrẹ iyara ati irọrun julọ, kan daakọ snippet yii sinu oju opo wẹẹbu rẹ.
Afẹfẹ ti lilo Kere? Ko si iṣoro, kan ṣe oniye repo ki o ṣafikun awọn laini wọnyi:
Ṣe igbasilẹ, orita, fa, awọn ọran faili, ati diẹ sii pẹlu aṣẹ Bootstrap repo lori Github.
Eto akoj aiyipada ti a pese gẹgẹ bi apakan Bootstrap jẹ akoj 16-iwe giga 940px. O jẹ adun ti eto akoj 960 olokiki, ṣugbọn laisi ala afikun / padding ni apa osi ati awọn ẹgbẹ ọtun.
Gẹgẹbi a ṣe han nibi, ipilẹ ipilẹ le ṣee ṣẹda pẹlu “awọn ọwọn” meji, ọkọọkan ti o ni nọmba kan ti awọn ọwọn ipilẹ 16 ti a ṣalaye gẹgẹbi apakan ti eto akoj wa. Wo awọn apẹẹrẹ ni isalẹ fun awọn iyatọ diẹ sii.
- <div class="row"> kilasi = "kana" >
- <div kilasi = "span6 ọwọn" >
- ...
- </div>
- <div kilasi = "span10 ọwọn" >
- ...
- </div>
- </div>
Ipilẹ 940px fife, ifilelẹ eiyan aarin fun o kan aaye tabi oju-iwe eyikeyi.
- <ara>
- <div kilasi = "apoti" >
- ...
- </div>
- </ ara>
Omi to rọ tabi ọna oju-iwe olomi pẹlu min- ati awọn iwọn ti o pọju ati ọpa apa osi. Nla fun awọn ohun elo.
- <ara>
- <div class = "container-fluid" >
- <div kilasi = "apagbe ẹgbẹ" >
- ...
- </div>
- <div class = "akoonu" >
- ...
- </div>
- </div>
- </ ara>
Aṣeṣe aṣawakiri aṣa fun tito awọn oju-iwe wẹẹbu rẹ.
Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
O tun le ṣafikun awọn akọle kekere pẹlu <strong>
ati<em>
Lilo tcnu, awọn adirẹsi, & awọn kuru
<strong>
<em>
<address>
<abbr>
O yẹ ki o lo awọn ami itọkasi ( <strong>
ati <em>
) lati ṣafikun iyatọ wiwo laarin ọrọ kan tabi gbolohun ati ẹda agbegbe rẹ. Lo <strong>
fun ifarabalẹ atijọ ati <em>
fun akiyesi slick ati awọn akọle.
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
A address
lo eroja naa fun — o gboju rẹ! — awọn adirẹsi. Eyi ni bii o ṣe ri:
Akiyesi: Laini kọọkan ninu ohun address
gbọdọ pari pẹlu fifọ laini kan ( <br />
) lati ṣeto akoonu daradara bi o ti n ka ni igbesi aye gidi laisi awọn aṣa eyikeyi ti a lo.
Fun awọn kuru ati awọn acronyms, lo abbr
tag ( acronym
is deprecated in HTML5 ). Fi fọọmu kukuru sinu tag ati ṣeto akọle fun orukọ pipe.
<blockquote>
<p>
<cite>
Rii daju lati fi ipari si blockquote
ayika rẹ paragraph
ati cite
awọn afi. Nigbati o ba n tọka si orisun kan, lo cite
nkan naa. CSS yoo ṣaju orukọ kan laifọwọyi pẹlu dash em (& mdash;).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua...
Dokita Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Awọn tabili jẹ nla-fun ọpọlọpọ awọn nkan. Awọn tabili nla, sibẹsibẹ, nilo diẹ ti ifẹ isamisi lati wulo, iwọn, ati kika (ni ipele koodu). Eyi ni awọn imọran diẹ lati ṣe iranlọwọ.
Fi ipari si awọn akọsori ọwọn rẹ nigbagbogbo ni thead
iru awọn ilana jẹ thead
> tr
> th
.
Iru si awọn akọle ọwọn, gbogbo akoonu ara tabili rẹ yẹ ki o wa ni titan ni kan tbody
ki awọn ilana rẹ jẹ tbody
> tr
> td
.
Gbogbo awọn tabili yoo jẹ aṣa laifọwọyi pẹlu awọn aala pataki nikan lati rii daju kika ati ṣetọju eto. Ko si iwulo lati ṣafikun awọn kilasi afikun tabi awọn abuda.
# | Orukọ akọkọ | Oruko idile | Ede |
---|---|---|---|
1 | Diẹ ninu awọn | Ọkan | English |
2 | Joe | Sixpack | English |
3 | Stu | Denti | Koodu |
- <tabili kilasi="wọpọ-tabili"> kilasi = "wọpọ-tabili" >
- ...
- </tabili>
Gba igbadun diẹ pẹlu awọn tabili rẹ nipa fifi abila-striping kun-kan ṣafikun .zebra-striped
kilasi naa.
# | Orukọ akọkọ | Oruko idile | Ede |
---|---|---|---|
1 | Diẹ ninu awọn | Ọkan | English |
2 | Joe | Sixpack | English |
3 | Stu | Denti | Koodu |
- <tabili class="common-tabili zebra-striped"> kilasi = "wọpọ-tabili abila-ṣi kuro" >
- ...
- </tabili>
Gbigba apẹẹrẹ ti tẹlẹ, a mu iwulo ti awọn tabili wa pọ si nipa ipese iṣẹ ṣiṣe titọ nipasẹ jQuery ati ohun itanna Tablesorter . Tẹ akọsori ọwọn eyikeyi lati yi iru naa pada.
# | Orukọ akọkọ | Oruko idile | Ede |
---|---|---|---|
1 | Tirẹ | Ọkan | English |
2 | Joe | Sixpack | English |
3 | Stu | Denti | Koodu |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script type = "ọrọ/javascript" >
- $ ( iwe ). setan ( iṣẹ () {
- $ ( "tabili# tooTableExample" ). tablesorter ( { sọtọList : [[ 1 , 0 ]]] );
- });
- </script>
- <tabili kilasi = "tabili-abila-dika-sisọ-tẹle" >
- ...
- </tabili>
Gbogbo awọn fọọmu ni a fun ni awọn aza aiyipada lati ṣafihan wọn ni ọna kika ati iwọn. Awọn aṣa ti pese fun awọn igbewọle ọrọ, yan awọn atokọ, awọn agbegbe ọrọ, awọn bọtini redio ati awọn apoti ayẹwo, ati awọn bọtini.
Ṣafikun .form-stacked
si HTML fọọmu rẹ ati pe iwọ yoo ni awọn akole lori oke awọn aaye wọn dipo si apa osi wọn. Eyi ṣiṣẹ nla ti awọn fọọmu rẹ ba kuru tabi o ni awọn ọwọn meji ti awọn igbewọle fun awọn fọọmu wuwo.
Gẹgẹbi apejọ kan, awọn bọtini lo fun awọn iṣe lakoko ti a lo awọn ọna asopọ fun awọn nkan. Fun apẹẹrẹ, “Download” le jẹ bọtini kan ati pe “iṣẹ ṣiṣe aipẹ” le jẹ ọna asopọ kan.
Gbogbo awọn bọtini aiyipada si ara grẹy ina, ṣugbọn .primary
kilasi buluu kan wa. Pẹlupẹlu, yiyi awọn aṣa tirẹ jẹ peasy rọrun.
Awọn aza bọtini le ṣee lo si ohunkohun pẹlu ohun .btn
elo. Ni deede iwọ yoo fẹ lati lo awọn wọnyi si a
, button
, ati yan input
awọn eroja. Eyi ni bii o ṣe ri:
Fancy tobi tabi kere bọtini? Wa ninu rẹ!
Fun awọn bọtini ti ko ṣiṣẹ tabi ti wa ni alaabo nipasẹ app fun idi kan tabi omiiran, lo ipo alaabo. Iyẹn jẹ .disabled
fun awọn ọna asopọ ati :disabled
fun button
awọn eroja.
Awọn ifiranšẹ laini kan fun iṣafihan ikuna, ikuna ti o ṣeeṣe, tabi aṣeyọri ti iṣe. Paapa wulo fun awọn fọọmu.
Fun awọn ifiranṣẹ ti o nilo alaye diẹ, a ni awọn titaniji ara paragira. Iwọnyi jẹ pipe fun sisọ awọn ifiranṣẹ aṣiṣe gigun gun, ikilọ olumulo kan ti iṣe isunmọ, tabi ṣafihan alaye kan fun tcnu diẹ sii lori oju-iwe naa.
Modals-awọn ibaraẹnisọrọ tabi awọn apoti ina-jẹ nla fun awọn iṣe ọrọ-ọrọ ni awọn ipo nibiti o ṣe pataki ki o wa ni itọju ipo isale.
Ara kan ti o dara ...
Twipsies wulo pupọ fun iranlọwọ olumulo ti o ni idamu ati tọka si ọna ti o tọ.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, tabi natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam fun enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptam vol
Lo awọn agbejade lati pese alaye abẹlẹ si oju-iwe kan laisi ipalemo ipa.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ati eros.
Bootstrap was built with Preboot , ohun-ìmọ-orisun pack ti mixins ati oniyipada lati ṣee lo ni apapo pẹlu Kere , a CSS preprocessor fun yiyara ati ki o rọrun idagbasoke ayelujara.
Ṣayẹwo bii a ṣe lo Preboot ni Bootstrap ati bii o ṣe le lo o yẹ ki o yan lati ṣiṣẹ Kere lori iṣẹ akanṣe atẹle rẹ.
Lo aṣayan yii lati lo kikun Bootstrap ká Kere oniyipada, mixins, ati itẹ-ẹiyẹ ni CSS nipasẹ JavaScript ninu rẹ browser.
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "gbogbo" />
- <script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>
Ko rilara ojutu .js? Gbiyanju ohun elo Mac Kere tabi lo Node.js lati ṣajọ nigbati o ba ran koodu rẹ lọ.
Eyi ni diẹ ninu awọn ifojusi ohun ti o wa ninu Bootstrap Twitter gẹgẹbi apakan ti Bootstrap. Ori si oju opo wẹẹbu Bootstrap tabi oju-iwe iṣẹ akanṣe Github lati ṣe igbasilẹ ati kọ ẹkọ diẹ sii.
Awọn oniyipada ni Kere jẹ pipe fun mimu ati mimu dojuiwọn orififo CSS rẹ ọfẹ. Nigbati o ba fẹ yi iye awọ pada tabi iye ti a lo nigbagbogbo, ṣe imudojuiwọn ni aaye kan ati pe o ti ṣeto.
- // Awọn ọna asopọ
- @linkColor : # 8b59c2;
- @linkColorHover : ṣokunkun ( @linkColor , 10 );
- // Grẹy
- @dudu : #000;
- @grayDark : fẹẹrẹfẹ ( @black , 25 %);
- @grẹy : fẹẹrẹfẹ ( @ dudu , 50 %);
- @grayLight : fẹẹrẹfẹ ( @ dudu , 70 %);
- @grayLighter : fẹẹrẹfẹ ( @ dudu , 90 %);
- @funfun : #fff;
- // Awọn awọ Asẹnti
- @bulu : #08b5fb;
- @ewe : #46a546;
- @pupa : #9d261d;
- @ofeefee : #ffc40d;
- @osan : #f89406;
- @pinu : #c3325f;
- @eleyi ti : #7a43b6;
- // Ipilẹṣẹ
- @ipese : 20px ;
Kere tun pese ọna asọye miiran ni afikun si /* ... */
sintasi deede CSS.
- // Eleyi jẹ a ọrọìwòye
- /* Eyi tun jẹ asọye */
Mixins jẹ ipilẹ pẹlu tabi awọn apakan fun CSS, gbigba ọ laaye lati ṣajọpọ koodu bulọọki kan sinu ọkan. Wọn jẹ nla fun awọn ohun-ini iṣaju ataja bii box-shadow
, awọn gradients aṣawakiri-kiri, awọn akopọ fonti, ati diẹ sii. Ni isalẹ ni apẹẹrẹ ti awọn mixins ti o wa pẹlu Bootstrap.
- # font {
- . shorthand ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {
- font - iwọn : @ iwọn ;
- font - iwuwo : @ iwuwo ;
- ila - iga : @lineHeight ;
- }
- . sans - serif ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {
- font - idile : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - iwọn : @ iwọn ;
- font - iwuwo : @ iwuwo ;
- ila - iga : @lineHeight ;
- }
- . serif ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {
- font - idile : "Georgia" , Times New Roman , Times , sans - serif ;
- font - iwọn : @ iwọn ;
- font - iwuwo : @ iwuwo ;
- ila - iga : @lineHeight ;
- }
- . monospace ( @weight : deede , @ iwọn : 12px , @lineHeight : 20px ) {
- font - idile : "Monaco" , Oluranse Titun , monospace ;
- font - iwọn : @ iwọn ;
- font - iwuwo : @ iwuwo ;
- ila - iga : @lineHeight ;
- }
- }
- #giradient {
- . petele ( @startColor : #555, @endColor: #333) {
- abẹlẹ - awọ : @endColor ;
- abẹlẹ - tun : tun - x ;
- abẹlẹ - aworan : - khtml - gradient ( laini , oke osi , oke ọtun , lati ( @startColor ), si ( @endColor )); // Konqueror
- abẹlẹ - aworan : - moz - linear - gradient ( osi , @startColor , @endColor ); // FF 3.6+
- abẹlẹ - aworan : - ms - linear - gradient ( osi , @startColor , @endColor ); // IE10
- abẹlẹ - aworan : - webkit - gradient ( laini , oke osi , oke ọtun , awọ - Duro ( 0 % , @startColor ), awọ - Duro ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- abẹlẹ - aworan : - webkit - linear - gradient ( osi , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- abẹlẹ - aworan : - o - linear - gradient ( osi , @startColor , @endColor ); // Opera 11.10
- - ms - àlẹmọ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- àlẹmọ : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7
- abẹlẹ - aworan : laini - gradient ( osi , @startColor , @endColor ); // Le bošewa
- }
- . inaro ( @startColor : #555, @endColor: #333) {
- abẹlẹ - awọ : @endColor ;
- abẹlẹ - tun : tun - x ;
- abẹlẹ - aworan : - khtml - gradient ( laini , oke osi , isalẹ osi , lati ( @startColor ), si ( @endColor )); // Konqueror
- abẹlẹ - aworan : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- abẹlẹ - aworan : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- abẹlẹ - aworan : - webkit - gradient ( laini , oke osi , isalẹ osi , awọ - Duro ( 0 % , @startColor ), awọ - Duro ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- abẹlẹ - aworan : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- abẹlẹ - aworan : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- - ms - àlẹmọ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- àlẹmọ : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
- abẹlẹ - aworan : laini - gradient ( @startColor , @endColor ); // Awọn bošewa
- }
- . itọnisọna ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . inaro - mẹta - awọn awọ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Gba fanimọra ki o ṣe awọn iṣiro diẹ lati ṣe ina rọ ati awọn alapọpọ ti o lagbara bii eyiti o wa ni isalẹ.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Akoj System
- . apoti {
- igboro : @siteWidth ;
- ala : 0 laifọwọyi ;
- . clearfix ();
- }
- . awọn ọwọn ( @columnSpan : 1 ) {
- ifihan : inline ;
- leefofo : osi ;
- iwọn : ( @ gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- ala - osi : @gridGutterWidth ;
- &: akọkọ - ọmọ {
- ala - osi : 0 ;
- }
- }
- . aiṣedeede ( @columnOffset : 1 ) {
- ala - osi : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! pataki ;
- }