ટાઇપોગ્રાફી
બુટસ્ટ્રેપ ટાઇપોગ્રાફી માટે દસ્તાવેજીકરણ અને ઉદાહરણો, જેમાં વૈશ્વિક સેટિંગ્સ, હેડિંગ, મુખ્ય ટેક્સ્ટ, સૂચિઓ અને વધુનો સમાવેશ થાય છે.
વૈશ્વિક સેટિંગ્સ
બુટસ્ટ્રેપ મૂળભૂત વૈશ્વિક પ્રદર્શન, ટાઇપોગ્રાફી અને લિંક શૈલીઓ સેટ કરે છે. જ્યારે વધુ નિયંત્રણની જરૂર હોય, ત્યારે ટેક્સ્ટ ઉપયોગિતા વર્ગો તપાસો .
- મૂળ ફોન્ટ સ્ટેકનો ઉપયોગ કરો જે
font-family
દરેક OS અને ઉપકરણ માટે શ્રેષ્ઠ પસંદ કરે છે . - વધુ સમાવિષ્ટ અને સુલભ પ્રકાર સ્કેલ માટે, અમે બ્રાઉઝર ડિફોલ્ટ રૂટ
font-size
(સામાન્ય રીતે 16px) ધારીએ છીએ જેથી મુલાકાતીઓ તેમના બ્રાઉઝર ડિફોલ્ટને જરૂરિયાત મુજબ કસ્ટમાઇઝ કરી શકે. $font-family-base
અમારા ટાઇપોગ્રાફિક આધાર તરીકે ,$font-size-base
, અને$line-height-base
વિશેષતાઓનો ઉપયોગ કરો<body>
.- દ્વારા વૈશ્વિક લિંક રંગ સેટ કરો
$link-color
અને ફક્ત પર જ લિંક અન્ડરલાઇન્સ લાગુ કરો:hover
. - ( મૂળભૂત રીતે) પર
$body-bg
સેટ કરવા માટે ઉપયોગ કરો.background-color
<body>
#fff
આ શૈલીઓ અંદર મળી શકે છે _reboot.scss
, અને વૈશ્વિક ચલો માં વ્યાખ્યાયિત થયેલ છે _variables.scss
. $font-size-base
માં સેટ કરવાની ખાતરી કરો rem
.
હેડિંગ
બધા HTML શીર્ષકો, <h1>
મારફતે <h6>
, ઉપલબ્ધ છે.
મથાળું | ઉદાહરણ |
---|---|
|
h1. બુટસ્ટ્રેપ હેડિંગ |
|
h2. બુટસ્ટ્રેપ હેડિંગ |
|
h3. બુટસ્ટ્રેપ હેડિંગ |
|
h4. બુટસ્ટ્રેપ હેડિંગ |
|
h5. બુટસ્ટ્રેપ હેડિંગ |
|
h6. બુટસ્ટ્રેપ હેડિંગ |
.h1
દ્વારા .h6
વર્ગો પણ ઉપલબ્ધ છે, જ્યારે તમે મથાળાની ફોન્ટ સ્ટાઇલ સાથે મેચ કરવા માંગો છો પરંતુ સંકળાયેલ HTML ઘટકનો ઉપયોગ કરી શકતા નથી.
h1. બુટસ્ટ્રેપ હેડિંગ
h2. બુટસ્ટ્રેપ હેડિંગ
h3. બુટસ્ટ્રેપ હેડિંગ
h4. બુટસ્ટ્રેપ હેડિંગ
h5. બુટસ્ટ્રેપ હેડિંગ
h6. બુટસ્ટ્રેપ હેડિંગ
હેડિંગ કસ્ટમાઇઝ કરી રહ્યા છીએ
બુટસ્ટ્રેપ 3 માંથી નાના ગૌણ હેડિંગ ટેક્સ્ટને ફરીથી બનાવવા માટે સમાવિષ્ટ ઉપયોગિતા વર્ગોનો ઉપયોગ કરો.
ફેન્સી ડિસ્પ્લે હેડિંગ ઝાંખા ગૌણ ટેક્સ્ટ સાથે
ડિસ્પ્લે હેડિંગ
પરંપરાગત મથાળાના ઘટકો તમારા પૃષ્ઠની સામગ્રીના માંસમાં શ્રેષ્ઠ રીતે કાર્ય કરવા માટે રચાયેલ છે. જ્યારે તમને અલગ થવા માટે મથાળાની જરૂર હોય, ત્યારે ડિસ્પ્લે હેડિંગનો ઉપયોગ કરવાનું વિચારો - એક મોટી, થોડી વધુ અભિપ્રાયવાળી હેડિંગ શૈલી. ધ્યાનમાં રાખો કે આ મથાળાઓ ડિફૉલ્ટ રૂપે પ્રતિભાવ આપતા નથી, પરંતુ પ્રતિભાવાત્મક ફોન્ટ માપોને સક્ષમ કરવાનું શક્ય છે .
ડિસ્પ્લે 1 |
ડિસ્પ્લે 2 |
ડિસ્પ્લે 3 |
ડિસ્પ્લે 4 |
લીડ
એક ફકરો ઉમેરીને અલગ બનાવો .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ડ્યુસ મોલીસ, તે બિન કોમોડો લેક્ટસ છે.
ઇનલાઇન ટેક્સ્ટ ઘટકો
સામાન્ય ઇનલાઇન HTML5 તત્વો માટે સ્ટાઇલ.
તમે માર્ક ટેગનો ઉપયોગ કરી શકો છોહાઇલાઇટટેક્સ્ટ
ટેક્સ્ટની આ લાઇનનો અર્થ કાઢી નાખેલ ટેક્સ્ટ તરીકે ગણવામાં આવે છે.
ટેક્સ્ટની આ પંક્તિનો અર્થ એ છે કે તે હવે સચોટ નથી.
ટેક્સ્ટની આ પંક્તિને દસ્તાવેજમાં વધારા તરીકે ગણવામાં આવે છે.
ટેક્સ્ટની આ લાઇન રેખાંકિત તરીકે રેન્ડર થશે
ટેક્સ્ટની આ લાઇનને ફાઇન પ્રિન્ટ તરીકે ગણવામાં આવે છે.
આ લાઇન બોલ્ડ ટેક્સ્ટ તરીકે રેન્ડર કરવામાં આવી છે.
આ લાઇન ઇટાલિક લખાણ તરીકે પ્રસ્તુત છે.
.mark
અને ટ��ગ્સ લાવશે તેવી કોઈપણ અનિચ્છનીય સિમેન્ટીક અસરોને ટાળતી વખતે અને .small
તે જ શૈલીઓ લાગુ કરવા માટે વર્ગો પણ ઉપલબ્ધ છે .<mark>
<small>
ઉપર બતાવેલ ન હોવા છતાં, નિઃસંકોચ ઉપયોગ કરો <b>
અને <i>
HTML5 માં. <b>
વધારાના મહત્વ આપ્યા વિના શબ્દો અથવા શબ્દસમૂહોને પ્રકાશિત કરવા માટે છે જ્યારે <i>
મોટે ભાગે અવાજ, તકનીકી શબ્દો વગેરે માટે છે.
ટેક્સ્ટ ઉપયોગિતાઓ
અમારી ટેક્સ્ટ ઉપયોગિતાઓ અને રંગ ઉપયોગિતાઓ સાથે ટેક્સ્ટ ગોઠવણી, રૂપાંતર, શૈલી, વજન અને રંગ બદલો .
સંક્ષેપ
<abbr>
હોવર પર વિસ્તૃત સંસ્કરણ બતાવવા માટે સંક્ષેપ અને ટૂંકાક્ષરો માટે HTML ના તત્વનું શૈલીયુક્ત અમલીકરણ . સંક્ષિપ્ત શબ્દોમાં ડિફૉલ્ટ રેખાંકિત હોય છે અને હોવર પર અને સહાયક તકનીકોના વપરાશકર્તાઓને વધારાના સંદર્ભ પ્રદાન કરવા માટે મદદ કર્સર મેળવે છે.
.initialism
થોડા નાના ફોન્ટ-સાઇઝ માટે સંક્ષેપમાં ઉમેરો .
attr
HTML
બ્લોકક્વોટ્સ
તમારા દસ્તાવેજમાં અન્ય સ્ત્રોતમાંથી સામગ્રીના બ્લોક્સ ટાંકવા માટે. ક્વોટ તરીકે <blockquote class="blockquote">
કોઈપણ HTML આસપાસ લપેટી .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante.
સ્ત્રોતનું નામકરણ
<footer class="blockquote-footer">
સ્ત્રોતને ઓળખવા માટે એક ઉમેરો . માં સ્ત્રોત કાર્યનું નામ લપેટી <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante.
ગોઠવણી
તમારા બ્લોકક્વોટનું સંરેખણ બદલવા માટે જરૂરિયાત મુજબ ટેક્સ્ટ યુટિલિટીનો ઉપયોગ કરો.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante.
યાદીઓ
અનસ્ટાઇલ
list-style
યાદી વસ્તુઓ પર ડિફોલ્ટ અને ડાબો હાંસિયો દૂર કરો (ફક્ત તાત્કાલિક બાળકો માટે). આ ફક્ત તાત્કાલિક બાળકોની સૂચિ વસ્તુઓ પર લાગુ થાય છે , એટલે કે તમારે કોઈપણ નેસ્ટેડ સૂચિઓ માટે પણ વર્ગ ઉમેરવાની જરૂર પડશે.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
- પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
- નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
- ફેસેલસ iaculis neque
- પુરસ સોડેલ્સ અલ્ટ્રિસીસ
- વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
- એસી tristique libero volutpat ખાતે
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
ઇનલાઇન
સૂચિની બુલેટ્સ દૂર કરો અને margin
બે વર્ગોના સંયોજન સાથે થોડો પ્રકાશ લાગુ કરો, .list-inline
અને .list-inline-item
.
- Lorem ipsum
- ફેસેલસ iaculis
- Nulla volutpat
વર્ણન સૂચિ સંરેખણ
અમારી ગ્રીડ સિસ્ટમના પૂર્વવ્યાખ્યાયિત વર્ગો (અથવા સિમેન્ટીક મિક્સન્સ) નો ઉપયોગ કરીને શરતો અને વર્ણનોને આડા સંરેખિત કરો. લાંબા સમય માટે, તમે .text-truncate
અંડાકાર સાથે ટેક્સ્ટને કાપવા માટે વૈકલ્પિક રીતે એક વર્ગ ઉમેરી શકો છો.
- વર્ણન યાદીઓ
- વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
- Euismod
-
વેસ્ટિબુલમ આઈડી લિગુલા પોર્ટા ફેલિસ યુઇસ્મોડ સેમ્પર એગેટ લેસીનિયા ઓડિયો સેમ એનઈસી એલિટ.
Donec id elit non mi porta gravida at eget metus.
- માલેસુડા પોર્ટા
- Etiam porta sem malesuada magna mollis euismod.
- કાપવામાં આવેલ શબ્દ કાપવામાં આવે છે
- ફ્યુસે ડેપીબસ, ટેલસ એસી કર્સસ કોમોડો, ટોર્ટર મૌરીસ કન્ડીમેન્ટમ નિભ, યુટ ફર્મેન્ટમ માસ્સા જસ્ટો સીટ એમેટ રીસસ.
- માળો
-
- નેસ્ટેડ વ્યાખ્યા યાદી
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
રિસ્પોન્સિવ ફોન્ટ માપો
રિસ્પોન્સિવ ફોન્ટ સાઈઝને સક્ષમ કરવાના વિકલ્પ સાથે બુટસ્ટ્રેપ v4.3 જહાજો, ટેક્સ્ટને સમગ્ર ઉપકરણ અને વ્યૂપોર્ટ કદમાં વધુ કુદરતી રીતે સ્કેલ કરવાની મંજૂરી આપે છે. RFS$enable-responsive-font-sizes
ને Sass વેરીએબલમાં બદલીને true
અને બુટસ્ટ્રેપને ફરીથી કમ્પાઈલ કરીને સક્ષમ કરી શકાય છે.
RFS ને સમર્થન આપવા માટે , અમે અમારા સામાન્ય font-size
ગુણધર્મોને બદલવા માટે Sass મિક્સિનનો ઉપયોગ કરીએ છીએ . રિસ્પોન્સિવ સ્કેલિંગ બિહેવિયરને સક્ષમ કરવા માટે રિસ્પોન્સિવ ફોન્ટ સાઈઝ અને વ્યૂપોર્ટ યુનિટના calc()
મિશ્રણ સાથે ફંક્શનમાં કમ્પાઈલ કરવામાં આવશે . RFSrem
અને તેના રૂપરેખાંકન વિશે વધુ તેના GitHub રીપોઝીટરી પર મળી શકે છે .