Tîpografi
Belgekirin û mînakên ji bo tîpografiya Bootstrap, di nav de mîhengên gerdûnî, sernav, teksta laş, navnîşan, û hêj bêtir.
Mîhengên gerdûnî
Bootstrap pêşandana gerdûnî ya bingehîn, tîpografî, û şêwazên girêdanê destnîşan dike. Dema ku bêtir kontrol hewce ye, dersên kargêriya nivîsê binihêrin .
- Stek tîpên xwemalî bikar bînin ku
font-family
ji bo her OS û cîhazê çêtirîn hildibijêre. - Ji bo pîvanek celebek berfirehtir û gihîştî, em guman dikin ku root-ya xwerû ya gerokê
font-size
(bi gelemperî 16px) da ku mêvan dikarin li gorî hewcedariyê pêşnumayên geroka xwe xweş bikin. $font-family-base
Wekî bingeha meya tîpografî ya ku li ser hatî sepandin ,$font-size-base
, û$line-height-base
taybetmendiyan bikar bînin<body>
.- Rengê girêdana gerdûnî bi rê ve
$link-color
bicîh bikin û binê zencîreyan tenê li ser bicîh bikin:hover
. - Ji
$body-bg
bo danîna abackground-color
li ser<body>
( -a xwerû#fff
) bikar bînin.
Ev şêwaz di hundurê de têne dîtin _reboot.scss
, û guhêrbarên gerdûnî di nav de têne destnîşan kirin _variables.scss
. $font-size-base
Piştrast bike ku tê de bicîh bikin rem
.
Sernav
Hemî sernavên HTML-ê, <h1>
bi riya <h6>
, berdest in.
Sernivîs | Mînak |
---|---|
|
h1. Sernavê Bootstrap |
|
h2. Sernavê Bootstrap |
|
h3. Sernavê Bootstrap |
|
h4. Sernavê Bootstrap |
|
h5. Sernavê Bootstrap |
|
h6. Sernavê Bootstrap |
.h1
di nav .h6
dersan de jî hene, ji bo dema ku hûn dixwazin şêwaza tîpa sernavê li hev bikin lê nikaribin hêmana HTML-ê ya têkildar bikar bînin.
h1. Sernavê Bootstrap
h2. Sernavê Bootstrap
h3. Sernavê Bootstrap
h4. Sernavê Bootstrap
h5. Sernavê Bootstrap
h6. Sernavê Bootstrap
Xweserkirina sernavan
Dersên kargêriya tevlêkirî bikar bînin da ku ji Bootstrap 3 nivîsa sernavê ya piçûk ji nû ve biafirînin.
Sernavê xuyangê ya xeyalî Bi nivîsa duyemîn a ziravkirî
Sernavan nîşan bide
Hêmanên sernavê yên kevneşopî hatine sêwirandin ku di goştê naveroka rûpela we de çêtirîn bixebitin. Gava ku hûn hewce ne ku sernavek rawestin, bi karanîna sernavek xuyangê bifikirin - şêwazek sernivîsê ya mezintir, hinekî bi ramanek bêtir. Bînin bîra xwe ku ev sernav ji hêla xwerû ve ne bersivdar in, lê gengaz e ku mezinahiyên tîpên bersivdar çalak bikin .
Nîşan 1 |
Nîşan 2 |
Nîşan 3 |
Nîşan 4 |
Gûlle
Bi lêzêdekirina paragrafekê rawestin .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Hêmanên nivîsê yên xêzkirî
Styling ji bo hêmanên HTML5-ê yên hevbeş.
Hûn dikarin nîşana nîşanê bikar bîninhighlightnivîstok.
Ev rêza nivîsê tê wateya ku wekî metna jêbirin were hesibandin.
Ev rêza nivîsê tê wê wateyê ku wekî êdî ne rast were hesibandin.
Ev rêza nivîsê tê wateya ku wekî pêvekek belgeyê were hesibandin.
Ev rêza nivîsê dê wekî binxêzkirî be
Ev rêza nivîsê tê vê wateyê ku wekî çapa xweş were hesibandin.
Ev rêz wek nivîsa qelew hatiye pêşkêşkirin.
Ev rêz wek nivîsa îtalîk hatiye pêşkêşkirin.
.mark
û .small
ders di heman demê de peyda dibin ku heman şêwazên wekî <mark>
û di heman demê de <small>
ku ji ber encamên semantîkî yên nexwestî yên ku etîketan derdixin dûr bixin.
Digel ku li jor nayê xuyang kirin, bi serbestî bikar bînin <b>
û <i>
di HTML5 de. <b>
tê vê wateyê ku peyvan an hevokan ronî bike bêyî ku girîngiyek zêde ragihîne dema ku <i>
bi piranî ji bo deng, peyvên teknîkî, hwd.
Karûbarên nivîsê
Bi karûbarên meya nivîsê û karûbarên rengîn re hevrêziya nivîsê, veguherîn, şêwaz, giranî û reng biguhezînin .
Kurtenivîsandin
Pêkanîna stîlîzekirî ya <abbr>
hêmana HTML-ê ji bo kurtenivîs û kurtenivîsan da ku guhertoya berfireh li ser hover nîşan bide. Kurtenivîsek xwedan xêzek xwerû heye û kursorek alîkariyê werdigire da ku li ser hover û ji bikarhênerên teknolojiyên alîkar re çarçoveyek zêde peyda bike.
Ji .initialism
bo tîpek piçûktir li kurtenivîsekê zêde bikin.
attr
HTML
Blockquotes
Ji bo girtina blokên naverokê ji çavkaniyek din di hundurê belgeya we de. <blockquote class="blockquote">
Li dora her HTML-ê wekî vebêjê bipêçin .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Navê çavkaniyekê
Ji <footer class="blockquote-footer">
bo tespîtkirina çavkaniyê a-yek zêde bikin. Navê xebata çavkaniyê pêça <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alignment
Ji bo guheztina lihevhatina bloka xweya xwe wekî ku hewce be karûbarên nivîsê bikar bînin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lists
Unstyled
Li ser hêmanên navnîşê marjînala xwerû list-style
û çepê rake (tenê zarokên yekser). Ev tenê ji bo tiştên tavilê yên navnîşa zarokan derbas dibe , tê vê wateyê ku hûn hewce ne ku ji bo her navnîşên hêlîn jî polê zêde bikin.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Hêsankirin di aliquet pretium nisl
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Inline
Kulîlkên lîsteyek derxînin û hin ronahiyê margin
bi tevliheviya du çînan bicîh bikin, .list-inline
û .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Lihevhatina lîsteya danasînê
Bi karanîna çînên pêşwextkirî yên pergala meya torê (an jî tevliheviyên semantîkî) şert û ravekirinên horîzontal li hev bikin. Ji bo şertên dirêj, hûn dikarin vebijarkî .text-truncate
çînek lê zêde bikin da ku nivîsê bi elipsîsê qut bikin.
- Navnîşan lîsteyên
- Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Termê qutkirî tê qutkirin
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Lîsteya pênase hêlîn
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Mezinahiyên tîpên bersivdar
Bootstrap v4.3 bi vebijarka çalakkirina mezinahiyên fontê yên bersivdar vedigere, dihêle ku nivîs bi rengek xwezayî di nav mezinahiyên cîhaz û dîmenderê de hûr bibe. RFS dikare bi $enable-responsive-font-sizes
guheztina guherbara Sass li true
Bootstrap û ji nû ve berhevkirina Bootstrap ve were çalak kirin.
Ji bo piştgirîkirina RFS , em Sass mixin bikar tînin da ku font-size
taybetmendiyên xweyên normal biguhezînin. Mezinahiyên fontê yên bersivdar dê di calc()
fonksiyonên bi tevlihevî rem
û yekîneyên dîtinê de bêne berhev kirin da ku tevgera pîvana bersivdar çalak bike. Zêdetir li ser RFS û veavakirina wê dikare li ser depoya wê ya GitHub were dîtin .