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

முழு அச்சுக்கலை கட்டமும் எங்கள் மாறிகள்.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.

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

ஃபியூஸ் டேபிபஸ் , டெல்லஸ் ஏசி கர்சஸ் கொமோடோ, டார்ட்டர் மவுரிஸ் கான்டிமென்டம் நிப் , யூட் ஃபெர்மெண்டம் மாஸா ஜஸ்டோ சிட் அமெட் ரிசஸ். 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]

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

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

initialismசற்று சிறிய உரை அளவைக் கொடுத்து அச்சுக்கலை ஒத்திசைவை அதிகரிக்க வகுப்பைச் சுருக்கமாகச் சேர்க்கவும் .

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

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

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

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. முழு எண். </p>
  <small> பிரபலமான ஒருவர் </small>
</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.

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

<dl class="dl-horizontal">

விளக்க பட்டியல்கள்

விதிமுறைகளை வரையறுக்க ஒரு விளக்கப் பட்டியல் சரியானது.

யூயிஸ்மோட்

வெஸ்டிபுலம் ஐடி லிகுலா போர்டா ஃபெலிஸ் யூஸ்மோட் செம்பர் எகெட் லாசினியா ஓடியோ செம் நெக் எலிட்.

டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ்.

மலேசுடா போர்டா

Etiam porta sem malesuada Magna mollis euismod.

கோட்டில்

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

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

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

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

<p>மாதிரி உரை இங்கே...</p>

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

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

.pre-scrollableஅதிகபட்சமாக 350px உயரத்தை அமைக்கும் மற்றும் y-அச்சு உருள்ப்பட்டியை வழங்கும் வகுப்பை நீங்கள் விருப்பப்படி சேர்க்கலாம் .

Google Prettify

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

<p> மாதிரி உரை இங்கே... </p>

<pre class = "pretyprint 
     linenums" >
  <p>மாதிரி உரை இங்கே...</p>
</pre>

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

குறிச்சொல்	விளக்கம்
<table>	அட்டவணை வடிவத்தில் தரவைக் காண்பிக்கும் உறுப்பு
<thead>	<tr>அட்டவணை நெடுவரிசைகளை லேபிளிட அட்டவணை தலைப்பு வரிசைகள் ( ) க்கான கொள்கலன் உறுப்பு
<tbody>	<tr>அட்டவணையின் உடலில் உள்ள அட்டவணை வரிசைகள் ( ) க்கான கொள்கலன் உறுப்பு
<tr>	ஒரு வரிசையில் தோன்றும் அட்டவணை கலங்களின் ( <td>அல்லது ) தொகுப்பிற்கான கொள்கலன் உறுப்பு<th>
<td>	இயல்புநிலை அட்டவணை செல்
<th>	நெடுவரிசைக்கான சிறப்பு அட்டவணை செல் (அல்லது வரிசை, நோக்கம் மற்றும் இடத்தைப் பொறுத்து) லேபிள்கள் a க்குள் பயன்படுத்தப்பட வேண்டும்<thead>
<caption>	அட்டவணையில் என்ன இருக்கிறது என்பதற்கான விளக்கம் அல்லது சுருக்கம், குறிப்பாக ஸ்க்ரீன் ரீடர்களுக்கு பயனுள்ளதாக இருக்கும்

<அட்டவணை>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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

<table class = "table" > 
  …
</table>

#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
2	ஜேக்கப்	தோர்ன்டன்	@கொழுப்பு
3	லாரி	பறவை	@twitter

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

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

<table class = "table-striped" > 
  …
</table>

#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
2	ஜேக்கப்	தோர்ன்டன்	@கொழுப்பு
3	லாரி	பறவை	@twitter

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

<table class = "table table-bordered" > 
  …
</table>

#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
	குறி	ஓட்டோ	@getbootstrap
2	ஜேக்கப்	தோர்ன்டன்	@கொழுப்பு
3	லாரி பறவை		@twitter

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

<table class = "table-condensed" > 
  …
</table>

#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
2	ஜேக்கப்	தோர்ன்டன்	@கொழுப்பு
3	லாரி பறவை		@twitter

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

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

	முழு பெயர்
#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
2	ஜேக்கப்	தோர்ன்டன்	@கொழுப்பு
3	லாரி பறவை		@twitter

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

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

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

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

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

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

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

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

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

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

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

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

லேபிள் பெயர் தொடர்புடைய உதவி உரை!

எடுத்துக்காட்டு தொகுதி-நிலை உதவி உரை இங்கே.

என்னைப் பாருங்கள் சமர்ப்பிக்கவும்

<form class = "well" > 
  <label> லேபிள் பெயர் </label>
  <உள்ளீடு வகை = "உரை" வகுப்பு = "span3" ஒதுக்கிட = "ஏதாவது தட்டச்சு செய்யவும்..." >   
  <span class = "help-inline" > தொடர்புடைய உதவி உரை! </span> 
  <லேபிள் வகுப்பு = "செக்பாக்ஸ்" > 
    <input type = "checkbox" > என்னைப் பார்க்கவும் 
  </label>
  <button type = "submit" class = "btn" > Submit </button>  
</form>

தேடல் படிவம்

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

தேடு

<form class = "well form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Search </button>  
</form>

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

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

என்னை நினைவில் வையுங்கள் உள்நுழையவும்

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <லேபிள் வகுப்பு = "செக்பாக்ஸ்" > 
    <உள்ளீடு வகை = "செக்பாக்ஸ்" > என்னை நினைவில் கொள்க 
  </label>
  <button type = "submit" class = "btn" > உள்நுழைக </button>  
</form>

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

உரை உள்ளீடு

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

தேர்வுப்பெட்டி

விருப்பம் ஒன்று இது மற்றும் அது - இது ஏன் சிறந்தது என்பதைச் சேர்க்க மறக்காதீர்கள்

பட்டியலைத் தேர்ந்தெடுக்கவும்

ஏதோ ஒன்று 2 3 4 5

மல்டிகான்-தேர்வு

1 2 3 4 5

கோப்பு உள்ளீடு

டெக்ஸ்டாரியா

மாற்றங்களை சேமியுங்கள் ரத்து செய்

எடுத்துக்காட்டு மார்க்அப்

மேலே உள்ள எடுத்துக்காட்டு படிவ தளவமைப்பின் அடிப்படையில், முதல் உள்ளீடு மற்றும் கட்டுப்பாட்டு குழுவுடன் தொடர்புடைய மார்க்அப் இங்கே உள்ளது. தி .control-group, .control-label, மற்றும் .controlsவகுப்புகள் அனைத்தும் ஸ்டைலிங்கிற்கு தேவை.

<form class = "form-horizontal" > 
  <fieldset>
    <legend> Legend text </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > உரை உள்ளீடு </label>  
      <div class = "கட்டுப்பாடுகள்" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > உதவி உரை </p> 
      </div>
    </div>
  </fieldset>
</form>

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

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

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

---

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

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

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

மையப்படுத்தப்பட்ட உள்ளீடு

திருத்த முடியாத உள்ளீடு

இங்கே சில மதிப்பு

முடக்கப்பட்ட உள்ளீடு

முடக்கப்பட்ட தேர்வுப்பெட்டி

இது முடக்கப்பட்ட தேர்வுப்பெட்டி

எச்சரிக்கையுடன் உள்ளீடு

ஏதோ தவறு நடந்திருக்கலாம்

பிழையுடன் உள்ளீடு

பிழையை திருத்தவும்

வெற்றியுடன் உள்ளீடு

வூஹூ!

வெற்றியுடன் தேர்ந்தெடுக்கவும்

1 2 3 4 5 வூஹூ!

மாற்றங்களை சேமியுங்கள் ரத்து செய்

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

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

---

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

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

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

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

படிவ கட்ட அளவுகள்

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

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

மாற்று அளவுகள்

கட்டத்திற்கு மேப் செய்யாத நிலையான வகுப்புகளை நீங்கள் பயன்படுத்தலாம், பதிலளிக்கக்கூடிய CSS ஸ்டைல்களுக்கு மாற்றியமைக்கலாம் அல்லது பல்வேறு வகையான கட்டுப்பாடுகளுக்கான கணக்கு (எ.கா., inputஎதிராக select).

தயாரிக்கப்பட்ட உரை

@

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

இணைக்கப்பட்ட உரை

.00

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

இணைக்கவும் மற்றும் முன்வைக்கவும்

$ .00

பட்டனுடன் இணைக்கவும்

போ!

இன்லைன் தேர்வுப்பெட்டிகள்

1 2 3

தேர்வுப்பெட்டிகள்

விருப்பம் ஒன்று இது மற்றும் அது - இது ஏன் சிறந்தது என்பதைச் சேர்க்க மறக்காதீர்கள் விருப்பம் இரண்டையும் சரிபார்த்து, படிவ முடிவுகளில் சேர்க்கலாம் விருப்பத்தேர்வு மூன்று-ஆம், நீங்கள் யூகித்துள்ளீர்கள்-மேலும் சரிபார்க்கப்பட்டு படிவ முடிவுகளில் சேர்க்கப்படும்

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

ரேடியோ பொத்தான்கள்

விருப்பம் ஒன்று இது மற்றும் அது - இது ஏன் சிறந்தது என்பதைச் சேர்க்க மறக்காதீர்கள் ஆப்ஷன் டூ கேன் என்பது வேறு ஒன்று மற்றும் அதைத் தேர்ந்தெடுப்பது, விருப்பம் ஒன்றைத் தேர்வுநீக்கும்

மாற்றங்களை சேமியுங்கள் ரத்து செய்

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

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

---

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

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

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

---

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

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

---

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

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

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

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

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

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

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

பல அளவுகள்

பெரிய அல்லது சிறிய பொத்தான்களை விரும்புகிறீர்களா? .btn-large, .btn-smallஅல்லது .btn-miniஇரண்டு கூடுதல் அளவுகளைச் சேர்க்கவும் .

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

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

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

ஊனமுற்ற நிலை

முடக்கப்பட்ட பொத்தான்களுக்கு, .disabledஇணைப்புகளுக்கு வகுப்பையும் உறுப்புகளுக்கான disabledபண்புக்கூறையும் சேர்க்கவும்.<button>

முதன்மை இணைப்பு இணைப்பு

முதன்மை பொத்தான் பொத்தானை

எச்சரிக்கை! .disabledபொதுவான வகுப்பைப் போன்றே இங்கு பயன்பாட்டு வகுப்பாகப் பயன்படுத்துகிறோம் .active, எனவே முன்னொட்டு எதுவும் தேவையில்லை.

ஒரு வகுப்பு, பல குறிச்சொற்கள்

ஒரு , , அல்லது உறுப்பில் .btnவகுப்பைப் பயன்படுத்தவும் .<a><button><input>

இணைப்பு பொத்தானை

<a class = "btn" href = "" > இணைப்பு </a>  
<button class = "btn" type = "submit" >  
  பொத்தானை
</button>
<உள்ளீடு வகுப்பு = "btn" வகை = "பொத்தான்"  
         மதிப்பு = "உள்ளீடு" >
<உள்ளீடு வகுப்பு = "btn" வகை = "சமர்ப்பி"  
         மதிப்பு = "சமர்ப்பி" >

ஒரு சிறந்த நடைமுறையாக, குறுக்கு உலாவி ரெண்டரிங்கைப் பொருத்துவதை உறுதிசெய்ய, உங்களின் சூழலுக்கான உறுப்பைப் பொருத்த முயற்சிக்கவும். உங்களிடம் இருந்தால் input, <input type="submit">உங்கள் பொத்தானைப் பயன்படுத்தவும்.

• சின்னக் கண்ணாடி
• சின்னம்-இசை
• ஐகான்-தேடல்
• சின்னம்-உறை
• சின்னம்-இதயம்
• சின்ன நட்சத்திரம்
• சின்னம்-நட்சத்திரம்-வெற்று
• ஐகான்-பயனர்
• ஐகான்-தி��ைப்படம்
• சின்னம்-வது-பெரிய
• சின்னம்-வது
• icon-th-list
• சின்னம்-சரி
• ஐகான்-நீக்கு
• icon-zoom-in
• icon-zoom-out
• ஐகான்-ஆஃப்
• சின்னம்-சிக்னல்
• icon-cog
• சின்னம்-குப்பை
• சின்னம்-வீடு
• ஐகான்-கோப்பு
• சின்னம்-நேரம்
• சின்னச் சாலை
• icon-download-alt
• ஐகான்-பதிவிறக்கம்
• ஐகான்-பதிவேற்றம்
• ஐகான்-இன்பாக்ஸ்
• சின்னம்-விளையாட்டு வட்டம்
• ஐகான்-மீண்டும்

• ஐகான்-புதுப்பிப்பு
• icon-list-alt
• ஐகான்-பூட்டு
• சின்னக் கொடி
• ஐகான்-ஹெட்ஃபோன்கள்
• சின்னம்-தொகுதி-ஆஃப்
• சின்னம்-தொகுதி-குறைப்பு
• சின்னம்-தொகுதி-அப்
• icon-qrcode
• ஐகான்-பார்கோடு
• சின்னம்-குறிச்சொல்
• சின்னக் குறிச்சொற்கள்
• சின்னப் புத்தகம்
• சின்னம்-புக்மார்க்
• ஐகான்-அச்சு
• ஐகான்-கேமரா
• ஐகான்-எழுத்துரு
• icon-bold
• சின்னம்- சாய்வு
• ஐகான்-உரை-உயரம்
• ஐகான்-உரை-அகலம்
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• சின்னப் பட்டியல்
• ஐகான்-இன்டென்ட்-இடது
• ஐகான்-இன்டென்ட்-வலது
• ஐகான்-பேஸ்டைம்-வீடியோ
• சின்னம்-படம்

• சின்னம்-பென்சில்
• icon-map-marker
• சின்னம்-சரிசெய்
• icon-tint
• சின்னம்-திருத்து
• ஐகான்-பகிர்வு
• சின்னச் சரிபார்ப்பு
• சின்னம்-நகர்வு
• சின்னம்-படி-பின்னோக்கி
• சின்னம்-வேகமாக-பின்னோக்கி
• சின்னம்-பின்தங்கிய
• சின்னம்-விளையாட்டு
• சின்னம்-இடைநிறுத்தம்
• சின்னம்-நிறுத்தம்
• சின்னம்-முன்னோக்கி
• ஐகான்-வேகமாக முன்னோக்கி
• ஐகான்-படி-முன்னோக்கி
• ஐகான்-வெளியேற்றம்
• icon-chevron-left
• ஐகான்-செவ்ரான்-வலது
• icon-plus-sign
• icon-minus-sign
• சின்னம்-நீக்கு-அடையாளம்
• சின்னம்-சரி-அடையாளம்
• சின்னம்-கேள்வி-அடையாளம்
• icon-info-sign
• ஐகான்-ஸ்கிரீன்ஷாட்
• சின்னம்-நீக்கு-வட்டம்
• சின்னம்-சரி-வட்டம்
• சின்னம்-தடை-வட்டம்

• சின்னம்-அம்பு-இடது
• ஐகான்-அம்பு-வலது
• ஐகான்-அம்பு-மேல்
• ஐகான்-அம்பு-கீழே
• icon-share-alt
• icon-resize-full
• icon-resize-small
• ஐகான்-பிளஸ்
• சின்னம்-கழித்தல்
• சின்னம்-நட்சத்திரம்
• சின்னம்-ஆச்சரியம்-அடையாளம்
• சின்னம்-பரிசு
• சின்னம்-இலை
• சின்னம்-நெருப்பு
• ஐகான்-கண்-திறந்த
• சின்னம்-கண்-மூடு
• சின்னம்-எச்சரிக்கை-அடையாளம்
• ஐகான்-விமானம்
• சின்னம்-காலண்டர்
• சின்னம்-சீரற்ற
• சின்னம்-கருத்து
• சின்னம்-காந்தம்
• ஐகான்-செவ்ரான்-அப்
• ஐகான்-செவ்ரான்-டவுன்
• ஐகான்-ரீட்வீட்
• ஐகான்-ஷாப்பிங்-கார்ட்
• ஐகான்-கோப்புறை-மூடு
• ஐகான்-கோப்புறை-திறந்த
• icon-resize-செங்குத்து
• icon-resize-horizontal

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

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

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

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

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

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

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

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

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

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

எச்சரிக்கை! பொத்தான்கள் அல்லது நேவ் இணைப்புகளைப் போல, உரையின் சரங்களைப் பயன்படுத்தும்போது, <i>​​சரியான இடைவெளிக்காக குறிச்சொல்லுக்குப் பிறகு ஒரு இடத்தை விட்டுவிடுவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

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

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

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

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

புதுப்பிப்பு சரிபார் அழி

கருத்து அமைப்புகள் மேலும் தகவல்

மின்னஞ்சல் முகவரி