Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
ʻO Bootstrap kahi hāmeʻa mai Twitter i hoʻolālā ʻia e hoʻomaka i ka hoʻomohala ʻana i nā webapps a me nā pūnaewele.
Loaʻa iā ia ka CSS kumu a me HTML no ka typography, forms, buttons, tables, grids, navigation, and more.
Makaʻala Nerd: Ua kūkulu ʻia ʻo Bootstrap me Less a ua hoʻolālā ʻia e hana ma waho o ka ʻīpuka me ka noʻonoʻo ʻana i nā polokalamu kele hou.
No ka hoʻomaka wikiwiki a me ka maʻalahi, e kope wale i kēia snippet i kāu ʻaoʻao pūnaewele.
He mea hoʻohana i ka Less? ʻAʻohe pilikia, hoʻopili wale i ka repo a hoʻohui i kēia mau laina:
Hoʻoiho, ʻoki, huki, faila i nā pilikia, a me nā mea hou aʻe me ka mana Bootstrap repo ma Github.
ʻO ka ʻōnaehana mākia paʻamau i hāʻawi ʻia ma ke ʻano he ʻāpana o Bootstrap he 940px ākea 16-kolani mākia. He mea ʻono ia o ka ʻōnaehana 960 grid kaulana, akā me ka ʻole o ka palena ʻē aʻe ma ka ʻaoʻao hema a me ka ʻaoʻao ʻākau.
E like me ka mea i hōʻike ʻia ma ʻaneʻi, hiki ke hana ʻia kahi hoʻolālā kumu me ʻelua "nā kolamu," ʻo kēlā me kēia me kahi helu o nā kolamu kumu 16 a mākou i wehewehe ai ma ke ʻano he ʻāpana o kā mākou pūnaewele puni honua. E ʻike i nā laʻana ma lalo no nā ʻano like ʻole.
- <div class="laina"> papa = "lālani" >
- <div class = "nā kolamu span6" >
- ...
- </div>
- <div class = "span10 kolamu" >
- ...
- </div>
- </div>
He 940px kumu ākea, hoʻonohonoho pahu kikowaena no kahi pūnaewele a i ʻole ʻaoʻao.
- <kino>
- <div class = "container" >
- ...
- </div>
- </kino>
ʻO kahi ʻaoʻao ʻaoʻao wai maʻalahi me ka liʻiliʻi a me ka nui-ākea a me ka ʻaoʻao ʻaoʻao hema. Nui no nā polokalamu.
- <kino>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "maʻiʻo" >
- ...
- </div>
- </div>
- </kino>
ʻO kahi hierarchy typographic maʻamau no ka hoʻonohonoho ʻana i kāu mau ʻaoʻao pūnaewele.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Hiki iā ʻoe ke hoʻohui i nā subheadings me ka <strong>
a<em>
Ke hoʻohana nei i ka manaʻo nui, nā ʻōlelo a me nā pōkole
<strong>
<em>
<address>
<abbr>
Pono e hoʻohana ʻia nā huaʻōlelo koʻikoʻi ( <strong>
a <em>
) e hoʻohui i ka ʻokoʻa ʻike ma waena o kahi huaʻōlelo a ʻōlelo paha a me kāna kope a puni. E hoʻohana <strong>
no ka noʻonoʻo kahiko a <em>
no ka nānā ʻana a me nā poʻo inoa.
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.
Hoʻohana ʻia ka address
mea no—ua manaʻo ʻoe!—nā ʻōlelo. Penei kona ano:
'Ōlelo Aʻo: Pono e pau kēlā me kēia laina address
me ka hoʻokaʻawale laina ( <br />
) no ka hoʻonohonoho pono ʻana i ka ʻike e like me ka heluhelu ʻana ma ke ola maoli me ka ʻole o nā kaila i hoʻohana ʻia.
No nā pōkole a me nā acronyms, e hoʻohana i ka abbr
hōʻailona ( acronym
ua hoʻopau ʻia ma HTML5 ). E kau i ka pepa pōkole i loko o ka hōʻailona a hoʻonoho i poʻo inoa no ka inoa piha.
<blockquote>
<p>
<cite>
E ʻoluʻolu e hoʻopaʻa i kāu a blockquote
puni . Ke kuhikuhi ʻana i kahi kumu, e hoʻohana i ka mea. E hoʻomaka koke ka CSS i kahi inoa me ka em dash (—).paragraph
cite
cite
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
Kauka Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Nui nā papaʻaina-no nā mea he nui. ʻO nā papa nui, akā naʻe, pono ke aloha markup e pono, scalable, a hiki ke heluhelu ʻia (ma ka pae code). Eia kekahi mau ʻōlelo kōkua.
Hoʻopili mau i kāu mau poʻomanaʻo kolamu i loko o kahi thead
hierarchy he thead
> tr
> th
.
E like me nā poʻomanaʻo kolamu, pono e hoʻopaʻa ʻia nā ʻike a pau o kāu papaʻaina i kahi tbody
a no laila ʻo kāu hierarchy tbody
> tr
> td
.
Hoʻopili ʻia nā papa ʻaina āpau me nā palena koʻikoʻi wale nō e hōʻoia i ka heluhelu ʻana a mālama ʻia ke ʻano. ʻAʻole pono e hoʻohui i nā papa a i ʻole nā hiʻohiʻona.
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | ʻO kekahi | ʻekahi | Pelekania |
2 | Joe | ʻEono ʻeke | Pelekania |
3 | ʻO Stu | Dent | Code |
- <table class="common-table"> papa = "papakaukau maʻamau" >
- ...
- </papa>
E ʻoluʻolu iki i kāu mau papa ma ka hoʻohui ʻana i ka zebra-striping—e hoʻohui wale i ka .zebra-striped
papa.
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | ʻO kekahi | ʻekahi | Pelekania |
2 | Joe | ʻEono ʻeke | Pelekania |
3 | ʻO Stu | Dent | Code |
- <table class="common-table zebra-striped"> class = "ka papaʻaina zebra-striped" >
- ...
- </papa>
Ke lawe nei i ka laʻana mua, hoʻomaikaʻi mākou i ka pono o kā mākou papa ʻaina ma o ka hāʻawi ʻana i nā hana hoʻokaʻawale ma o jQuery a me ka plugin Tablesorter . Kaomi i ke poʻo o ke kolamu e hoʻololi i ke ʻano.
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | ʻO kāu | ʻekahi | Pelekania |
2 | Joe | ʻEono ʻeke | Pelekania |
3 | ʻO Stu | Dent | Code |
- <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 = "text/javascript" >
- $ ( palapala ). mākaukau ( hana () {
- $ ( "papa#sortTableExample" ). papa kuhikuhi papa ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <papa papa = "ka papa zebra-striped maʻamau" >
- ...
- </papa>
Hāʻawi ʻia nā ʻano āpau i nā kaila paʻamau e hōʻike iā lākou ma ke ʻano hiki ke heluhelu a hiki ke hoʻonui ʻia. Hāʻawi ʻia nā ʻano no nā hoʻokomo kikokikona, koho i nā papa inoa, nā wahi kikokikona, nā pihi lekiō a me nā pahu pahu, a me nā pihi.
Hoʻohui .form-stacked
i ka HTML o kāu palapala a loaʻa iā ʻoe nā lepili ma luna o kā lākou mau kahua ma mua o ko lākou hema. Hana maikaʻi kēia inā pōkole kāu mau palapala a i ʻole ʻelua kolamu o nā mea hoʻokomo no nā ʻano kaumaha.
Ma ke ʻano he ʻaha kūkā, hoʻohana ʻia nā pihi no nā hana ʻoiai e hoʻohana ʻia nā loulou no nā mea. No ka laʻana, ʻo "Download" paha he pihi a ʻo "hana hou" hiki ke lilo i loulou.
ʻO nā pihi āpau i ke ʻano hina hina, akā loaʻa kahi .primary
papa polū. Eia kekahi, ʻo ka ʻōwili ʻana i kāu mau ʻano ponoʻī he peasy maʻalahi.
Hiki ke hoʻohana ʻia nā ʻano pihi i kekahi mea me ka mea i hoʻopili ʻia .btn
. ʻO ka maʻamau, makemake ʻoe e hoʻopili i kēia mau mea wale nō i a
, button
, a koho i input
nā mea. Penei kona ano:
Makemake i nā pihi nui a liʻiliʻi paha? Loaʻa iā ia!
No nā pihi ʻaʻole hoʻoikaika a paʻa ʻole paha e ka app no kekahi kumu a i ʻole, e hoʻohana i ka mokuʻāina kīnā. ʻO ia .disabled
no nā loulou a me :disabled
nā button
mea.
Nā leka laina hoʻokahi no ka hōʻike ʻana i ka hāʻule, hiki ʻole, a i ʻole ka kūleʻa o kahi hana. Pono pono no nā puka.
No nā memo e koi ana i kahi wehewehe wehewehe, loaʻa iā mākou nā mākaʻikaʻi kaila paukū. He kūpono kēia no ka hoʻoulu ʻana i nā memo hala ʻoi aku ka lōʻihi, e ʻōlelo ana i ka mea hoʻohana i kahi hana e kali nei, a i ʻole ka hōʻike ʻana i ka ʻike no ka manaʻo nui i ka ʻaoʻao.
Maikaʻi nā modals—dialogs a i ʻole pahu kukui—no nā hana ʻokoʻa i nā kūlana he mea nui e mālama ʻia ka pōʻaiapili hope.
Hoʻokahi kino maikaʻi ...
He mea maikaʻi loa nā Twipsies no ke kōkua ʻana i kahi mea hoʻohana huikau a kuhikuhi iā lākou i ke ala pololei.
Lorem ipsum dollar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut 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 voluptas nemo volupremtis quasi fugit fugit .
E hoʻohana i nā popovers e hāʻawi i ka ʻike subtexttual i kahi ʻaoʻao me ka ʻole o ka hoʻolālā ʻana.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
Ua kūkulu ʻia ʻo Bootstrap me Preboot , he pūʻulu open-source o mixins a me nā ʻano like ʻole e hoʻohana pū ʻia me Less , kahi preprocessor CSS no ka hoʻomohala pūnaewele wikiwiki a maʻalahi.
E nānā pehea mākou i hoʻohana ai iā Preboot ma Bootstrap a pehea ʻoe e hoʻohana ai inā koho ʻoe e holo i ka liʻiliʻi ma kāu papahana aʻe.
E hoʻohana i kēia koho no ka hoʻohana piha ʻana i nā ʻano liʻiliʻi liʻiliʻi o Bootstrap, mixins, a me ka nesting ma CSS ma o javascript i kāu polokalamu kele pūnaewele.
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />
- <script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>
ʻAʻole manaʻo i ka hoʻonā .js? E ho'āʻo i ka polokalamu Less Mac a i ʻole e hoʻohana iā Node.js e hōʻuluʻulu i ka wā e kau ai ʻoe i kāu code.
Eia kekahi o nā mea koʻikoʻi o ka mea i hoʻokomo ʻia ma Twitter Bootstrap ma ke ʻano o Bootstrap. E poʻo i ka pūnaewele Bootstrap a i ʻole ʻaoʻao papahana Github e hoʻoiho a aʻo hou.
He kūpono nā ʻano like ʻole i ka liʻiliʻi no ka mālama ʻana a me ka hoʻonui ʻana i kāu CSS maʻi poʻo. Ke makemake ʻoe e hoʻololi i ka waiwai kala a i ʻole ka waiwai i hoʻohana pinepine ʻia, e hoʻohou iā ia ma kahi wahi a ua hoʻonohonoho ʻoe.
- // Nā loulou
- @linkColor : #8b59c2;
- @linkColorHover : darken ( @linkColor , 10 );
- // Nahinahina
- @ʻeleʻele : #000;
- @grayDark : māmā ( @ʻeleʻele , 25 %);
- @hina : māmā ( @ʻeleʻele , 50 %);
- @GrayLight : māmā ( @ʻeleʻele , 70 %);
- @grayLighter : māmā ( @ʻeleʻele , 90 %);
- @keokeo : #fff;
- // Nā waihoʻoluʻu leo
- @uliuli : #08b5fb;
- @' ōmaʻomaʻo : #46a546;
- @ulaula : #9d261d;
- @melemele : #ffc40d;
- @alani : #f89406;
- @ʻulaʻula : #c3325f;
- @ʻulaʻula : #7a43b6;
- // Kaulana
- @kumu : 20px ;
Hāʻawi ʻo Less i kahi ʻano manaʻo ʻē aʻe me ka /* ... */
syntax maʻamau o CSS.
- // He ʻōlelo kēia
- /* He ʻōlelo hoʻi kēia */
Hoʻokomo maoli ʻia nā Mixins a i ʻole ʻāpana no CSS, e ʻae iā ʻoe e hoʻohui i kahi poloka o ke code i hoʻokahi. He mea maikaʻi ia no nā mea kūʻai aku i prefixed e like me box-shadow
, cross-browser gradients, font stacks, a me nā mea hou aku. Aia ma lalo kahi laʻana o nā mixins i hoʻokomo ʻia me Bootstrap.
- #kino {
- . pōkole ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {
- font - nui : @ka nui ;
- font - kaumaha : @kaumaha ;
- laina - kiekie : @lineHeight ;
- }
- . sans - serif ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - nui : @ka nui ;
- font - kaumaha : @kaumaha ;
- laina - kiekie : @lineHeight ;
- }
- . serif ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Manawa , sans - serif ;
- font - nui : @ka nui ;
- font - kaumaha : @kaumaha ;
- laina - kiekie : @lineHeight ;
- }
- . monospace ( @kaumaha : maʻamau , @nui : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- font - nui : @ka nui ;
- font - kaumaha : @kaumaha ;
- laina - kiekie : @lineHeight ;
- }
- }
- #gradient {
- . paepae ( @startColor : #555, @endColor: #333) {
- hope - kala : @endColor ;
- hope - hana hou : hana hou - x ;
- kāʻei kua - kiʻi : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @endColor )); // Naʻi aupuni
- kāʻei kua - kiʻi : - moz - linear - gradient ( hema , @startColor , @endColor ); // FF 3.6+
- kāʻei kua - kiʻi : - ms - linear - gradient ( hema , @startColor , @endColor ); // IE10
- kāʻei kua - kiʻi : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), kala - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- hope - kiʻi : - webkit - linear - gradient ( hema , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- kāʻei kua - kiʻi : - o - linear - gradient ( hema , @startColor , @endColor ); // ʻOpera 11.10
- - ms - kānana : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- kānana : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7
- kāʻei kua - kiʻi : linear - gradient ( hema , @startColor , @endColor ); // Le standard
- }
- . kū pololei ( @startColor : #555, @endColor: #333) {
- hope - kala : @endColor ;
- hope - hana hou : hana hou - x ;
- kāʻei kua - kiʻi : - khtml - gradient ( linear , hema luna , hema lalo , mai ( @startColor ), a ( @endColor )); // Naʻi aupuni
- hope - kiʻi : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- kāʻei kua - kiʻi : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- hope - kiʻi : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), kala - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- hope - kiʻi : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- kāʻei kua - kiʻi : - o - linear - gradient ( @startColor , @endColor ); // ʻOpera 11.10
- - ms - kānana : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- kānana : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
- hope - kiʻi : linear - gradient ( @startColor , @endColor ); // Ka maʻamau
- }
- . kuhikuhi ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . kū pololei - ʻekolu - kala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
E ʻoluʻolu a hana i kekahi makemakika e hoʻohua i nā mixins maʻalahi a ikaika e like me ka mea ma lalo nei.
- // Māmā
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Pūnaehana Grid
- . ipu {
- laula : @siteWidth ;
- palena : 0 kaʻa ;
- . clearfix ();
- }
- . kolamu ( @columnSpan : 1 ) {
- hōʻike : inline ;
- lana : hema ;
- laula : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- palena - hema : @gridGutterWidth ;
- &: mua - keiki {
- palena - hema : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- palena - hema : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! mea nui ;
- }