in English

Yambitsaninso

Yambitsaninso, zosonkhanitsira zosintha za CSS mu fayilo imodzi, kickstart Bootstrap kuti mupereke maziko abwino, osasinthika, komanso osavuta kuti mumangepo.

Patsamba ili

Njira

Yambitsaninso kumangirira pa Normalize, ndikupereka zinthu zambiri za HTML zokhala ndi masitaelo ongogwiritsa ntchito zosankha zokhazokha. Kukongoletsa kowonjezera kumachitika kokha ndi makalasi. Mwachitsanzo, timayambitsanso <table>masitayelo ena kuti akhale osavuta ndikupereka .table, .table-bordered, ndi zina.

Nawa maupangiri athu ndi zifukwa zosankhira zomwe mungasinthe mu Reboot:

Sinthani zina zosasintha za msakatuli kuti mugwiritse ntchito rems m'malo mwa ems pakukula kwa magawo.
Pewani margin-top. Mitsempha yoyimirira imatha kugwa, kutulutsa zotsatira zosayembekezereka. Chofunika kwambiri, njira imodzi yokha marginndi chitsanzo chosavuta chamalingaliro.
Kuti muwonjezeko mosavuta kukula kwa chipangizo, ma block element akuyenera kugwiritsa ntchito rems pa margins.
Chepetsani fontzidziwitso za katundu wokhudzana ndi katundu, pogwiritsa ntchito inheritngati kuli kotheka.

Zosasintha zamasamba

Zosintha <html>ndi <body>zinthu zimasinthidwa kuti zipereke zosasintha zapatsamba lonse. Makamaka:

The box-sizingimayikidwa padziko lonse lapansi pazinthu zonse-kuphatikiza *::beforendi *::after, mpaka border-box. Izi zimatsimikizira kuti m'lifupi mwazinthu zomwe zalengezedwa sizidutsa chifukwa cha padding kapena malire.
- Palibe maziko omwe font-sizeadalengezedwa pa <html>, koma 16pxamaganiziridwa (osatsegula osasintha). font-size: 1remikugwiritsidwa ntchito <body>pakusintha mtundu wosavuta kuyankha kudzera pamafunso apawailesi yakanema ndikulemekeza zomwe amakonda ndikuwonetsetsa kuti njira yofikirako ikupezeka. Kusasinthika kwa msakatuliwu kumatha kuchotsedwa posintha $font-size-rootkusintha.
The <body>imayikanso zapadziko lonse lapansi font-family, font-weight, line-height, ndi color. Izi zimatengera pambuyo pake ndi mawonekedwe ena kuti aletse kusagwirizana kwa zilembo.
Kwa chitetezo, <body>adalengeza background-colorkuti #fff.

Mafonti achilengedwe

Bootstrap imagwiritsa ntchito "zolemba zamtundu wamba" kapena "mawonekedwe amtundu" kuti azitha kumasulira bwino pazida zilizonse ndi OS. Mafonti amakasitomalawa adapangidwa makamaka poganizira zida zamasiku ano, ndikumasuliridwa bwino pazithunzi, chithandizo chamitundu yosiyanasiyana, ndi zina zambiri. Werengani zambiri za masanjidwe a zilembo m'nkhani iyi ya Smashing Magazine .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Dziwani kuti chifukwa ma fonti akuphatikizanso ma emoji, zilembo zambiri zodziwika bwino za chizindikiro/dingbat ziziwonetsedwa ngati zithunzi zamitundu yambiri. Maonekedwe awo amasiyana, kutengera ndi kalembedwe ka emoji msakatuli / nsanja, ndipo sangakhudzidwe ndi colormasitayilo aliwonse a CSS.

Izi font-familyzimagwiritsidwa ntchito ku <body>cholowa chapadziko lonse lapansi mu Bootstrap. Kuti musinthe zapadziko lonse lapansi font-family, sinthani $font-family-basendikuwonjezeranso Bootstrap.

Mitu ndi ndime

Zinthu zonse zamutu-mwachitsanzo, <h1>-ndipo <p>zimakonzedwanso kuti margin-topzichotsedwe. Mitu margin-bottom: .5remyawonjezedwa ndi ndime margin-bottom: 1remkuti muzitalikirana mosavuta.

Mutu	Chitsanzo
`<h1></h1>`	h1 ndi. Mutu wa bootstrap
`<h2></h2>`	h2 ndi. Mutu wa bootstrap
`<h3></h3>`	h3 ndi. Mutu wa bootstrap
`<h4></h4>`	h4 ndi. Mutu wa bootstrap
`<h5></h5>`	h5 ndi. Mutu wa bootstrap
`<h6></h6>`	h6 ndi. Mutu wa bootstrap

Mndandanda

Mindanda yonse— <ul>, <ol>, ndi <dl>— margin-topyachotsedwa ndi margin-bottom: 1rem. Minda yosungidwa ilibe margin-bottom. Takhazikitsanso zoyatsa padding-leftndi <ul>ma <ol>element.

Mindandanda yonse ili ndi malire ake apamwamba achotsedwa
Ndipo malire awo pansi adakhazikika
Minda yosungidwa ilibe malire apansi
- Mwanjira iyi amakhala ndi mawonekedwe ochulukirapo
- Makamaka zikatsatiridwa ndi zinthu zambiri zamndandanda
Padding yakumanzere yakhazikitsidwanso

Nawu mndandanda wolamulidwa
Ndi zinthu zingapo mndandanda
Ili ndi mawonekedwe ofanana onse
Monga mndandanda wapita wosayitanidwa

Pamakongoletsedwe osavuta, maulamuliro omveka bwino, ndi masitayilo abwinoko, mindandanda yofotokozera yasinthidwa ma margins. <dd>s bwererani margin-leftndi 0kuwonjezera margin-bottom: .5rem. <dt>s ndi olimba mtima .

Mndandanda wamafotokozedwe: Mndandanda wofotokozera ndi wabwino kufotokozera mawu.
Nthawi: Tanthauzo la mawuwa.; Tanthauzo lachiwiri la mawu omwewo.
Nthawi ina: Tanthauzo la liwu lina ili.

Inline kodi

Mangirirani mawu amzere a code ndi <code>. Onetsetsani kuti mwathawa mabulaketi a HTML.

Mwachitsanzo, <section>iyenera kukulungidwa ngati inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kodi midadada

Gwiritsani ntchito <pre>s pamizere ingapo yamakhodi. Apanso, onetsetsani kuti mwathawa mabulaketi aliwonse mu code kuti mumasulire bwino. Chinthucho <pre>chimakonzedwanso kuti chichotse margin-topndikugwiritsa ntchito remmayunitsi ake margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Zosintha

Kuti muwonetse zosinthika gwiritsani ntchito <var>tag.

y = mx + b _

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Zolemba za ogwiritsa

Gwiritsani ntchito <kbd>kuwonetsa zolowetsa zomwe nthawi zambiri zimalowetsedwa kudzera pa kiyibodi.

Kusintha maulalo, lembani cdndikutsatiridwa ndi dzina lachikwatu.
Kuti musinthe makonda, dinani ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Zitsanzo zotuluka

Kuti muwonetse zitsanzo kuchokera ku pulogalamu gwiritsani ntchito <samp>tag.

Mawuwa akuyenera kutengedwa ngati chitsanzo chotuluka pakompyuta.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Matebulo

Matebulo amasinthidwa pang'ono kukhala masitayelo <caption>a s, kugwa m'malire, ndikuwonetsetsa kuti akugwirizana text-alignponseponse. Zosintha zina zamalire, padding, ndi zina zambiri zimabwera ndi .tablekalasi .

Ili ndi tebulo lachitsanzo, ndipo ili ndi mawu ake ofotokozera zomwe zili mkati.
Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

Mafomu

Mitundu yosiyanasiyana yapangidwanso kuti ikhale masitayilo osavuta. Nazi zina mwazosintha kwambiri:

<fieldset>s alibe malire, zotchingira, kapena malire kotero kuti azitha kugwiritsidwa ntchito ngati zokutira pazolowetsa zapagulu kapena magulu a zolowetsa.
<legend>s, monga ma fieldsets, adasinthidwanso kuti awonetsedwe ngati mutu wamtundu.
<label>s adayikidwa display: inline-blockkuti alole marginkugwiritsidwa ntchito.
<input>s, <select>s, <textarea>s, ndi <button>s nthawi zambiri amayankhidwa ndi Normalize, koma Yambitsaninso amachotsa awo marginndikuyika line-height: inherit, nawonso.
<textarea>s amasinthidwa kuti azitha kukula molunjika ngati kukulitsa kukula kopingasa nthawi zambiri "kuphwanya" masanjidwe amasamba.
<button>s ndi <input>batani zinthu zili ndi cursor: pointernthawi :not(:disabled).

Kusintha uku, ndi zina, zikuwonetsedwa pansipa.

Chitsanzo nthano

Chitsanzo cholowetsa

Chitsanzo cha imelo

Chitsanzo cha foni

Ulalo wa chitsanzo

Nambala ya chitsanzo

Kusaka kwachitsanzo

Zitsanzo zosiyanasiyana

Chitsanzo cholowetsa fayilo

Chitsanzo sankhani

Chongani bokosi ili

Chosankha chimodzi ndi ichi ndi icho Njira yachiwiri ndi chinthu chinanso chomwe chimakhala chachitali kwambiri kuti chiwonetse kukulungidwa kwa mawonekedwe apamwambawa. Njira yachitatu ndiyoyimitsidwa

Chitsanzo textarea

Chitsanzo tsiku

Chitsanzo nthawi

Chitsanzo achinsinsi

Chitsanzo datetime-local

Chitsanzo sabata

Chitsanzo mwezi

Chitsanzo mtundu

Chitsanzo chotuluka 100

Thandizo la deti & mtundu

Kumbukirani kuti zolowetsa tsiku sizimathandizidwa mokwanira ndi asakatuli onse, omwe ndi Safari.

Zolozera pa mabatani

Kuyambitsanso kumaphatikizapo zowonjezera role="button"kuti musinthe cholozera chokhazikika kukhala pointer. Onjezani izi kuzinthu kuti zithandizire kuwonetsa kuti zinthu zikuyenda bwino. Udindo uwu siwofunika pazinthu <button>zomwe cursorzimasintha.

Non-batani chinthu batani

<span role="button" tabindex="0">Non-button element button</span>

Zinthu zosiyanasiyana

Adilesi

Zinthuzi <address>zasinthidwa kuti zikhazikitsenso osatsegula osatsegula font-stylekuchokera italicku normal. line-heightnawonso tsopano cholowa, ndipo margin-bottom: 1remiwonjezedwa. <address>s ndi zofotokozera za makolo apafupi (kapena gulu lonse la ntchito). Sungani masanjidwe pomaliza mizere ndi <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Dzina
Lathunthu [email protected]

Blockquote

Zosasintha pa blockquotes marginndi 1em 40px, kotero timayikanso izo kuti 0 0 1remzikhale zina zogwirizana ndi zinthu zina.

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title

Zinthu zam'kati

Chinthuchi <abbr>chimalandira masitayelo ofunikira kuti chiwonekere pakati pa ndime.

Nulla attr vitae elit libero, pharetra augue.

Chidule

Zosasintha cursorpa chidule ndi text, kotero timayikanso izo kuti pointerzisonyeze kuti chinthucho chikhoza kulumikizidwa nacho podina.

Zambiri

Zambiri zatsatanetsatane.

Ngakhale zambiri

Nazi zambiri zatsatanetsatane.

HTML5 `[hidden]`mawonekedwe

HTML5 imawonjezera mawonekedwe atsopano apadziko lonse lapansi otchedwa[hidden] , omwe amalembedwa ngati display: nonemwachisawawa. Kubwereka lingaliro kuchokera ku PureCSS , timakonza izi popanga [hidden] { display: none !important; }kuti zisawonongeke displaymwangozi.

<input type="text" hidden>

jQuery kusagwirizana

[hidden]sizigwirizana ndi jQuery $(...).hide()ndi $(...).show()njira. Chifukwa chake, pakadali pano sitikuvomereza makamaka [hidden]njira zina zoyendetsera displayzinthu.

Kungosintha mawonekedwe a chinthu, kutanthauza kuti displaysichinasinthidwe ndipo chinthucho chikhoza kukhudzabe kuyenda kwa chikalatacho, gwiritsani ntchito .invisiblekalasi m'malo mwake.