தலைப்புகள்

அனைத்து HTML தலைப்புகளும் <h1>கிடைக்கின்றன <h6>.

h1. தலைப்பு 1

h2. தலைப்பு 2

h3. தலைப்பு 3

h4. தலைப்பு 4

h5. தலைப்பு 5

h6. தலைப்பு 6

உடல் நகல்

பூட்ஸ்டார்ப்பின் உலகளாவிய இயல்புநிலை 20px உடன் 14pxfont-size ஆகும் . இது அனைத்து பத்திகளுக்கும் பொருந்தும். கூடுதலாக, (பத்திகள்) அவற்றின் வரி உயரத்தில் பாதியின் கீழ் விளிம்பைப் பெறுகின்றன (இயல்புநிலையாக 10px).line-height<body><p>

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

சமூக நேட்டோக் பெனாட்டிபஸ் மற்றும் மேக்னிஸ் டிஸ் பார்டூரியண்ட் மான்டெஸ், நாஸ்கெட்டூர் ரிடிகுலஸ் மஸ். Donec ullamcorper nulla non metus aactor fringilla. டுயிஸ் மோலிஸ், கம்மோடோ லுக்டஸ் அல்ல, நிசி எரட் போர்டிட்டர் லிகுலா, எகெட் லாசினியா ஓடியோ செம் நெக் எலிட். Donec ullamcorper nulla non metus aactor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். டுயிஸ் மோலிஸ், கம்மோடோ லுக்டஸ் அல்ல, நிசி எரட் போர்டிட்டர் லிகுலா, எகெட் லாசினியா ஓடியோ செம் நெக் எலிட்.

<p> ... </p>

முன்னணி உடல் நகல்

சேர்ப்பதன் மூலம் ஒரு பத்தியை தனித்து நிற்கச் செய்யுங்கள் .lead.

Vivamus sagittis lacus vel ague laoreet rutrum faucibus dolor aactor. டுயிஸ் மோலிஸ், கொமோடோ அல்லாத லூக்டஸ்.

<p class = "lead" > ... </p>

குறைவாகக் கட்டப்பட்டது

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

வலியுறுத்தல்

இலகுரக பாணிகளுடன் HTML இன் இயல்புநிலை முக்கியத்துவம் குறிச்சொற்களைப் பயன்படுத்தவும்.

`<small>`

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

உரையின் இந்த வரி சிறந்த அச்சாகக் கருதப்பட வேண்டும்.

<p> <small> உரையின் இந்த வரியானது சிறந்த அச்சாகக் கருதப்பட வேண்டும். </small> </p>

தடித்த

அதிக எழுத்துரு எடை கொண்ட உரையின் துணுக்கை வலியுறுத்துவதற்காக.

பின்வரும் உரைத் துணுக்கு தடிமனான உரையாக வழங்கப்படுகிறது .

<strong> தடிமனான உரையாக வழங்கப்பட்டுள்ளது </strong>

சாய்வு

சாய்வு கொண்ட உரையின் துணுக்கை வலியுறுத்துவதற்காக.

பின்வரும் உரையின் துணுக்கு சாய்வு உரையாக வழங்கப்படுகிறது .

<em> சாய்வு உரையாக வழங்கப்பட்டுள்ளது </em>

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

சீரமைப்பு வகுப்புகள்

உரை சீரமைப்பு வகுப்புகளைக் கொண்ட கூறுகளுக்கு உரையை எளிதாக மறுசீரமைக்கவும்.

இடது சீரமைக்கப்பட்ட உரை.

மையமாக சீரமைக்கப்பட்ட உரை.

வலது சீரமைக்கப்பட்ட உரை.

<p class = "text-left" > இடப்புறம் சீரமைக்கப்பட்ட உரை. </p> 
<p class = "text-center" > மையமாக சீரமைக்கப்பட்ட உரை. </p> 
<p class = "text-right" > வலது சீரமைக்கப்பட்ட உரை. </p>

வலியுறுத்தல் வகுப்புகள்

ஒரு சில முக்கியத்துவம் வாய்ந்த பயன்பாட்டு வகுப்புகளுடன் வண்ணத்தின் மூலம் அர்த்தத்தை வெளிப்படுத்துங்கள்.

Fusce dapibus, Telus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus aactor fringilla.

ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis.

டுயிஸ் மோலிஸ், கம்மோடோ அல்லாத லூக்டஸ், நிசி எரட் போர்டிட்டர் லிகுலா.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo,tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada Magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus aactor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, commodo luctus அல்ல, nisi erat porttitor ligula. </p>

சுருக்கங்கள்

<abbr>விரிவாக்கப்பட்ட பதிப்பை மிதவையில் காட்ட, சுருக்கங்கள் மற்றும் சுருக்கெழுத்துக்களுக்கான HTML இன் உறுப்புகளின் பகட்டான செயலாக்கம் . ஒரு பண்புக்கூறுடன் கூடிய சுருக்கங்கள் titleஒரு ஒளி புள்ளியிடப்பட்ட கீழ் எல்லை மற்றும் மிதவையில் உதவி கர்சரைக் கொண்டுள்ளன, இது மிதவையில் கூடுதல் சூழலை வழங்குகிறது.

`<abbr>`

சுருக்கத்தின் நீண்ட வட்டத்தில் விரிவாக்கப்பட்ட உரைக்கு, titleபண்புக்கூறைச் சேர்க்கவும்.

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

<abbr title = "பண்பு" > attr </abbr>

`<abbr class="initialism">`

.initialismசற்று சிறிய எழுத்துரு அளவுக்கான சுருக்கத்தைச் சேர்க்கவும் .

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

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

முகவரிகள்

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

`<address>`

அனைத்து வரிகளையும் உடன் முடிப்பதன் மூலம் வடிவமைப்பைப் பாதுகாக்கவும் <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

முழு பெயர்
[email protected]

<முகவரி>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, சூட் 600 <br>
  சான் பிரான்சிஸ்கோ, CA 94107 <br>
  <abbr title = "ஃபோன்" > P: </abbr> (123) 456-7890 
</address>
 
<முகவரி>
  <strong> முழுப் பெயர் </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

தடைகள்

உங்கள் ஆவணத்தில் உள்ள மற்றொரு மூலத்திலிருந்து உள்ளடக்கத் தொகுதிகளை மேற்கோள் காட்டுவதற்காக.

இயல்புநிலை தொகுதி மேற்கோள்

மேற்கோளாக <blockquote>எந்த HTML ஐயும் சுற்றி வைக்கவும். நேரடி மேற்கோள்களுக்கு நாங்கள் பரிந்துரைக்கிறோம் a <p>.

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. முழு எண்கள் ஒரு முன்னும் பின்னும். </p>
</blockquote>

பிளாக்கோட் விருப்பங்கள்

நிலையான பிளாக்மேட்டில் எளிய மாறுபாடுகளுக்கான நடை மற்றும் உள்ளடக்க மாற்றங்கள்.

ஒரு மூலத்திற்கு பெயரிடுதல்

<small>மூலத்தைக் கண்டறிய குறிச்சொல்லைச் சேர்க்கவும் . மூலப் பணியின் பெயரை உள்ளிடவும் <cite>.

லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்கள் ஒரு முற்பகுதி.
மூலத் தலைப்பில் பிரபலமான ஒருவர்

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. முழு எண்கள் ஒரு முன்னும் பின்னும். </p>
  <small> பிரபலமான ஒருவர் <cite title = "மூல தலைப்பு" > மூல தலைப்பு </cite></small> 
</blockquote>

மாற்று காட்சிகள்

.pull-rightமிதவை, வலது-சீரமைக்கப்பட்ட தொகுதி மேற்கோளுக்கு பயன்படுத்தவும் .

லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்கள் ஒரு முற்பகுதி.
மூலத் தலைப்பில் பிரபலமான ஒருவர்

<blockquote class = "வலதுக்கு இழுக்கவும்" > 
  ...
</blockquote>

பட்டியல்கள்

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

ஆர்டர் வெளிப்படையாக முக்கியமில்லாத உருப்படிகளின் பட்டியல் .

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

<ul>
  <li> ... </li>
</ul>

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

ஆர்டர் வெளிப்படையாக முக்கியத்துவம் வாய்ந்த உருப்படிகளின் பட்டியல் .

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

<ol>
  <li> ... </li>
</ol>

பாணியற்றது

பட்டியல் உருப்படிகளில் உள்ள இயல்புநிலை list-styleமற்றும் இடது திணிப்பை அகற்று (உடனடி குழந்தைகளுக்கு மட்டும்).

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

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

கோட்டில்

அனைத்து பட்டியல் பொருட்களையும் ஒரே வரியில் inline-blockமற்றும் சில லைட் பேடிங்கில் வைக்கவும்.

லோரெம் இப்சம்
பேசெல்லஸ் ஐகுலிஸ்
நுல்லா வோலுட்பட்

<ul class = "inline" > 
  <li> ... </li>
</ul>

விளக்கம்

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

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

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

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

விதிமுறைகளையும் விளக்கங்களையும் <dl>வரிசையாக அருகருகே உருவாக்கவும்.

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

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

எச்சரிக்கை!கிடைமட்ட விளக்கப் பட்டியல்கள், இடது நெடுவரிசை திருத்தத்தில் பொருத்த முடியாத அளவுக்கு நீளமான சொற்களைக் குறைக்கும் text-overflow. குறுகிய வியூபோர்ட்களில், அவை இயல்புநிலை அடுக்கப்பட்ட தளவமைப்புக்கு மாறும்.

கோட்டில்

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

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

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

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

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

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

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

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

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

இயல்புநிலை பாணிகள்

அடிப்படை ஸ்டைலிங்கிற்கு - லைட் பேடிங் மற்றும் கிடைமட்ட பிரிப்பான்கள் மட்டுமே - அடிப்படை வகுப்பை .tableஎதிலும் சேர்க்கவும் <table>.

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

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

விருப்ப வகுப்புகள்

பின்வரும் வகுப்புகளில் ஏதேனும் ஒன்றை .tableஅடிப்படை வகுப்பில் சேர்க்கவும்.

`.table-striped`

CSS தேர்வி (IE7-8 இல் கிடைக்காது) <tbody>வழியாக எந்த டேபிள் வரிசையிலும் வரிக்குதிரையை நீக்குகிறது.:nth-child

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

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

`.table-bordered`

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

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

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

`.table-hover`

ஒரு உள்ள அட்டவணை வரிசைகளில் ஒரு மிதவை நிலையை இயக்கவும் <tbody>.

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

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

`.table-condensed`

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

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

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

விருப்ப வரிசை வகுப்புகள்

அட்டவணை வரிசைகளை வண்ணமயமாக்க சூழ்நிலை வகுப்புகளைப் பயன்படுத்தவும்.

வர்க்கம்	விளக்கம்
`.success`	வெற்றிகரமான அல்லது நேர்மறையான செயலைக் குறிக்கிறது.
`.error`	ஆபத்தான அல்லது எதிர்மறையான செயலைக் குறிக்கிறது.
`.warning`	கவனம் தேவைப்படக்கூடிய எச்சரிக்கையைக் குறிக்கிறது.
`.info`	இயல்புநிலை பாணிகளுக்கு மாற்றாகப் பயன்படுத்தப்படுகிறது.

#	தயாரிப்பு	பணம் எடுக்கப்பட்டது	நிலை
1	காசநோய் - மாதாந்திர	01/04/2012	அங்கீகரிக்கப்பட்டது
2	காசநோய் - மாதாந்திர	02/04/2012	நிராகரிக்கப்பட்டது
3	காசநோய் - மாதாந்திர	03/04/2012	நிலுவையில் உள்ளது
4	காசநோய் - மாதாந்திர	04/04/2012	உறுதிப்படுத்த அழைக்கவும்

...
  < tr class = "வெற்றி" >
    <td> 1 < /td>
    <td>காசநோய் - மாதாந்திர</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>அங்கீகரிக்கப்பட்டது</ td >
  </ tr >
...

ஆதரிக்கப்படும் அட்டவணை மார்க்அப்

ஆதரிக்கப்படும் அட்டவணை HTML கூறுகளின் பட்டியல் மற்றும் அவை எவ்வாறு பயன்படுத்தப்பட வேண்டும்.

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

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

இயல்புநிலை பாணிகள்

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

<form>
  <fieldset>
    <legend> Legend </legend>
    <label> லேபிள் பெயர் </label>
    <input type = "text" placeholder = "ஏதாவது தட்டச்சு செய்யவும்..." >  
    <span class = "help-block" > எடுத்துக்காட்டு தொகுதி-நிலை உதவி உரை இங்கே. </span> 
    <லேபிள் வகுப்பு = "செக்பாக்ஸ்" > 
      <input type = "checkbox" > என்னைப் பார்க்கவும் 
    </label>
    <button type = "submit" class = "btn" > Submit </button>  
  </fieldset>
</form>

விருப்ப தளவமைப்புகள்

பூட்ஸ்டார்ப் உடன் சேர்க்கப்பட்டுள்ளது பொதுவான பயன்பாட்டு நிகழ்வுகளுக்கான மூன்று விருப்ப வடிவ அமைப்புகளாகும்.

தேடல் படிவம்

கூடுதல் வட்டமான உரை உள்ளீட்டிற்கான .form-searchபடிவத்தில் சேர்க்கவும் .search-query.<input>

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

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

சிறிய தளவமைப்பிற்கான இடது-சீரமைக்கப்பட்ட லேபிள்கள் மற்றும் இன்லைன்-பிளாக் கட்டுப்பாடுகளைச் சேர்க்கவும் .form-inline.

<form class = "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>

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

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

.form-horizontalபடிவத்தில் சேர்க்கவும்
லேபிள்கள் மற்றும் கட்டுப்பாடுகளை மடக்கு.control-group
.control-labelலேபிளில் சேர்க்கவும்
.controlsசரியான சீரமைப்பிற்கு ஏதேனும் தொடர்புடைய கட்டுப்பாடுகளை மடிக்கவும்

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > மின்னஞ்சல் </label>  
    <div class = "கட்டுப்பாடுகள்" > 
      <உள்ளீடு  type = "text" id = "inputEmail" placeholder = "Email" >  
    </div>
  </div>
  <div class = "control-group" > 
    <லேபிள்  class = "control-label" for = "inputPassword" > கடவுச்சொல் </label> 
    <div class = "கட்டுப்பாடுகள்" > 
      <உள்ளீடு வகை = "கடவுச்சொல்"   id = "inputPassword" placeholder = "Password" > 
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "கட்டுப்பாடுகள்" > 
      <லேபிள் வகுப்பு = "செக்பாக்ஸ்" > 
        <உள்ளீடு வகை = "செக்பாக்ஸ்" > என்னை நினைவில் கொள்க
      </label>
      <பொத்தான் வகை = "சமர்ப்பி" வகுப்பு  = "btn" > உள்நுழைக </button>
    </div>
  </div>
</form>

ஆதரிக்கப்படும் படிவக் கட்டுப்பாடுகள்

ஒரு எடுத்துக்காட்டு படிவ அமைப்பில் ஆதரிக்கப்படும் நிலையான படிவக் கட்டுப்பாடுகளின் எடுத்துக்காட்டுகள்.

உள்ளீடுகள்

மிகவும் பொதுவான படிவக் கட்டுப்பாடு, உரை அடிப்படையிலான உள்ளீட்டு புலங்கள். அனைத்து HTML5 வகைகளுக்கான ஆதரவையும் உள்ளடக்கியது: உரை, கடவுச்சொல், தேதிநேரம், தேதிநேரம்-உள்ளூர், தேதி, மாதம், நேரம், வாரம், எண், மின்னஞ்சல், url, தேடல், தொலைபேசி மற்றும் வண்ணம்.

typeஎல்லா நேரங்களிலும் ஒரு குறிப்பிட்ட பயன்பாடு தேவைப்படுகிறது .

<input type = "text" placeholder = "Text input" >

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

உரையின் பல வரிகளை ஆதரிக்கும் படிவக் கட்டுப்பாடு. rowsதேவையான பண்புகளை மாற்றவும் .

<textarea row = "3" ></textarea>

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

தேர்வுப்பெட்டிகள் பட்டியலில் ஒன்று அல்லது பல விருப்பங்களைத் தேர்ந்தெடுக்கும் அதே சமயம் ரேடியோக்கள் பலவற்றிலிருந்து ஒரு விருப்பத்தைத் தேர்ந்தெடுக்கும்.

இயல்புநிலை (அடுக்கப்பட்டது)

<லேபிள் வகுப்பு = "செக்பாக்ஸ்" > 
  <உள்ளீடு வகை = "செக்பாக்ஸ்" மதிப்பு = ""   >
  விருப்பம் ஒன்று இது மற்றும் அது - இது ஏன் சிறந்தது என்பதைச் சேர்க்க மறக்காதீர்கள்
</label>
 
<லேபிள் வகுப்பு = "ரேடியோ" > 
  <உள்ளீடு வகை = "ரேடியோ" பெயர் = "optionsRadios" ஐடி = "optionsRadios1 " மதிப்பு = "option1" சரிபார்க்கப்பட்டது >     
  விருப்பம் ஒன்று இது மற்றும் அது - இது ஏன் சிறந்தது என்பதைச் சேர்க்க மறக்காதீர்கள்
</label>
<லேபிள் வகுப்பு = "ரேடியோ" > 
  <உள்ளீடு வகை = "ரேடியோ" பெயர் = "optionsRadios" ஐடி = "optionsRadios2" மதிப்பு = "option2" >    
  விருப்பம் இரண்டு வேறு ஏதாவது இருக்கலாம், அதைத் தேர்ந்தெடுப்பது விருப்பம் ஒன்றைத் தேர்வுநீக்கும்
</label>

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

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

<label class = "செக்பாக்ஸ் இன்லைன்" > 
  <input type = "checkbox" id = "inlineCheckbox1" மதிப்பு = "option1" > 1   
</label>
<label class = "செக்பாக்ஸ் இன்லைன்" > 
  <input type = "checkbox" id = "inlineCheckbox2" மதிப்பு = "option2" > 2   
</label>
<label class = "செக்பாக்ஸ் இன்லைன்" > 
  <input type = "checkbox" id = "inlineCheckbox3" மதிப்பு = "option3" > 3   
</label>

தேர்ந்தெடுக்கிறது

multiple="multiple"ஒரே நேரத்தில் பல விருப்பங்களைக் காட்ட , இயல்புநிலை விருப்பத்தைப் பயன்படுத்தவும் அல்லது a குறிப்பிடவும் .

<தேர்ந்தெடு>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
< பல = "multiple" > தேர்ந்தெடுக்கவும் 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

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

ஏற்கனவே உள்ள உலாவி கட்டுப்பாடுகளின் மேல் சேர்த்து, பூட்ஸ்டார்ப்பில் மற்ற பயனுள்ள படிவ கூறுகளும் அடங்கும்.

முன்கூட்டிய மற்றும் இணைக்கப்பட்ட உள்ளீடுகள்

உரை அடிப்படையிலான உள்ளீட்டிற்கு முன் அல்லது பின் உரை அல்லது பொத்தான்களைச் சேர்க்கவும். என்பதை கவனிக்கவும்selectஉறுப்புகள் இங்கே ஆதரிக்கப்படவில்லை

இயல்புநிலை விருப்பங்கள்

ஒரு உள்ளீட்டில் உரையை முன்வைக்க அல்லது இணைக்க இரண்டு வகுப்புகளில் ஒன்றைக் கொண்டு ஒரு மற்றும் அனை மடிக்கவும் .add-on.input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput " type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

இணைந்தது

.add-onஉள்ளீட்டை முன் கூட்டிச் சேர்க்க இரண்டு வகுப்புகளையும் இரண்டு நிகழ்வுகளையும் பயன்படுத்தவும் .

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

உரைக்குப் பதிலாக பொத்தான்கள்

ஒரு உள்ளீட்டில் ஒரு பொத்தானை (அல்லது இரண்டு) இணைக்க <span>, உரையுடன் கூடிய a க்குப் பதிலாக a ஐப் பயன்படுத்தவும்..btn

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > செல்! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Search </button>  
  <button class = "btn" type = "button" > விருப்பங்கள் </button>  
</div>

பட்டன் கீழ்தோன்றும்

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      செயல்
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      செயல்
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton " type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      செயல்
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " வகை = "உரை" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      செயல்
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

பிரிக்கப்பட்ட கீழ்தோன்றும் குழுக்கள்

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <உள்ளீடு வகை = "உரை" > 
  </div>
  <div class = "input-append" > 
    <உள்ளீடு வகை = "உரை" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

தேடல் படிவம்

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Search </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Search </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

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

.input-largeவகுப்புகளைப் பயன்படுத்தி உங்கள் உள்ளீடுகளை கிரிட் நெடுவரிசை அளவுகளுடன் பொருத்துவது போன்ற தொடர்புடைய அளவு வகுப்புகளைப் பயன்படுத்தவும் .span*.

தொகுதி நிலை உள்ளீடுகள்

ஏதேனும் <input>அல்லது <textarea>உறுப்பு ஒரு தொகுதி நிலை உறுப்பு போல் செயல்படச் செய்யுங்கள்.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

உறவினர் அளவு

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

எச்சரிக்கை!எதிர்கால பதிப்புகளில், இந்த தொடர்புடைய உள்ளீட்டு வகுப்புகளின் பயன்பாட்டை எங்களின் பொத்தான் அளவுகளுடன் பொருந்துமாறு மாற்றுவோம். எடுத்துக்காட்டாக, .input-largeஉள்ளீட்டின் திணிப்பு மற்றும் எழுத்துரு அளவை அதிகரிக்கும்.

கட்டம் அளவு

கிரிட் நெடுவரிசைகளின் அதே அளவுகளுடன் பொருந்தக்கூடிய உள்ளீடுகளுக்கு .span1பயன்படுத்தவும் ..span12

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<வகுப்பைத் தேர்ந்தெடு = " span1" > 
  ...
</select>
<வகுப்பைத் தேர்ந்தெடு = " span2" > 
  ...
</select>
<வகுப்பைத் தேர்ந்தெடு = " span3" > 
  ...
</select>

ஒரு வரிக்கு பல கட்ட உள்ளீடுகளுக்கு, சரியான இடைவெளிக்கு மாற்றி வகுப்பைப் பயன்படுத்தவும்.controls-row . இது உள்ளீடுகளை ஒயிட்-ஸ்பேஸைச் சரிக்க மிதக்கிறது, சரியான விளிம்புகளை அமைக்கிறது மற்றும் மிதவையை அழிக்கிறது.

<div class = "கட்டுப்பாடுகள்" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

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

உண்மையான படிவ மார்க்அப்பைப் பயன்படுத்தாமல் திருத்த முடியாத படிவத்தில் தரவை வழங்கவும்.

<span class = "input-xlarge uneditable-input" > சில மதிப்பு இங்கே </span>

படிவம் செயல்கள்

செயல்களின் குழுவுடன் (பொத்தான்கள்) படிவத்தை முடிக்கவும். ஒரு க்குள் வைக்கப்படும் போது .form-actions, படிவக் கட்டுப்பாடுகளுடன் வரிசையாக பொத்தான்கள் தானாகவே உள்தள்ளப்படும்.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > மாற்றங்களைச் சேமி </button>  
  <button type = "button" class = "btn" > Cancel </button>  
</div>

உதவி உரை

படிவக் கட்டுப்பாடுகளைச் சுற்றி தோன்றும் உதவி உரைக்கான இன்லைன் மற்றும் பிளாக் நிலை ஆதரவு.

இன்லைன் உதவி

<input type = "text" ><span class = "help-inline" > இன்லைன் உதவி உரை </span>

உதவியைத் தடு

<input type = "text" ><span class = "help-block" > ஒரு புதிய வரியில் உடைந்து ஒரு வரிக்கு அப்பால் நீட்டிக்கக்கூடிய நீண்ட உதவி உரை. </span>

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

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

உள்ளீடு கவனம்

outlineசில படிவக் கட்டுப்பாடுகளில் உள்ள இயல்புநிலை பாணிகளை அகற்றிவிட்டு, box-shadowஅதன் இடத்தில் :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "இது கவனம் செலுத்தப்பட்டது..." >

தவறான உள்ளீடுகள்

உடன் இயல்புநிலை உலாவி செயல்பாடு மூலம் நடை உள்ளீடுகள் :invalid. a ஐக் குறிப்பிடவும், புலம் விருப்பமாக இல்லாவிட்டால் பண்புக்கூறைச் typeசேர்க்கவும் , மேலும் (பொருந்தினால்) a ஐக் குறிப்பிடவும் .requiredpattern

CSS போலித் தேர்வாளர்களுக்கான ஆதரவு இல்லாததால், Internet Explorer 7-9 பதிப்புகளில் இது கிடைக்காது.

<input class = "span3" type = "email" தேவை >

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

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

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "முடக்கப்பட்ட உள்ளீடு இங்கே..." முடக்கப்பட்டது >

சரிபார்ப்பு கூறுகிறது

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

<div class = "கட்டுப்பாட்டு குழு எச்சரிக்கை" > 
  <label class = "control-label" for = "inputWarning" > எச்சரிக்கையுடன் உள்ளீடு </label>  
  <div class = "கட்டுப்பாடுகள்" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > ஏதோ தவறு நடந்திருக்கலாம் </span> 
  </div>
</div>
 
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > பிழையுடன் உள்ளீடு </label>  
  <div class = "கட்டுப்பாடுகள்" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > பிழையை சரிசெய்யவும் </span> 
  </div>
</div>
 
<div class = "control-group info" > 
  <label class = "control-label" for = "inputInfo" > தகவலுடன் உள்ளீடு </label>  
  <div class = "கட்டுப்பாடுகள்" > 
    <உள்ளீடு வகை = "உரை" ஐடி = "உள்ளீட்டு தகவல்" >  
    <span class = "help-inline" > பயனர் பெயர் ஏற்கனவே எடுக்கப்பட்டது </span> 
  </div>
</div>
 
<div class = "control-group success" > 
  <label class = "control-label" for = "inputSuccess" > வெற்றியுடன் உள்ளீடு </label>  
  <div class = "கட்டுப்பாடுகள்" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > அடடா! </span> 
  </div>
</div>

இயல்புநிலை பொத்தான்கள்

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

பொத்தானை	class=""	விளக்கம்
	`btn`	சாய்வு கொண்ட நிலையான சாம்பல் பொத்தான்
	`btn btn-primary`	கூடுதல் காட்சி எடையை வழங்குகிறது மற்றும் பொத்தான்களின் தொகுப்பில் முதன்மை செயலை அடையாளம் காட்டுகிறது
	`btn btn-info`	இயல்புநிலை பாணிகளுக்கு மாற்றாகப் பயன்படுத்தப்படுகிறது
	`btn btn-success`	வெற்றிகரமான அல்லது நேர்மறையான செயலைக் குறிக்கிறது
	`btn btn-warning`	இந்த நடவடிக்கை எச்சரிக்கையுடன் எடுக்கப்பட வேண்டும் என்பதைக் குறிக்கிறது
	`btn btn-danger`	ஆபத்தான அல்லது எதிர்மறையான செயலைக் குறிக்கிறது
	`btn btn-inverse`	மாற்று அடர் சாம்பல் பொத்தான், சொற்பொருள் செயல் அல்லது பயன்பாட்டுடன் இணைக்கப்படவில்லை
	`btn btn-link`	பொத்தான் நடத்தையைப் பராமரிக்கும் போது, அதை இணைப்பாகத் தோற்றமளிப்பதன் மூலம் ஒரு பட்டனை ஆழமாக்குங்கள்

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

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

பொத்தான் அளவுகள்

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

<p>
  <button class = "btn btn-large btn-primary" type = "button" > பெரிய பொத்தான் </button>  
  <button class = "btn btn-large" type = "button" > பெரிய பொத்தான் </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > இயல்புநிலை பொத்தான் </button>  
  <button class = "btn" type = "button" > Default button </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > சிறிய பொத்தான் </button>  
  <button class = "btn btn-small" type = "button" > சிறிய பொத்தான் </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  <button class = "btn btn-mini" type = "button" > Mini button </button>  
</p>

சேர்ப்பதன் மூலம் பிளாக் லெவல் பட்டன்களை உருவாக்கவும்—பெற்றோரின் முழு அகலம் கொண்டவை .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > தடுப்பு நிலை பொத்தான் </button>  
<button class = "btn btn-large btn-block" type = "button" > தடுப்பு நிலை பொத்தான் </button>

ஊனமுற்ற நிலை

பொத்தான்களை 50% பின்னோக்கி மங்கச் செய்வதன் மூலம் கிளிக் செய்ய முடியாததாகத் தோன்றும்.

நங்கூரம் உறுப்பு

பட்டன்களில் .disabledவகுப்பைச் சேர்க்கவும் .<a>

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

<a href = "#" class = "btn btn-large btn-primary disabled" > முதன்மை இணைப்பு </a>  
<a href = "#" class = "btn btn-large disabled" > இணைப்பு </a>

எச்சரிக்கை!.disabledபொதுவான வகுப்பைப் போன்றே இங்கு பயன்பாட்டு வகுப்பாகப் பயன்படுத்துகிறோம் .active, எனவே முன்னொட்டு எதுவும் தேவையில்லை. மேலும், இந்த வகுப்பு அழகியலுக்கு மட்டுமே; இங்கே இணைப்புகளை முடக்க தனிப்பயன் JavaScript ஐப் பயன்படுத்த வேண்டும்.

பொத்தான் உறுப்பு

பொத்தான்களில் disabledபண்புகளைச் சேர்க்கவும் .<button>

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > முதன்மை பொத்தான் </button>   
<button type = "button" class = "btn btn-large" disabled > பட்டன் </button>

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

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

<a class = "btn" href = "" > இணைப்பு </a>  
<button class = "btn" type = "submit" > பட்டன் </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

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

<img>எந்தவொரு திட்டத்திலும் படங்களை எளிதாக வடிவமைக்க ஒரு உறுப்புக்கு வகுப்புகளைச் சேர்க்கவும் .

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

எச்சரிக்கை! .img-roundedஆதரவு .img-circleஇல்லாததால் IE7-8 இல் வேலை செய்ய வேண்டாம் .border-radius

ஐகான் கிளிஃப்கள்

ஸ்ப்ரைட் வடிவத்தில் 140 ஐகான்கள், அடர் சாம்பல் (இயல்புநிலை) மற்றும் வெள்ளை நிறத்தில் கிடைக்கும், இது Glyphicons ஆல் வழங்கப்படுகிறது .

சின்னக் கண்ணாடி
சின்னம்-இசை
ஐகான்-தேடல்
சின்னம்-உறை
சின்னம்-இதயம்
சின்ன நட்சத்திரம்
சின்னம்-நட்சத்திரம்-வெற்று
ஐகான்-பயனர்
ஐகான்-திரைப்படம்
சின்னம்-வது-பெரிய
சின்னம்-வது
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-indent-left
ஐகான்-இன்டென்ட்-வலது
ஐகான்-பேஸ்டைம்-வீடியோ
சின்னம்-படம்
சின்னம்-பென்சில்
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
icon-hdd
ஐகான்-புல்ஹார்ன்
சின்னம்-மணி
சின்னம்-சான்றிதழ்
icon-thumbs-up
icon-thumbs-down
சின்னம்-கை-வலது
சின்னம்-கை-இடது
icon-hand-up
சின்னம்-கை கீழே
சின்னம்-வட்டம்-அம்பு-வலது
சின்னம்-வட்டம்-அம்பு-இடது
சின்னம்-வட்டம்-அம்பு-மேல்
சின்னம்-வட்டம்-அம்பு-கீழே
ஐகான்-குளோப்
சின்னம்-குறடு
சின்னம்-பணிகள்
ஐகான்-வடிப்பான்
சின்னம்-சுருக்கப் பெட்டி
ஐகான்-முழுத்திரை

Glyphicons பண்புக்கூறு

Glyphicons Halflings பொதுவாக இலவசமாகக் கிடைக்காது, ஆனால் Bootstrap மற்றும் Glyphicons கிரியேட்டர்களுக்கு இடையேயான ஒரு ஏற்பாடு டெவலப்பர்களாகிய உங்களுக்கு எந்தச் செலவும் இல்லாமல் இதைச் சாத்தியமாக்கியுள்ளது. நன்றி தெரிவிக்கும் வகையில், நடைமுறையில் இருக்கும்போதெல்லாம் Glyphicons க்கான விருப்ப இணைப்பைச் சேர்க்குமாறு கேட்டுக்கொள்கிறோம்.

எப்படி உபயோகிப்பது

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

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

தலைகீழ் (வெள்ளை) ஐகான்களுக்கான ஸ்டைல்களும் உள்ளன, அவை ஒரு கூடுதல் வகுப்பில் தயாராக உள்ளன. நேவ் மற்றும் டிராப் டவுன் இணைப்புகளுக்கான ஹோவர் மற்றும் செயலில் உள்ள நிலைகளில் இந்த வகுப்பை நாங்கள் குறிப்பாகச் செயல்படுத்துவோம்.

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

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

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

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

பொத்தான்கள்

பொத்தான் கருவிப்பட்டியில் உள்ள பட்டன் குழு

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

ஒரு பொத்தான் குழுவில் கீழ்தோன்றும்

பயனர்

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> பயனர் </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> திருத்து </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> நீக்கு </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> தடை </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> நிர்வாகியாக்கு </a></li>  
  </ul>
</div>

பொத்தான் அளவுகள்

நட்சத்திரம் நட்சத்திரம் நட்சத்திரம்

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> நட்சத்திரம் </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> நட்சத்திரம் </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> நட்சத்திரம் </a>

வழிசெலுத்தல்

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> முகப்பு </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> நூலகம் </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> பயன்பாடுகள் </a></li>  
  <li><a href = "#" ><i class = "i" ></i> மற்றவை </a></li>  
</ul>

படிவ புலங்கள்

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > மின்னஞ்சல் முகவரி </label>  
  <div class = "கட்டுப்பாடுகள்" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

அச்சுக்கலை

தலைப்புகள்

h1. தலைப்பு 1

h2. தலைப்பு 2

h3. தலைப்பு 3

h4. தலைப்பு 4

h5. தலைப்பு 5

h6. தலைப்பு 6

உடல் நகல்

முன்னணி உடல் நகல்

குறைவாகக் கட்டப்பட்டது

வலியுறுத்தல்

<small>

தடித்த

சாய்வு

சீரமைப்பு வகுப்புகள்

வலியுறுத்தல் வகுப்புகள்

சுருக்கங்கள்

<abbr>

<abbr class="initialism">

முகவரிகள்

<address>

தடைகள்

இயல்புநிலை தொகுதி மேற்கோள்

பிளாக்கோட் விருப்பங்கள்

ஒரு மூலத்திற்கு பெயரிடுதல்

மாற்று காட்சிகள்

பட்டியல்கள்

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

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

பாணியற்றது

கோட்டில்

விளக்கம்

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

குறியீடு

கோட்டில்

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

அட்டவணைகள்

இயல்புநிலை பாணிகள்

விருப்ப வகுப்புகள்

.table-striped

.table-bordered

.table-hover

.table-condensed

விருப்ப வரிசை வகுப்புகள்

ஆதரிக்கப்படும் அட்டவணை மார்க்அப்

படிவங்கள்

இயல்புநிலை பாணிகள்

விருப்ப தளவமைப்புகள்

தேடல் படிவம்

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

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

ஆதரிக்கப்படும் படிவக் கட்டுப்பாடுகள்

உள்ளீடுகள்

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

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

இயல்புநிலை (அடுக்கப்பட்டது)

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

தேர்ந்தெடுக்கிறது

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

முன்கூட்டிய மற்றும் இணைக்கப்பட்ட உள்ளீடுகள்

இயல்புநிலை விருப்பங்கள்

இணைந்தது

உரைக்குப் பதிலாக பொத்தான்கள்

பட்டன் கீழ்தோன்றும்

பிரிக்கப்பட்ட கீழ்தோன்றும் குழுக்கள்

தேடல் படிவம்

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

தொகுதி நிலை உள்ளீடுகள்

உறவினர் அளவு

கட்டம் அளவு

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

படிவம் செயல்கள்

உதவி உரை

இன்லைன் உதவி

உதவியைத் தடு

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

உள்ளீடு கவனம்

தவறான உள்ளீடுகள்

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

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`