அடிப்படை HTML கூறுகள் பாணி மற்றும் விரிவாக்கக்கூடிய வகுப்புகளுடன் மேம்படுத்தப்பட்டது.
அனைத்து HTML தலைப்புகளும் <h1>
கிடைக்கின்றன <h6>
.
பூட்ஸ்டார்ப்பின் உலகளாவிய இயல்புநிலை 20px உடன் 14pxfont-size
ஆகும் . இது அனைத்து பத்திகளுக்கும் பொருந்தும். கூடுதலாக, (பத்திகள்) அவற்றின் வரி உயரத்தில் பாதியின் கீழ் விளிம்பைப் பெறுகின்றன (இயல்புநிலையாக 9px).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> தடிமனான உரையாக வழங்கப்பட்டுள்ளது </strong>
<em>
அழுத்தத்துடன் உரையின் துணுக்கை வலியுறுத்துவதற்காக
பின்வரும் உரை துணுக்கு சாய்வு உரையாக வழங்கப்படுகிறது .
<em> சாய்வு உரையாக வழங்கப்பட்டுள்ளது </em>
எச்சரிக்கை! தயங்காமல் HTML5 இல் <b>
பயன்படுத்தவும் . குரல், தொழில்நுட்பச் சொற்கள் போன்றவற்றுக்குக் கூடுதல் முக்கியத்துவம் கொடுக்காமல் வார்த்தைகள் அல்லது சொற்றொடர்களை முன்னிலைப்படுத்துவதாகும் .<i>
<b>
<i>
<abbr>
விரிவாக்கப்பட்ட பதிப்பை மிதவையில் காட்ட, சுருக்கங்கள் மற்றும் சுருக்கங்களுக்கான HTML இன் உறுப்புகளின் பகட்டான செயலாக்கம் . ஒரு பண்புக்கூறுடன் கூடிய சுருக்கங்கள் title
ஒரு ஒளி புள்ளியிடப்பட்ட கீழ் எல்லை மற்றும் மிதவையில் உதவி கர்சரைக் கொண்டுள்ளன, இது மிதவையில் கூடுதல் சூழலை வழங்குகிறது.
<abbr>
சுருக்கத்தின் நீண்ட வட்டத்தில் விரிவாக்கப்பட்ட உரைக்கு, title
பண்புக்கூறைச் சேர்க்கவும்.
பண்பு என்ற சொல்லின் சுருக்கம் attr ஆகும் .
<abbr title = "பண்பு" > attr </abbr>
<abbr class="initialism">
.initialism
சற்று சிறிய எழுத்துரு அளவுக்கான சுருக்கத்தைச் சேர்க்கவும் .
வெட்டப்பட்ட ரொட்டியிலிருந்து HTML சிறந்த விஷயம்.
<abbr title = "attribute" class = "initialism" > attr </abbr>
அருகிலுள்ள மூதாதையர் அல்லது முழு வேலை அமைப்புக்கான தொடர்புத் தகவலை வழங்கவும்.
<address>
அனைத்து வரிகளையும் உடன் முடிப்பதன் மூலம் வடிவமைப்பைப் பாதுகாக்கவும் <br>
.
- <முகவரி>
- <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>
ஆர்டர் வெளிப்படையாக முக்கியமில்லாத உருப்படிகளின் பட்டியல் .
- <ul>
- <li> ... </li>
- </ul>
ஆர்டர் வெளிப்படையாக முக்கியத்துவம் வாய்ந்த உருப்படிகளின் பட்டியல் .
- <ol>
- <li> ... </li>
- </ol>
list-style
இடது திணிப்பு இல்லாத அல்லது கூடுதல் உருப்படிகளின் பட்டியல் .
- <ul class = "unstyled" >
- <li> ... </li>
- </ul>
அவற்றின் தொடர்புடைய விளக்கங்களுடன் கூடிய விதிமுறைகளின் பட்டியல்.
- <dl>
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
விதிமுறைகளையும் விளக்கங்களையும் <dl>
வரிசையாக அருகருகே உருவாக்கவும்.
- <dl class = "dl-horizontal" >
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
எச்சரிக்கை! கிடைமட்ட விளக்கப் பட்டியல்கள், இடது நெடுவரிசை திருத்தத்தில் பொருத்த முடியாத அளவுக்கு நீளமான சொற்களைக் குறைக்கும் text-overflow
. குறுகிய வியூபோர்ட்களில், அவை இயல்புநிலை அடுக்கப்பட்ட தளவமைப்புக்கு மாறும்.
உடன் குறியீட்டின் இன்லைன் துணுக்குகளை மடக்கு <code>
.
<section>
இன்லைனாக மூடப்பட்டிருக்க வேண்டும்.
- எடுத்துக்காட்டாக , < code ><section> </ code > இன்லைனாக மூடப்பட்டிருக்க வேண்டும் .
<pre>
குறியீட்டின் பல வரிகளுக்குப் பயன்படுத்தவும் . முறையான ரெண்டரிங்கிற்காக குறியீட்டில் உள்ள எந்த கோண அடைப்புக்களிலிருந்தும் தப்பிக்க மறக்காதீர்கள்.
<p>மாதிரி உரை இங்கே...</p>
- <முன்>
- <p>மாதிரி உரை இங்கே...</p>
- </pre>
எச்சரிக்கை! குறிச்சொற்களுக்குள் குறியீட்டை <pre>
முடிந்தவரை இடதுபுறமாக வைத்திருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்; இது அனைத்து தாவல்களையும் வழங்கும்.
.pre-scrollable
அதிகபட்சமாக 350px உயரத்தை அமைக்கும் மற்றும் y-அச்சு உருள்ப்பட்டியை வழங்கும் வகுப்பை நீங்கள் விருப்பப்படி சேர்க்கலாம் .
அடிப்படை ஸ்டைலிங்கிற்கு - லைட் பேடிங் மற்றும் கிடைமட்ட பிரிப்பான்கள் மட்டுமே - அடிப்படை வகுப்பை .table
எதிலும் சேர்க்கவும் <table>
.
# | முதல் பெயர் | கடைசி பெயர் | பயனர் பெயர் |
---|---|---|---|
1 | குறி | ஓட்டோ | @mdo |
2 | ஜேக்கப் | தோர்ன்டன் | @கொழுப்பு |
3 | லாரி | பறவை |
- <table class = "table" >
- …
- </table>
பின்வரும் வகுப்புகளில் ஏதேனும் ஒன்றை .table
அடிப்படை வகுப்பில் சேர்க்கவும்.
.table-striped
CSS தேர்வி (IE7-IE8 இல் கிடைக்காது) <tbody>
வழியாக எந்த அட்டவணை வரிசையிலும் வரிக்குதிரையை சேர்க்கிறது .:nth-child
# | முதல் பெயர் | கடைசி பெயர் | பயனர் பெயர் |
---|---|---|---|
1 | குறி | ஓட்டோ | @mdo |
2 | ஜேக்கப் | தோர்ன்டன் | @கொழுப்பு |
3 | லாரி | பறவை |
- <table class = "table-striped" >
- …
- </table>
.table-bordered
அட்டவணையில் எல்லைகள் மற்றும் வட்டமான மூலைகளைச் சேர்க்கவும்.
# | முதல் பெயர் | கடைசி பெயர் | பயனர் பெயர் |
---|---|---|---|
1 | குறி | ஓட்டோ | @mdo |
குறி | ஓட்டோ | @getbootstrap | |
2 | ஜேக்கப் | தோர்ன்டன் | @கொழுப்பு |
3 | லாரி பறவை |
- <table class = "table table-bordered" >
- …
- </table>
.table-hover
ஒரு உள்ள அட்டவணை வரிசைகளில் ஒரு மிதவை நிலையை இயக்கவும் <tbody>
.
# | முதல் பெயர் | கடைசி பெயர் | பயனர் பெயர் |
---|---|---|---|
1 | குறி | ஓட்டோ | @mdo |
2 | ஜேக்கப் | தோர்ன்டன் | @கொழுப்பு |
3 | லாரி பறவை |
- <table class = "table table-hover" >
- …
- </table>
.table-condensed
செல் பேடிங்கை பாதியாக குறைப்பதன் மூலம் அட்டவணைகளை மிகவும் கச்சிதமாக மாற்றுகிறது.
# | முதல் பெயர் | கடைசி பெயர் | பயனர் பெயர் |
---|---|---|---|
1 | குறி | ஓட்டோ | @mdo |
2 | ஜேக்கப் | தோர்ன்டன் | @கொழுப்பு |
3 | லாரி பறவை |
- <table class = "table table-condensed" >
- …
- </table>
அட்டவணை வரிசைகளை வண்ணமயமாக்க சூழ்நிலை வகுப்புகளைப் பயன்படுத்தவும்.
வர்க்கம் | விளக்கம் |
---|---|
.success |
வெற்றிகரமான அல்லது நேர்மறையான செயலைக் குறிக்கிறது. |
.error |
ஆபத்தான அல்லது எதிர்மறையான செயலைக் குறிக்கிறது. |
.info |
இயல்புநிலை பாணிகளுக்கு மாற்றாகப் பயன்படுத்தப்படுகிறது. |
# | தயாரிப்பு | பணம் எடுக்கப்பட்டது | நிலை |
---|---|---|---|
1 | காசநோய் - மாதாந்திர | 01/04/2012 | அங்கீகரிக்கப்பட்டது |
2 | காசநோய் - மாதாந்திர | 02/04/2012 | நிராகரிக்கப்பட்டது |
3 | காசநோய் - மாதாந்திர | 03/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> |
நெடுவரிசைக்கான சிறப்பு அட்டவணை செல் (அல்லது வரிசை, நோக்கம் மற்றும் இடத்தைப் பொறுத்து) லேபிள்கள் a க்குள் பயன்படுத்தப்பட வேண்டும் <thead> |
<caption> |
அட்டவணையில் என்ன இருக்கிறது என்பதற்கான விளக்கம் அல்லது சுருக்கம், குறிப்பாக ஸ்கிரீன் ரீடர்களுக்கு பயனுள்ளதாக இருக்கும் |
- <அட்டவணை>
- <caption> ... </caption>
- <thead>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </table>
தனிப்பட்ட படிவக் கட்டுப்பாடுகள் ஸ்டைலிங் பெறுகின்றன, ஆனால் மார்க்அப்பில் தேவையான அடிப்படை வகுப்பு <form>
அல்லது பெரிய மாற்றங்கள் இல்லாமல். படிவக் கட்டுப்பாடுகளின் மேல் அடுக்கப்பட்ட, இடப்புறம் சீரமைக்கப்பட்ட லேபிள்களில் முடிவுகள்.
- <form>
- <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>
- </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 = "கட்டுப்பாடுகள்" >
- <input type = "text" id = "inputEmail" placeholder = "Email" >
- </div>
- </div>
- <div class = "control-group" >
- <label class = "control-label" for = "inputPassword" > கடவுச்சொல் </label>
- <div class = "கட்டுப்பாடுகள்" >
- <input type = "password" id = "inputPassword" placeholder = "Password" >
- </div>
- </div>
- <div class = "control-group" >
- <div class = "கட்டுப்பாடுகள்" >
- <லேபிள் வகுப்பு = "செக்பாக்ஸ்" >
- <உள்ளீடு வகை = "செக்பாக்ஸ்" > என்னை நினைவில் கொள்க
- </label>
- <button type = "submit" class = "btn" > உள்நுழைக </button>
- </div>
- </div>
- </form>
எடுத்துக்காட்டு படிவ அமைப்பில் ஆதரிக்கப்படும் நிலையான படிவக் கட்டுப்பாடுகளின் எடுத்துக்காட்டுகள்.
மிகவும் பொதுவான படிவக் கட்டுப்பாடு, உரை அடிப்படையிலான உள்ளீட்டு புலங்கள். அனைத்து HTML5 வகைகளுக்கான ஆதரவையும் உள்ளடக்கியது: உரை, கடவுச்சொல், தேதிநேரம், தேதிநேரம்-உள்ளூர், தேதி, மாதம், நேரம், வாரம், எண், மின்னஞ்சல், url, தேடல், தொலைபேசி மற்றும் வண்ணம்.
type
எல்லா நேரங்களிலும் ஒரு குறிப்பிட்ட பயன்பாடு தேவைப்படுகிறது .
- <input type = "text" placeholder = "Text input" >
உரையின் பல வரிகளை ஆதரிக்கும் படிவக் கட்டுப்பாடு. row
தேவையான பண்புகளை மாற்றவும் .
- <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 " size = "16" type = "text" placeholder = "Username" >
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInput " size = "16" 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 " size = "16" type = "text" ><span class = "add-on" > .00 </span>
- </div>
<span>
உரையுடன் a என்பதற்குப் பதிலாக, .btn
ஒரு பொத்தானை (அல்லது இரண்டு) உள்ளீட்டில் இணைக்க a ஐப் பயன்படுத்தவும்.
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > Go! </button>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > Search </button><button class = "btn" type = "button" > விருப்பங்கள் </button>
- </div>
- <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 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-horizontal
, படிவக் கட்டுப்பாடுகளுடன் வரிசையாக பொத்தான்கள் தானாக உள்தள்ளப்படும்.
- <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 = "இது கவனம் செலுத்தப்பட்டது..." >
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 success" >
- <label class = "control-label" for = "inputSuccess" > வெற்றியுடன் உள்ளீடு </label>
- <div class = "கட்டுப்பாடுகள்" >
- <input type = "text" id = "inputSuccess" >
- <span class = "help-inline" > அடடா! </span>
- </div>
- </div>
<img>
எந்தவொரு திட்டத்திலும் படங்களை எளிதாக வடிவமைக்க ஒரு உறுப்புக்கு வகுப்புகளைச் சேர்க்கவும் .
- <img src = "..." class = "img-rounded" >
- <img src = "..." class = "img-circle" >
- <img src = "..." class = "img-polaroid" >
எச்சரிக்கை! ஆதரவு இல்லாததால் IE7-8 இல் வேலை செய்ய வேண்டாம் .img-rounded
..img-circle
border-radius
ஸ்ப்ரைட் வடிவத்தில் 140 ஐகான்கள், அடர் சாம்பல் (இயல்புநிலை) மற்றும் வெள்ளை நிறத்தில் கிடைக்கும், இது 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-small" 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>