ટાઇપોગ્રાફી
બુટસ્ટ્રેપ ટાઇપોગ્રાફી માટે દસ્તાવેજીકરણ અને ઉદાહરણો, જેમાં વૈશ્વિક સેટિંગ્સ, હેડિંગ, મુખ્ય ટેક્સ્ટ, સૂચિઓ અને વધુનો સમાવેશ થાય છે.
બુટસ્ટ્રેપ મૂળભૂત વૈશ્વિક પ્રદર્શન, ટાઇપોગ્રાફી અને લિંક શૈલીઓ સેટ કરે છે. જ્યારે વધુ નિયંત્રણની જરૂર હોય, ત્યારે ટેક્સ્ટ ઉપયોગિતા વર્ગો તપાસો .
- મૂળ ફોન્ટ સ્ટેકનો ઉપયોગ કરો જે
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. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.
<footer class="blockquote-footer">
સ્ત્રોતને ઓળખવા માટે એક ઉમેરો . માં સ્ત્રોત કાર્યનું નામ લપેટી <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.
તમારા બ્લોકક્વોટના સંરેખણને બદલવા માટે જરૂરિયાત મુજબ ટેક્સ્ટ ઉપયોગિતાઓનો ઉપયોગ કરો.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.
list-style
યાદી વસ્તુઓ પર ડિફોલ્ટ અને ડાબો હાંસિયો દૂર કરો (ફક્ત તાત્કાલિક બાળકો માટે). આ ફક્ત તાત્કાલિક બાળકોની સૂચિ વસ્તુઓ પર લાગુ થાય છે , એટલે કે તમારે કોઈપણ નેસ્ટેડ સૂચિઓ માટે પણ વર્ગ ઉમેરવાની જરૂર પડશે.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
- પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
- નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
- ફેસેલસ iaculis neque
- પુરસ સોડેલ્સ અલ્ટ્રિસીસ
- વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
- એસી tristique libero volutpat ખાતે
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nc
- 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.
રિસ્પોન્સિવ ટાઇપોગ્રાફીfont-size
મીડિયા ક્વેરીઝની શ્રેણીમાં રુટ એલિમેન્ટને સમાયોજિત કરીને ટેક્સ્ટ અને ઘટકોને સ્કેલિંગ કરવાનો સંદર્ભ આપે છે . બુટસ્ટ્રેપ તમારા માટે આ કરતું નથી, પરંતુ જો તમને તેની જરૂર હોય તો તેને ઉમેરવાનું એકદમ સરળ છે.
અહીં વ્યવહારમાં તેનું ઉદાહરણ છે. તમને ગમે તે font-size
s અને મીડિયા પ્રશ્નો પસંદ કરો.