அடிப்படை CSS

சாரக்கட்டுக்கு மேல், அடிப்படை HTML கூறுகள் புதிய, சீரான தோற்றம் மற்றும் உணர்வை வழங்க, விரிவாக்கக்கூடிய வகுப்புகளுடன் வடிவமைக்கப்பட்டுள்ளன மற்றும் மேம்படுத்தப்பட்டுள்ளன.

தலைப்புகள் & உடல் நகல்

அச்சுக்கலை அளவுகோல்

முழு அச்சுக்கலை கட்டமும் எங்கள் மாறிகள்.less கோப்பில் இரண்டு குறைவான மாறிகளை அடிப்படையாகக் கொண்டது: @baseFontSizeமற்றும் @baseLineHeight. முதலாவது முழுவதும் பயன்படுத்தப்படும் அடிப்படை எழுத்துரு அளவு மற்றும் இரண்டாவது அடிப்படை வரி உயரம்.

எங்கள் அனைத்து வகைகளின் விளிம்புகள், திணிப்புகள் மற்றும் வரி உயரங்களை உருவாக்க, அந்த மாறிகள் மற்றும் சில கணிதத்தைப் பயன்படுத்துகிறோம்.

எடுத்துக்காட்டு உடல் உரை

Nullam quis risus eget urna mollis ornare vel eu leo. சமூக நேட்டோக் பெனாட்டிபஸ் மற்றும் மேக்னிஸ் டிஸ் பார்டூரியண்ட் மான்டெஸ், நாஸ்கெட்டூர் ரிடிகுலஸ் மஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

Vivamus sagittis lacus vel ague laoreet rutrum faucibus dolor aactor. டுயிஸ் மோலிஸ், கம்மோடோ லுக்டஸ் அல்ல, நிசி எரட் போர்டிட்டர் லிகுலா, எகெட் லாசினியா ஓடியோ செம் நெக் எலிட். Donec sed ஓடியோ dui.

h1. தலைப்பு 1

h2. தலைப்பு 2

h3. தலைப்பு 3

h4. தலைப்பு 4

h5. தலைப்பு 5
h6. தலைப்பு 6

முக்கியத்துவம், முகவரி மற்றும் சுருக்கம்

உறுப்பு பயன்பாடு விருப்பமானது
<strong> முக்கியமான உரையின் துணுக்கை வலியுறுத்துவதற்காக இல்லை
<em> அழுத்தத்துடன் உரையின் துணுக்கை வலியுறுத்துவதற்காக இல்லை
<abbr> விரிவாக்கப்பட்ட பதிப்பை மிதவையில் காட்ட சுருக்கங்கள் மற்றும் சுருக்கெழுத்துக்கள் titleவிரிவாக்கப்பட்ட உரைக்கான விருப்பத்தைச் சேர்க்கவும்
<address> அதன் நெருங்கிய மூதாதையர் அல்லது முழு வேலை அமைப்புக்கான தொடர்புத் தகவலுக்கு அனைத்து வரிகளையும் முடிப்பதன் மூலம் வடிவமைப்பைப் பாதுகாக்கவும்<br>

முக்கியத்துவத்தைப் பயன்படுத்துதல்

ஃபியூஸ் டேபிபஸ் , டெல்லஸ் ஏசி கர்சஸ் கம்மோடோ, டார்ட்டர் மாரிஸ் கான்டிமென்டம் நிப் , யுட் ஃபெர்மெண்டம் மாஸா ஜஸ்டோ சிட் அமெட் ரிசஸ். Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra ague.

குறிப்பு: HTML5 இல் பயன்படுத்த தயங்க <b>, <i>ஆனால் அவற்றின் பயன்பாடு சிறிது மாறிவிட்டது. குரல், தொழில்நுட்பச் சொற்கள் போன்றவற்றுக்குக் <b>கூடுதல் முக்கியத்துவம் கொடுக்காமல் வார்த்தைகள் அல்லது சொற்றொடர்களை முன்னிலைப்படுத்துவதாகும் .<i>

எடுத்துக்காட்டு முகவரிகள்

<address>குறிச்சொல் எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான இரண்டு எடுத்துக்காட்டுகள் இங்கே :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
முழு பெயர்
[email protected]

எடுத்துக்காட்டு சுருக்கங்கள்

சுருக்கங்கள் பெரிய எழுத்து மற்றும் ஒரு ஒளி புள்ளியிடப்பட்ட கீழ் விளிம்புடன் வடிவமைக்கப்பட்டுள்ளன. அவர்கள் மிதவையில் ஒரு உதவி கர்சரைக் கொண்டுள்ளனர், எனவே பயனர்கள் மிதவையில் ஏதாவது காட்டப்பட வேண்டும் என்பதற்கான கூடுதல் அறிகுறி உள்ளது.

வெட்டப்பட்ட ரொட்டியிலிருந்து HTML சிறந்த விஷயம்.

பண்பு என்ற சொல்லின் சுருக்கம் attr ஆகும் .

தடைகள்

உறுப்பு பயன்பாடு விருப்பமானது
<blockquote> மற்றொரு மூலத்திலிருந்து உள்ளடக்கத்தை மேற்கோள் காட்டுவதற்கான தொகுதி-நிலை உறுப்பு

citeமூல URLக்கான பண்புக்கூறைச் சேர்க்கவும்

மிதவை விருப்பங்களுக்கான பயன்பாடு .pull-leftமற்றும் .pull-rightவகுப்புகள்
<small> பயனர் எதிர்கொள்ளும் மேற்கோளைச் சேர்ப்பதற்கான விருப்ப உறுப்பு, பொதுவாக படைப்பின் தலைப்பைக் கொண்ட ஆசிரியர் <cite>மூலத்தின் தலைப்பு அல்லது பெயரைச் சுற்றி வைக்கவும்

<blockquote>ஒரு தொகுதி மேற்கோளைச் சேர்க்க, மேற்கோளாக ஏதேனும் HTML ஐச் சுற்றி வைக்கவும் . நேரடி மேற்கோள்களுக்கு நாங்கள் பரிந்துரைக்கிறோம் a <p>.

உங்கள் மூலத்தை மேற்கோள் காட்ட ஒரு விருப்ப உறுப்பைச் சேர்க்கவும் , ஸ்டைலிங் நோக்கங்களுக்காக அதற்கு முன் <small>ஒரு எம் கோடு கிடைக்கும் .&mdash;

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. முழு எண். </p>
  3. <small> பிரபலமான ஒருவர் </small>
  4. </blockquote>

எடுத்துக்காட்டு தொகுதி மேற்கோள்கள்

இயல்புநிலை பிளாக் மேற்கோள்கள் பின்வருமாறு வடிவமைக்கப்பட்டுள்ளன:

லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்.

உடல் உழைப்பில் பிரபலமான ஒருவர்

உங்கள் பிளாக்மேட்டை வலதுபுறமாக மிதக்க, சேர்க்கவும் class="pull-right":

லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்.

உடல் உழைப்பில் பிரபலமான ஒருவர்

பட்டியல்கள்

வரிசைப்படுத்தப்படவில்லை

<ul>

  • லோரெம் இப்சம் டோலர் சிட் அமெட்
  • Consectetur adipiscing elit
  • முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
  • ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
  • நுல்ல வோழுட்பட் அழிகம் வேலிட்
    • Phasellus iaculis neque
    • புருஸ் சோடேல்ஸ் அல்ட்ரிசிஸ்
    • வெஸ்டிபுலம் லாரீட் போர்டிட்டர் செம்
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • இப்போது நான் உட்கார்ந்து இருக்கிறேன்
  • Eget porttitor lorem

பாணியற்றது

<ul class="unstyled">

  • லோரெம் இப்சம் டோலர் சிட் அமெட்
  • Consectetur adipiscing elit
  • முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
  • ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
  • நுல்ல வோழுட்பட் அழிகம் வேலிட்
    • Phasellus iaculis neque
    • புருஸ் சோடேல்ஸ் அல்ட்ரிசிஸ்
    • வெஸ்டிபுலம் லாரீட் போர்டிட்டர் செம்
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • இப்போது நான் உட்கார்ந்து இருக்கிறேன்
  • Eget porttitor lorem

உத்தரவிட்டார்

<ol>

  1. லோரெம் இப்சம் டோலர் சிட் அமெட்
  2. Consectetur adipiscing elit
  3. முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
  4. ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
  5. நுல்ல வோழுட்பட் அழிகம் வேலிட்
  6. Faucibus porta lacus fringilla vel
  7. இப்போது நான் உட்கார்ந்து இருக்கிறேன்
  8. Eget porttitor lorem

விளக்கம்

<dl>

விளக்க பட்டியல்கள்
விதிமுறைகளை வரையறுக்க ஒரு விளக்கப் பட்டியல் சரியானது.
யூயிஸ்மோட்
வெஸ்டிபுலம் ஐடி லிகுலா போர்டா ஃபெலிஸ் யூஸ்மோட் செம்பர் எகெட் லாசினியா ஓடியோ செம் நெக் எலிட்.
டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ்.
மலேசுடா போர்டா
Etiam porta sem malesuada Magna mollis euismod.

கோட்டில்

உடன் குறியீட்டின் இன்லைன் துணுக்குகளை மடக்கு <code>.

  1. எடுத்துக்காட்டாக , <code> பகுதி < / code > இன்லைனாக மூடப்பட்டிருக்க வேண்டும் .

அடிப்படை தொகுதி

<pre>குறியீட்டின் பல வரிகளுக்குப் பயன்படுத்தவும் . சரியான ரெண்டரிங் செய்வதற்கு எந்த கேரட்களையும் அவற்றின் யூனிகோட் எழுத்துகளாக மாற்றுவதை உறுதி செய்யவும்.

<p>மாதிரி உரை இங்கே...</p>
  1. <முன்>
  2. <p>மாதிரி உரை இங்கே...</p>
  3. </pre>

குறிப்பு:<pre> குறிச்சொற்களுக்குள் குறியீட்டை முடிந்தவரை இடதுபுறமாக வைத்திருக்க மறக்காதீர்கள் ; இது அனைத்து தாவல்களையும் வழங்கும்.

Google Prettify

<pre>மேம்படுத்தப்பட்ட ரெண்டரிங்கிற்கு ஒரே உறுப்பை எடுத்து இரண்டு விருப்ப வகுப்புகளைச் சேர்க்கவும்.

  1. <p> மாதிரி உரை இங்கே... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>மாதிரி உரை இங்கே...</p>
  4. </pre>

google-code-prettify ஐப் பதிவிறக்கி , எப்படிப் பயன்படுத்துவது என்பதைப் பார்க்கவும்.

அட்டவணை மார்க்அப்

குறிச்சொல் விளக்கம்
<table> அட்டவணை வடிவத்தில் தரவைக் காண்பிக்கும் உறுப்பு
<thead> <tr>அட்டவணை நெடுவரிசைகளை லேபிளிட அட்டவணை தலைப்பு வரிசைகள் ( ) க்கான கொள்கலன் உறுப்பு
<tbody> <tr>அட்டவணையின் உடலில் உள்ள அட்டவணை வரிசைகள் ( ) க்கான கொள்கலன் உறுப்பு
<tr> ஒரு வரிசையில் தோன்றும் அட்டவணை கலங்களின் ( <td>அல்லது ) தொகுப்பிற்கான கொள்கலன் உறுப்பு<th>
<td> இயல்புநிலை அட்டவணை செல்
<th> நெடுவரிசைக்கான சிறப்பு அட்டவணை செல் (அல்லது வரிசை, நோக்கம் மற்றும் இடத்தைப் பொறுத்து) லேபிள்கள்
a க்குள் பயன்படுத்தப்பட வேண்டும்<thead>
<caption> அட்டவணையில் என்ன இருக்கிறது என்பதற்கான விளக்கம் அல்லது சுருக்கம், குறிப்பாக ஸ்க்ரீன் ரீடர்களுக்கு பயனுள்ளதாக இருக்கும்
  1. <அட்டவணை>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ அட்டவணை>

அட்டவணை விருப்பங்கள்

பெயர் வர்க்கம் விளக்கம்
இயல்புநிலை இல்லை நடைகள் இல்லை, நெடுவரிசைகள் மற்றும் வரிசைகள் மட்டுமே
அடிப்படை .table வரிசைகளுக்கு இடையில் கிடைமட்ட கோடுகள் மட்டுமே
எல்லைக்கோடு .table-bordered மூலைகளைச் சுற்றி, வெளிப்புற எல்லையைச் சேர்க்கிறது
வரிக்குதிரை-கோடு .table-striped ஒற்றைப்படை வரிசைகளில் (1, 3, 5, முதலியன) வெளிர் சாம்பல் பின்னணி வண்ணத்தைச் சேர்க்கிறது
ஒடுங்கியது .table-condensed tdஅனைத்து மற்றும் thஉறுப்புகளுக்குள்ளும் , 8px முதல் 4px வரை, செங்குத்து திணிப்பை பாதியாக வெட்டுகிறது

எடுத்துக்காட்டு அட்டவணைகள்

1. இயல்புநிலை அட்டவணை பாணிகள்

வாசிப்புத்திறனை உறுதி செய்வதற்கும் கட்டமைப்பைப் பராமரிப்பதற்கும் சில பார்டர்களுடன் அட்டவணைகள் தானாகவே வடிவமைக்கப்படுகின்றன. 2.0 உடன், .tableவகுப்பு தேவை.

  1. <table class = "table" >
  2. </ அட்டவணை>
# முதல் பெயர் கடைசி பெயர் மொழி
1 குறி ஓட்டோ CSS
2 ஜேக்கப் தோர்ன்டன் ஜாவாஸ்கிரிப்ட்
3 ஸ்து டென்ட் HTML

2. கோடிட்ட அட்டவணை

ஜீப்ரா-ஸ்ட்ரிப்பிங்கைச் சேர்ப்பதன் மூலம் உங்கள் அட்டவணைகளைக் கொஞ்சம் ஆடம்பரமாகப் பெறுங்கள் - .table-stripedவகுப்பைச் சேர்க்கவும்.

குறிப்பு: ஸ்ப்ரிட்டட் டேபிள்கள் :nth-childCSS தேர்வியைப் பயன்படுத்துகின்றன மற்றும் IE7-IE8 இல் கிடைக்காது.

  1. <table class = "table-striped" >
  2. </ அட்டவணை>
# முதல் பெயர் கடைசி பெயர் மொழி
1 குறி ஓட்டோ CSS
2 ஜேக்கப் தோர்ன்டன் ஜாவாஸ்கிரிப்ட்
3 ஸ்து டென்ட் HTML

3. பார்டர்ட் டேபிள்

அழகியல் நோக்கங்களுக்காக முழு அட்டவணை மற்றும் வட்டமான மூலைகளைச் சுற்றி எல்லைகளைச் சேர்க்கவும்.

  1. <table class = "table table-bordered" >
  2. </ அட்டவணை>
# முதல் பெயர் கடைசி பெயர் மொழி
1 மார்க் ஓட்டோ CSS
2 ஜேக்கப் தோர்ன்டன் ஜாவாஸ்கிரிப்ட்
3 ஸ்து டென்ட்
3 Brosef ஸ்டாலின் HTML

4. அமுக்கப்பட்ட அட்டவணை

.table-condensedடேபிள் செல் பேடிங்கை பாதியாக (8px இலிருந்து 4px வரை) குறைக்க வகுப்பைச் சேர்ப்பதன் மூலம் உங்கள் அட்டவணைகளை மிகவும் கச்சிதமாக மாற்றவும்.

  1. <table class = "table table-condensed" >
  2. </ அட்டவணை>
# முதல் பெயர் கடைசி பெயர் மொழி
1 குறி ஓட்டோ CSS
2 ஜேக்கப் தோர்ன்டன் ஜாவாஸ்கிரிப்ட்
3 ஸ்து டென்ட் HTML

5. அனைத்தையும் இணைக்கவும்!

கிடைக்கக்கூடிய வகுப்புகளில் ஏதேனும் ஒன்றைப் பயன்படுத்தி வித்தியாசமான தோற்றத்தை அடைய அட்டவணை வகுப்புகளில் ஏதேனும் ஒன்றை இணைக்க தயங்காதீர்கள்.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </ அட்டவணை>
# முதல் பெயர் கடைசி பெயர் மொழி
1 குறி ஓட்டோ CSS
2 ஜேக்கப் தோர்ன்டன் ஜாவாஸ்கிரிப்ட்
3 ஸ்து டென்ட் HTML
4 Brosef ஸ்டாலின் HTML

நெகிழ்வான HTML மற்றும் CSS

பூட்ஸ்டார்ப்பில் உள்ள படிவங்களைப் பற்றிய சிறந்த அம்சம் என்னவென்றால், உங்களின் அனைத்து உள்ளீடுகளும் கட்டுப்பாடுகளும் உங்கள் மார்க்அப்பில் அவற்றை எவ்வாறு உருவாக்கினாலும் நன்றாக இருக்கும். மிதமிஞ்சிய HTML தேவையில்லை, ஆனால் தேவைப்படுபவர்களுக்கு நாங்கள் வடிவங்களை வழங்குகிறோம்.

மிகவும் சிக்கலான தளவமைப்புகள் சுருக்கமான மற்றும் அளவிடக்கூடிய வகுப்புகளுடன் எளிதாக ஸ்டைலிங் மற்றும் நிகழ்வு பிணைப்புக்கு வருகின்றன, எனவே நீங்கள் ஒவ்வொரு அடியிலும் பாதுகாக்கப்படுவீர்கள்.

நான்கு தளவமைப்புகள் சேர்க்கப்பட்டுள்ளது

பூட்ஸ்ட்ராப் நான்கு வகையான படிவ அமைப்புகளுக்கான ஆதரவுடன் வருகிறது:

  • செங்குத்து (இயல்புநிலை)
  • தேடு
  • கோட்டில்
  • கிடைமட்ட

வெவ்வேறு வகையான படிவ தளவமைப்புகளுக்கு மார்க்அப்பில் சில மாற்றங்கள் தேவைப்படுகின்றன, ஆனால் கட்டுப்பாடுகள் தாங்களாகவே இருக்கும் மற்றும் ஒரே மாதிரியாக செயல்படும்.

கட்டுப்பாட்டு நிலைகள் மற்றும் பல

பூட்ஸ்டார்ப்பின் படிவங்களில் உள்ளீடு, உரைப்பகுதி மற்றும் நீங்கள் எதிர்பார்க்கும் தேர்வு போன்ற அனைத்து அடிப்படை படிவக் கட்டுப்பாடுகளுக்கான பாணிகளும் அடங்கும். ஆனால் இது இணைக்கப்பட்ட மற்றும் முன்கூட்டியே உள்ளீடுகள் மற்றும் தேர்வுப்பெட்டிகளின் பட்டியல்களுக்கான ஆதரவு போன்ற பல தனிப்பயன் கூறுகளுடன் வருகிறது.

பிழை, எச்சரிக்கை மற்றும் வெற்றி போன்ற நிலைகள் ஒவ்வொரு வகையான படிவக் கட்டுப்பாட்டிலும் சேர்க்கப்பட்டுள்ளன. முடக்கப்பட்ட கட்டுப்பாடுகளுக்கான பாணிகளும் சேர்க்கப்பட்டுள்ளன.

நான்கு வகையான வடிவங்கள்

பூட்ஸ்டார்ப் நான்கு பொதுவான வலை வடிவங்களுக்கான எளிய மார்க்அப் மற்றும் ஸ்டைல்களை வழங்குகிறது.

பெயர் வர்க்கம் விளக்கம்
செங்குத்து (இயல்புநிலை) .form-vertical (தேவையில்லை) கட்டுப்பாடுகள் மீது அடுக்கப்பட்ட, இடப்புறம் சீரமைக்கப்பட்ட லேபிள்கள்
கோட்டில் .form-inline இடது-சீரமைக்கப்பட்ட லேபிள் மற்றும் சிறிய பாணிக்கான இன்லைன்-பிளாக் கட்டுப்பாடுகள்
தேடு .form-search வழக்கமான தேடல் அழகியலுக்கான கூடுதல் வட்டமான உரை உள்ளீடு
கிடைமட்ட .form-horizontal இடதுபுறம், வலதுபுறம் சீரமைக்கப்பட்ட லேபிள்களை கட்டுப்பாடுகள் உள்ள அதே வரியில் மிதக்கவும்

படிவக் கட்டுப்பாடுகளைப் பயன்படுத்தும் எடுத்துக்காட்டு படிவங்கள் , கூடுதல் மார்க்அப் இல்லை

அடிப்படை வடிவம்

v2.0 உடன், ஃபார்ம் ஸ்டைல்களுக்கான இலகுவான மற்றும் சிறந்த இயல்புநிலைகள் எங்களிடம் உள்ளன. கூடுதல் மார்க்அப் இல்லை, படிவக் கட்டுப்பாடுகள் மட்டுமே.

தொடர்புடைய உதவி உரை!

தேடல் படிவம்

இயல்புநிலை WebKit பாணிகளைப் பிரதிபலிக்கிறது .form-search, கூடுதல் வட்டமான தேடல் புலங்களைச் சேர்க்கவும்.

இன்லைன் படிவம்

உள்ளீடுகள் தொடங்குவதற்கான தொகுதி நிலை. மற்றும் .form-inline, .form-horizontalநாங்கள் இன்லைன்-பிளாக்கைப் பயன்படுத்துகிறோம்.


கிடைமட்ட வடிவங்கள்

பூட்ஸ்டார்ப் ஆதரவுகளை கட்டுப்படுத்துகிறது

ஃப்ரீஃபார்ம் உரைக்கு கூடுதலாக, எந்த HTML5 உரை அடிப்படையிலான உள்ளீடும் அப்படித் தோன்றும்.

என்ன சேர்க்கப்பட்டுள்ளது

நாங்கள் ஆதரிக்கும் அனைத்து இயல்புநிலை படிவக் கட்டுப்பாடுகளும் இடதுபுறத்தில் காட்டப்பட்டுள்ளன. புல்லட் செய்யப்பட்ட பட்டியல் இதோ:

  • உரை உள்ளீடுகள் (உரை, கடவுச்சொல், மின்னஞ்சல் போன்றவை)
  • தேர்வுப்பெட்டி
  • வானொலி
  • தேர்ந்தெடுக்கவும்
  • பல தேர்வு
  • கோப்பு உள்ளீடு
  • உரைப்பகுதி

v2.0 உடன் புதிய இயல்புநிலைகள்

v1.4 வரை, பூட்ஸ்டார்ப்பின் இயல்புநிலை வடிவ நடைகள் கிடைமட்ட அமைப்பைப் பயன்படுத்துகின்றன. பூட்ஸ்டார்ப் 2 மூலம், எந்தவொரு வடிவத்திற்கும் ஸ்மார்ட்டான, அதிக அளவிடக்கூடிய இயல்புநிலைகளைக் கொண்டிருப்பதற்கான தடையை அகற்றினோம்.


படிவக் கட்டுப்பாட்டு நிலைகள்
இங்கே சில மதிப்பு
ஏதோ தவறு நடந்திருக்கலாம்
பிழையை திருத்தவும்
வூஹூ!
வூஹூ!

மறுவடிவமைப்பு செய்யப்பட்ட உலாவி கூறுகிறது

பூட்ஸ்டார்ப் உலாவி-ஆதரவு கவனம் மற்றும் disabledநிலைகளுக்கான பாணிகளைக் கொண்டுள்ளது. இயல்புநிலை Webkit ஐ அகற்றிவிட்டு outlineஅதன் box-shadowஇடத்தில் :focus.


படிவம் சரிபார்ப்பு

பிழைகள், எச்சரிக்கைகள் மற்றும் வெற்றிக்கான சரிபார்ப்பு பாணிகளும் இதில் அடங்கும். பயன்படுத்த, சுற்றிலும் பிழை வகுப்பைச் சேர்க்கவும் .control-group.

  1. <புலத்தொகுதி
  2. வர்க்கம் = "கட்டுப்பாட்டு-குழு பிழை" >
  3. </fieldset>

படிவக் கட்டுப்பாடுகளை நீட்டித்தல்

.span*உள்ளீட்டு அளவுகளுக்கு கிரிட் அமைப்பிலிருந்து அதே வகுப்புகளைப் பயன்படுத்தவும் .

@

இதோ சில உதவி உரை

.00

மேலும் உதவி உரை இதோ

குறிப்பு: மிகப் பெரிய கிளிக் பகுதிகள் மற்றும் பயன்படுத்தக்கூடிய படிவத்திற்கான அனைத்து விருப்பங்களையும் லேபிள்கள் சுற்றி வருகின்றன.

உள்ளீடுகளை முன்வைத்து இணைக்கவும்

உள்ளீட்டு குழுக்கள்-இணைக்கப்பட்ட அல்லது முன்வைக்கப்பட்ட உரையுடன்-உங்கள் உள்ளீடுகளுக்கு கூடுதல் சூழலை வழங்க எளிதான வழியை வழங்குகிறது. சிறந்த எடுத்துக்காட்டுகளில் ட்விட்டர் பயனர்பெயர்களுக்கான @ குறி அல்லது நிதிக்கான $ ஆகியவை அடங்கும்.


தேர்வுப்பெட்டிகள் மற்றும் ரேடியோக்கள்

v1.4 வரை, செக்பாக்ஸ்கள் மற்றும் ரேடியோக்களை அடுக்கி வைக்க பூட்ஸ்டார்ப்பிற்கு கூடுதல் மார்க்அப் தேவை. இப்போது, ​​அதை மீண்டும் மீண்டும் செய்வது ஒரு எளிய <label class="checkbox">விஷயம் <input type="checkbox">.

இன்லைன் தேர்வுப்பெட்டிகள் மற்றும் ரேடியோக்களும் ஆதரிக்கப்படுகின்றன. .inlineஏதேனும் ஒன்றைச் சேர்க்கவும் .checkboxஅல்லது .radioநீங்கள் முடித்துவிட்டீர்கள்.


இன்லைன் படிவங்கள் மற்றும் இணைத்தல்/முன்சேர்த்தல்

இன்லைன் படிவத்தில் உள்ளீடுகளை முன்கூட்டியே அல்லது இணைக்க, இடைவெளிகள் இல்லாமல் ஒரே வரியில் வைக்க .add-onவேண்டும் input.


படிவம் உதவி உரை

உங்கள் படிவ உள்ளீடுகளுக்கு உதவி உரையைச் சேர்க்க, இன்லைன் உதவி உரை அல்லது உள்ளீட்டு உறுப்புக்குப் பிறகு <span class="help-inline">உதவி உரைத் தொகுதியைச் சேர்க்கவும்.<p class="help-block">

பொத்தானை வர்க்கம் விளக்கம்
இயல்புநிலை .btn சாய்வு கொண்ட நிலையான சாம்பல் பொத்தான்
முதன்மை .btn-primary கூடுதல் காட்சி எடையை வழங்குகிறது மற்றும் பொத்தான்களின் தொகுப்பில் முதன்மை செயலை அடையாளம் காட்டுகிறது
தகவல் .btn-info இயல்புநிலை பாணிகளுக்கு மாற்றாகப் பயன்படுத்தப்படுகிறது
வெற்றி .btn-success வெற்றிகரமான அல்லது நேர்மறையான செயலைக் குறிக்கிறது
எச்சரிக்கை .btn-warning இந்த நடவடிக்கை எச்சரிக்கையுடன் எடுக்கப்பட வேண்டும் என்பதைக் குறிக்கிறது
ஆபத்து .btn-danger ஆபத்தான அல்லது எதிர்மறையான செயலைக் குறிக்கிறது

செயல்களுக்கான பொத்தான்கள்

ஒரு மாநாடாக, பொத்தான்கள் செயல்களுக்கு மட்டுமே பயன்படுத்தப்பட வேண்டும், அதே நேரத்தில் ஹைப்பர்லிங்க் ஆப்ஜெக்ட்டுகளுக்குப் பயன்படுத்தப்பட வேண்டும். உதாரணமாக, "பதிவிறக்கம்" என்பது ஒரு பொத்தானாக இருக்க வேண்டும், அதே நேரத்தில் "சமீபத்திய செயல்பாடு" ஒரு இணைப்பாக இருக்க வேண்டும்.

அறிவிப்பாளர்கள் மற்றும் படிவங்களுக்கு

பொத்தான் பாணிகள் பயன்படுத்தப்பட்டதைக் கொண்டு எதற்கும் .btnபயன்படுத்தப்படலாம். இருப்பினும், பொதுவாக நீங்கள் இவற்றை மட்டும் <a>மற்றும் <button>உறுப்புகளுக்குப் பயன்படுத்த விரும்புவீர்கள்.

குறிப்பு: அனைத்து பொத்தான்களும் வகுப்பைக் கொண்டிருக்க வேண்டும் .btn. பொத்தான் பாணிகள் <button>மற்றும் <a>நிலைத்தன்மைக்கான உறுப்புகள் பயன்படுத்தப்பட வேண்டும்.

பல அளவுகள்

பெரிய அல்லது சிறிய பொத்தான்களை விரும்புகிறீர்களா? அதில் இருங்கள்!

முதன்மை நடவடிக்கை செயல்

முதன்மை நடவடிக்கை செயல்

ஊனமுற்ற நிலை

முடக்கப்பட்ட பொத்தான்களுக்கு, .btn-disabledஇணைப்புகளுக்கும் உறுப்புகளுக்கும் :disabledபயன்படுத்தவும் .<button>

முதன்மை நடவடிக்கை செயல்

குறுக்கு உலாவி இணக்கத்தன்மை

IE9 இல், IE9 ஆனது மூலைகளுக்கு பின்னணி சாய்வுகளை செதுக்காததால், வட்டமான மூலைகளுக்கு ஆதரவாக அனைத்து பொத்தான்களிலும் சாய்வை விடுகிறோம்.

தொடர்புடையது, IE9 செயலிழந்த buttonகூறுகளை மேம்படுத்துகிறது, மோசமான உரை-நிழலுடன் உரை சாம்பல் நிறத்தை வழங்குகிறது-துரதிர்ஷ்டவசமாக இதை எங்களால் சரிசெய்ய முடியவில்லை.


எச்சரிக்கை! ஐகான் வகுப்புகள் CSS வழியாக எதிரொலிக்கப்படுகின்றன :after. டாக்ஸில், ஐகானின் அளவை உயர்த்திக் காட்ட, மிதவையில் வெளிர் சிவப்பு நிற பின்னணியைக் காட்டுவோம்.

ஸ்பிரிட்டாக கட்டப்பட்டது

ஒவ்வொரு ஐகானையும் கூடுதல் கோரிக்கையாக மாற்றுவதற்குப் பதிலாக, அவற்றை ஒரு ஸ்பிரைட்டாகத் தொகுத்துள்ளோம்—ஒரு கோப்பில் உள்ள படங்களின் கொத்து, அது படங்களை நிலைநிறுத்த CSS ஐப் பயன்படுத்துகிறது background-position. ட்விட்டர்.காமில் நாங்கள் பயன்படுத்தும் அதே முறை இது எங்களுக்கு நன்றாக வேலை செய்தது.

அனைத்து ஐகான் வகுப்புகளும் .icon-சரியான பெயர் இடைவெளி மற்றும் ஸ்கோப்பிங் ஆகியவற்றிற்காக முன்னொட்டப்பட்டவை, எங்கள் மற்ற கூறுகளைப் போலவே. இது மற்ற கருவிகளுடன் மோதல்களைத் தவிர்க்க உதவும்.

நாங்கள் இங்கே டாக்ஸில் ஒரு இணைப்பையும் கிரெடிட்டையும் வழங்கும் வரை, எங்கள் ஓப்பன் சோர்ஸ் டூல்கிட்டில் உள்ள Halflings தொகுப்பைப் பயன்படுத்த Glyphicons எங்களுக்கு அனுமதி அளித்துள்ளது. உங்கள் திட்டங்களிலும் அதையே செய்வதைக் கருத்தில் கொள்ளவும்.

எப்படி உபயோகிப்பது

v2.0.0 உடன், எங்கள் எல்லா ஐகான்களுக்கும் ஒரு குறிச்சொல்லைப் பயன்படுத்தத் தேர்வுசெய்துள்ளோம் <i>, ஆனால் அவற்றில் கேஸ் கிளாஸ் இல்லை—பகிரப்பட்ட முன்னொட்டு மட்டுமே. பயன்படுத்த, பின்வரும் குறியீட்டை எங்கும் வைக்கவும்:

  1. <i class = "icon-search" ></i>

தலைகீழ் (வெள்ளை) ஐகான்களுக்கான ஸ்டைல்களும் உள்ளன, அவை ஒரு கூடுதல் வகுப்பில் தயாராக உள்ளன:

  1. <i class = "icon-search icon-white" ></i>

உங்கள் ஐகான்களுக்குத் தேர்வுசெய்ய 120 வகுப்புகள் உள்ளன. <i>சரியான வகுப்புகளுடன் ஒரு குறிச்சொல்லைச் சேர்த்தால் போதும். முழு பட்டியலையும் sprites.less இல் காணலாம் அல்லது இந்த ஆவணத்தில் இங்கே காணலாம்.

பயன்பாடு வழக்குகள்

ஐகான்கள் நன்றாக உள்ளன, ஆனால் அவற்றை எங்கே பயன்படுத்துவது? இங்கே சில யோசனைகள் உள்ளன:

  • உங்கள் பக்கப்பட்டி வழிசெலுத்தலுக்கான காட்சிகளாக
  • முற்றிலும் ஐகானால் இயக்கப்படும் வழிசெலுத்தலுக்கு
  • செயலின் அர்த்தத்தை தெரிவிக்க உதவும் பொத்தான்களுக்கு
  • பயனரின் இலக்கில் சூழலைப் பகிர்வதற்கான இணைப்புகளுடன்

அடிப்படையில், நீங்கள் ஒரு <i>குறிச்சொல்லை எங்கு வேண்டுமானாலும் வைக்கலாம், நீங்கள் ஒரு ஐகானை வைக்கலாம்.

எடுத்துக்காட்டுகள்

பொத்தான்கள், பொத்தான் குழுக்களில் கருவிப்பட்டி, வழிசெலுத்தல் அல்லது முன் தயாரிக்கப்பட்ட படிவ உள்ளீடுகளில் அவற்றைப் பயன்படுத்தவும்.