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

HTML5 டாக்டைப்

HTML5 டாக்டைப்பின் பயன்பாடு தேவைப்படும் சில HTML உறுப்புகள் மற்றும் CSS பண்புகளை பூட்ஸ்டார்ப் பயன்படுத்துகிறது. உங்கள் எல்லா திட்டங்களின் தொடக்கத்திலும் அதைச் சேர்க்கவும்.

<!doctype html>
<html lang="en">
  ...
</html>

முதலில் மொபைல்

பூட்ஸ்டார்ப் 2 உடன், கட்டமைப்பின் முக்கிய அம்சங்களுக்கு விருப்பமான மொபைல் நட்பு பாணிகளைச் சேர்த்துள்ளோம். பூட்ஸ்டார்ப் 3 மூலம், தொடக்கத்திலிருந்தே மொபைலுக்கு ஏற்ற வகையில் திட்டத்தை மீண்டும் எழுதியுள்ளோம். விருப்பமான மொபைல் பாணிகளைச் சேர்ப்பதற்குப் பதிலாக, அவை மையமாகவே சுடப்படுகின்றன. உண்மையில், பூட்ஸ்டார்ப் முதலில் மொபைல் ஆகும் . மொபைல் ஃபர்ஸ்ட் ஸ்டைல்களை தனித்தனி கோப்புகளுக்குப் பதிலாக முழு நூலகத்திலும் காணலாம்.

சரியான ரெண்டரிங் மற்றும் டச் ஜூம் செய்வதை உறுதிசெய்ய , உங்கள் வில் வியூபோர்ட் மெட்டா டேக்கைச் சேர்க்கவும்<head> .

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noவியூபோர்ட் மெட்டா டேக்கில் சேர்ப்பதன் மூலம் மொபைல் சாதனங்களில் பெரிதாக்கும் திறன்களை முடக்கலாம் . இது ஜூம் செய்வதை முடக்குகிறது, அதாவது பயனர்கள் மட்டுமே ஸ்க்ரோல் செய்ய முடியும், மேலும் உங்கள் தளம் ஒரு நேட்டிவ் அப்ளிகேஷனைப் போலவே இருக்கும். ஒட்டுமொத்தமாக, எல்லா தளங்களிலும் இதைப் பரிந்துரைக்க மாட்டோம், எனவே எச்சரிக்கையுடன் பயன்படுத்தவும்!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

அச்சுக்கலை மற்றும் இணைப்புகள்

பூட்ஸ்டார்ப் அடிப்படை உலகளாவிய காட்சி, அச்சுக்கலை மற்றும் இணைப்பு பாணிகளை அமைக்கிறது. குறிப்பாக, நாங்கள்:

background-color: #fff;மீது அமைக்கவும்body
எங்கள் அச்சுக்கலை அடிப்படையாக @font-family-base, @font-size-base, மற்றும் பண்புக்கூறுகளைப் பயன்படுத்தவும்@line-height-base
உலகளாவிய இணைப்பு வண்ணத்தை அமைத்து, @link-colorஇணைப்பு அடிக்கோடிட்டுகளை மட்டும் பயன்படுத்தவும்:hover

இந்த பாணிகளை உள்ளே காணலாம் scaffolding.less.

Normalize.css

மேம்படுத்தப்பட்ட குறுக்கு உலாவி ரெண்டரிங்கிற்கு, நாங்கள் Normalize.css ஐப் பயன்படுத்துகிறோம், இது Nicolas Gallagher மற்றும் Jonathan Neal ஆகியோரின் திட்டமாகும் .

கொள்கலன்கள்

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

பதிலளிக்கக்கூடிய நிலையான அகல கொள்கலனுக்கு பயன்படுத்தவும் .container.

<div class="container">
  ...
</div>

உங்கள் .container-fluidவியூபோர்ட்டின் முழு அகலத்தையும் பரப்பி, முழு அகல கொள்கலனுக்குப் பயன்படுத்தவும்.

<div class="container-fluid">
  ...
</div>

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

அறிமுகம்

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

சரியான சீரமைப்பு மற்றும் திணிப்புக்காக வரிசைகள் .container(நிலையான அகலம்) அல்லது (முழு அகலம்) க்குள் வைக்கப்பட வேண்டும் ..container-fluid
நெடுவரிசைகளின் கிடைமட்ட குழுக்களை உருவாக்க வரிசைகளைப் பயன்படுத்தவும்.
உள்ளடக்கம் நெடுவரிசைகளுக்குள் வைக்கப்பட வேண்டும், மேலும் நெடுவரிசைகள் மட்டுமே வரிசைகளின் உடனடி குழந்தைகளாக இருக்கலாம்.
கிரிட் தளவமைப்புகளை விரைவாக உருவாக்குவதற்கு முன் வரையறுக்கப்பட்ட கிரிட் வகுப்புகள் .rowஉள்ளன .col-xs-4. அதிக சொற்பொருள் தளவமைப்புகளுக்கு குறைவான மிக்ஸின்களையும் பயன்படுத்தலாம்.
நெடுவரிசைகள் மூலம் gutters (நெடுவரிசை உள்ளடக்கம் இடையே இடைவெளிகளை) உருவாக்குகின்றன padding. அந்த திணிப்பு முதல் மற்றும் கடைசி நெடுவரிசைக்கான வரிசைகளில் எதிர்மறை விளிம்பு மூலம் .rows இல் ஈடுசெய்யப்படுகிறது.
எதிர்மறை விளிம்பு என்பது கீழே உள்ள எடுத்துக்காட்டுகள் ஏன் வெளிவருகின்றன. கட்டம் நெடுவரிசைகளில் உள்ள உள்ளடக்கம் கட்டம் அல்லாத உள்ளடக்கத்துடன் வரிசையாக இருக்கும்.
நீங்கள் ஸ்பான் செய்ய விரும்பும் பன்னிரெண்டு நெடுவரிசைகளின் எண்ணிக்கையைக் குறிப்பிடுவதன் மூலம் கட்ட நெடுவரிசைகள் உருவாக்கப்படுகின்றன. எடுத்துக்காட்டாக, மூன்று சம நெடுவரிசைகள் மூன்றைப் பயன்படுத்தும் .col-xs-4.
ஒரு வரிசையில் 12க்கும் மேற்பட்ட நெடுவரிசைகள் இருந்தால், கூடுதல் நெடுவரிசைகளின் ஒவ்வொரு குழுவும், ஒரு யூனிட்டாக, ஒரு புதிய வரியில் மடிக்கப்படும்.
பிரேக்பாயிண்ட் அளவுகளை விட அதிகமாகவோ அல்லது சமமாகவோ திரை அகலங்களைக் கொண்ட சாதனங்களுக்கு கிரிட் வகுப்புகள் பொருந்தும், மேலும் சிறிய சாதனங்களை இலக்காகக் கொண்ட கிரிட் வகுப்புகளை மேலெழுதவும். எனவே, எ.கா. எந்த .col-md-*வகுப்பையும் ஒரு தனிமத்திற்குப் பயன்படுத்துவது நடுத்தர சாதனங்களில் அதன் ஸ்டைலிங்கை மட்டும் பாதிக்காது ஆனால் ஒரு .col-lg-*வகுப்பு இல்லாத பெரிய சாதனங்களிலும்.

உங்கள் குறியீட்டில் இந்தக் கொள்கைகளைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டுகளைப் பாருங்கள்.

ஊடக கேள்விகள்

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

max-widthகுறுகலான சாதனங்களுக்கு CSSஐ வரம்பிட , இந்த மீடியா வினவல்களை நாங்கள் அவ்வப்போது விரிவுபடுத்துகிறோம் .

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

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

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

	கூடுதல் சிறிய சாதனங்கள் தொலைபேசிகள் (<768px)	சிறிய சாதனங்கள் மாத்திரைகள் (≥768px)	நடுத்தர சாதனங்கள் டெஸ்க்டாப்புகள் (≥992px)	பெரிய சாதனங்கள் டெஸ்க்டாப்புகள் (≥1200px)
கட்ட நடத்தை	எல்லா நேரங்களிலும் கிடைமட்டமாக இருக்கும்	தொடக்க புள்ளிகளுக்கு மேல் கிடைமட்டமாக சுருக்கப்பட்டது
கொள்கலன் அகலம்	எதுவுமில்லை (தானியங்கு)	750px	970px	1170px
வகுப்பு முன்னொட்டு	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# நெடுவரிசைகள்	12
நெடுவரிசை அகலம்	ஆட்டோ	~62px	~81px	~97px
கால்வாய் அகலம்	30px (ஒரு நெடுவரிசையின் ஒவ்வொரு பக்கத்திலும் 15px)
நெஸ்டபிள்	ஆம்
ஆஃப்செட்டுகள்	ஆம்
நெடுவரிசை வரிசைப்படுத்துதல்	ஆம்

உதாரணம்: அடுக்கப்பட்ட-கிடைமட்ட

கிரிட் வகுப்புகளின் ஒரு தொகுப்பைப் பயன்படுத்தி .col-md-*, டெஸ்க்டாப் (நடுத்தர) சாதனங்களில் கிடைமட்டமாக மாறுவதற்கு முன், மொபைல் சாதனங்கள் மற்றும் டேப்லெட் சாதனங்களில் (கூடுதல் சிறியது முதல் சிறிய வரம்பு வரை) அடுக்கப்பட்ட அடிப்படை கட்ட அமைப்பை நீங்கள் உருவாக்கலாம். கட்ட நெடுவரிசைகளை ஏதேனும் ஒன்றில் வைக்கவும் .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

எடுத்துக்காட்டு: திரவ கொள்கலன்

உங்கள் வெளிப்புறத்தை .containerக்கு மாற்றுவதன் மூலம் எந்த நிலையான அகல கட்ட தளவமைப்பையும் முழு அகல தளவமைப்பாக மாற்றவும் .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

எடுத்துக்காட்டு: மொபைல் மற்றும் டெஸ்க்டாப்

உங்கள் நெடுவரிசைகள் சிறிய சாதனங்களில் அடுக்கி வைக்க வேண்டாமா? .col-xs-* .col-md-*உங்கள் நெடுவரிசைகளில் சேர்ப்பதன் மூலம் கூடுதல் சிறிய மற்றும் நடுத்தர சாதன கட்ட வகுப்புகளைப் பயன்படுத்தவும் . இவை அனைத்தும் எவ்வாறு செயல்படுகின்றன என்பதற்கான சிறந்த யோசனைக்கு கீழே உள்ள உதாரணத்தைப் பார்க்கவும்.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

எடுத்துக்காட்டு: மொபைல், டேப்லெட், டெஸ்க்டாப்

.col-sm-*டேப்லெட் வகுப்புகளுடன் இன்னும் அதிக ஆற்றல்மிக்க மற்றும் சக்திவாய்ந்த தளவமைப்புகளை உருவாக்குவதன் மூலம் முந்தைய உதாரணத்தை உருவாக்கவும் .

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

எடுத்துக்காட்டு: நெடுவரிசை மடக்குதல்

ஒரு வரிசையில் 12க்கும் மேற்பட்ட நெடுவரிசைகள் இருந்தால், கூடுதல் நெடுவரிசைகளின் ஒவ்வொரு குழுவும், ஒரு யூனிட்டாக, ஒரு புதிய வரியில் மடிக்கப்படும்.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 முதல், இந்த 4-நெடுவரிசை-அகலமான பகுதி ஒரு புதிய வரியில் ஒரு தொடர்ச்சியான அலகு என மூடப்பட்டிருக்கும்.

.col-xs-6
புதிய வரியில் அடுத்தடுத்த நெடுவரிசைகள் தொடரும்.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

பதிலளிக்கக்கூடிய நெடுவரிசை மீட்டமைப்புகள்

நான்கு அடுக்கு கட்டங்கள் இருப்பதால், சில பிரேக் பாயின்ட்களில், ஒன்று மற்றொன்றை விட உயரமாக இருப்பதால், உங்கள் நெடுவரிசைகள் சரியாகத் தெரியவில்லை. அதைச் சரிசெய்ய, a .clearfixமற்றும் எங்கள் பதிலளிக்கக்கூடிய பயன்பாட்டு வகுப்புகளின் கலவையைப் பயன்படுத்தவும் .

.col-xs-6 .col-sm-3
உங்கள் வியூபோர்ட்டின் அளவை மாற்றவும் அல்லது உதாரணத்திற்கு உங்கள் மொபைலில் பார்க்கவும்.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

பதிலளிக்கக்கூடிய பிரேக் பாயிண்ட்களில் நெடுவரிசையை சுத்தம் செய்வதோடு கூடுதலாக, நீங்கள் ஆஃப்செட்கள், புஷ்கள் அல்லது இழுப்புகளை மீட்டமைக்க வேண்டியிருக்கலாம் . கட்டம் எடுத்துக்காட்டில் இதை செயலில் பார்க்கவும் .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

சாக்கடைகளை அகற்றவும்

ஒரு வரிசையில் இருந்து சாக்கடைகளை அகற்றவும், அது .row-no-guttersவகுப்பில் உள்ள நெடுவரிசைகளாகும்.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

நெடுவரிசைகளை ஈடுசெய்கிறது

.col-md-offset-*வகுப்புகளைப் பயன்படுத்தி நெடுவரிசைகளை வலது பக்கம் நகர்த்தவும் . இந்த வகுப்புகள் நெடுவரிசையின் இடது விளிம்பை நெடுவரிசைகளால் அதிகரிக்கின்றன *. எடுத்துக்காட்டாக, நான்கு நெடுவரிசைகளுக்கு மேல் .col-md-offset-4நகரும் ..col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0வகுப்புகளுடன் குறைந்த கட்ட அடுக்குகளிலிருந்து ஆஃப்செட்களையும் நீங்கள் மேலெழுதலாம் .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

கூடு கட்டும் நெடுவரிசைகள்

உங்கள் உள்ளடக்கத்தை இயல்புநிலை கட்டத்துடன் இணைக்க, ஏற்கனவே உள்ள நெடுவரிசையில் புதிய .rowமற்றும் நெடுவரிசைகளின் தொகுப்பைச் சேர்க்கவும் . உள்ளமைக்கப்பட்ட வரிசைகளில் 12 அல்லது அதற்கும் குறைவான நெடுவரிசைகள் சேர்க்கப்பட வேண்டும் (கிடைக்கும் 12 நெடுவரிசைகளையும் நீங்கள் பயன்படுத்த வேண்டிய அவசியமில்லை)..col-sm-*.col-sm-*

நிலை 1: .col-sm-9

நிலை 2: .col-xs-8 .col-sm-6

நிலை 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

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

எங்களின் உள்ளமைக்கப்பட்ட கிரிட் நெடுவரிசைகள் .col-md-push-*மற்றும் .col-md-pull-*மாற்றியமைக்கும் வகுப்புகளின் வரிசையை எளிதாக மாற்றவும்.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

குறைவான கலவைகள் மற்றும் மாறிகள்

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

மாறிகள்

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

கலவைகள்

தனிப்பட்ட கட்ட நெடுவரிசைகளுக்கான சொற்பொருள் CSS ஐ உருவாக்க, கிரிட் மாறிகளுடன் இணைந்து மிக்சின்கள் பயன்படுத்தப்படுகின்றன.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

எடுத்துக்காட்டு பயன்பாடு

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

தலைப்புகள்

<h1>மூலம் அனைத்து HTML தலைப்புகளும் <h6>கிடைக்கின்றன. நீங்கள் தலைப்பின் எழுத்துரு ஸ்டைலிங்கைப் பொருத்த விரும்பினாலும், உங்கள் உரை இன்லைனில் காட்டப்பட வேண்டும் என்பதற்காக, வகுப்புகள் .h1மூலம் கிடைக்கும்..h6

h1. பூட்ஸ்ட்ராப் தலைப்பு	அரை போல்டு 36px
h2. பூட்ஸ்ட்ராப் தலைப்பு	அரை போல்டு 30px
h3. பூட்ஸ்ட்ராப் தலைப்பு	அரை போல்டு 24px
h4. பூட்ஸ்ட்ராப் தலைப்பு	அரை போல்டு 18px
h5. பூட்ஸ்ட்ராப் தலைப்பு	அரை போல்டு 14px
h6. பூட்ஸ்ட்ராப் தலைப்பு	அரை போல்டு 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>பொதுவான குறிச்சொல் அல்லது வகுப்பைக் கொண்டு எந்த தலைப்பிலும் இலகுவான, இரண்டாம் நிலை உரையை உருவாக்கவும் .small.

h1. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h2. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h3. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h4. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h5. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h6. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

உடல் நகல்

பூட்ஸ்டார்ப்பின் உலகளாவிய இயல்புநிலை 14pxfont-size ஆகும் , இதில் 1.428 . இது அனைத்து பத்திகளுக்கும் பொருந்தும். கூடுதலாக, (பத்திகள்) அவற்றின் கணக்கிடப்பட்ட வரி உயரத்தில் பாதியின் கீழ் விளிம்பைப் பெறுகின்றன (இயல்புநிலையாக 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 : @font-size-baseமற்றும் @line-height-base. முதலாவது முழுவதும் பயன்படுத்தப்படும் அடிப்படை எழுத்துரு அளவு மற்றும் இரண்டாவது அடிப்படை வரி உயரம். எங்கள் வகை மற்றும் பலவற்றின் விளிம்புகள், திணிப்புகள் மற்றும் வரி உயரங்களை உருவாக்க அந்த மாறிகள் மற்றும் சில எளிய கணிதத்தைப் பயன்படுத்துகிறோம். அவற்றைத் தனிப்பயனாக்குங்கள் மற்றும் பூட்ஸ்டார்ப் மாற்றியமைக்கிறது.

இன்லைன் உரை கூறுகள்

குறிக்கப்பட்ட உரை

மற்றொரு சூழலில் உரையின் தொடர்ச்சியின் காரணமாக அதைத் தனிப்படுத்த, <mark>குறிச்சொல்லைப் பயன்படுத்தவும்.

நீங்கள் குறி குறிச்சொல்லைப் பயன்படுத்தலாம்முன்னிலைப்படுத்தஉரை.

You can use the mark tag to <mark>highlight</mark> text.

நீக்கப்பட்ட உரை

நீக்கப்பட்ட உரையின் தொகுதிகளைக் குறிக்க, <del>குறிச்சொல்லைப் பயன்படுத்தவும்.

~~இந்த உரையின் வரியானது நீக்கப்பட்ட உரையாகக் கருதப்படும்.~~

<del>This line of text is meant to be treated as deleted text.</del>

ஸ்டிரைக்த்ரூ உரை

இனி பொருந்தாத உரைத் தொகுதிகளைக் குறிக்க, <s>குறிச்சொல்லைப் பயன்படுத்தவும்.

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

<s>This line of text is meant to be treated as no longer accurate.</s>

உரை செருகப்பட்டது

ஆவணத்தில் சேர்த்தல்களைக் குறிக்க, <ins>குறிச்சொல்லைப் பயன்படுத்தவும்.

இந்த உரையின் வரி ஆவணத்திற்கு கூடுதலாகக் கருதப்படும்.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

அடிக்கோடிட்ட உரை

உரையை அடிக்கோடிட, <u>குறிச்சொல்லைப் பயன்படுத்தவும்.

இந்த உரையின் வரி அடிக்கோடிட்டவாறு வழங்கப்படும்

<u>This line of text will render as underlined</u>

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

சிறிய உரை

இன்லைன் அல்லது உரையின் தொகுதிகளை வலியுறுத்துவதற்கு <small>, பெற்றோரின் அளவு 85% அளவில் உரையை அமைக்க குறிச்சொல்லைப் பயன்படுத்தவும். font-sizeஉள்ளமைக்கப்பட்ட உறுப்புகளுக்குத் தலைப்புக் கூறுகள் அவற்றின் சொந்தத்தைப் பெறுகின்றன <small>.

நீங்கள் மாற்றாக .smallஏதேனும் ஒரு இன்லைன் உறுப்பைப் பயன்படுத்தலாம் <small>.

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

<small>This line of text is meant to be treated as fine print.</small>

தடித்த

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

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

<strong>rendered as bold text</strong>

சாய்வு

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

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

<em>rendered as italicized text</em>

மாற்று கூறுகள்

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

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

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

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

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

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

நியாயப்படுத்தப்பட்ட உரை.

மடக்கு உரை இல்லை.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

உருமாற்ற வகுப்புகள்

உரை மூலதன வகுப்புகளுடன் உரையை கூறுகளாக மாற்றவும்.

சிறிய எழுத்து.

பெரிய எழுத்து.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

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

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

அடிப்படை சுருக்கம்

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

<abbr title="attribute">attr</abbr>

ஆரம்பநிலை

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

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

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

முகவரிகள்

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

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

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

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

தடைகள்

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

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

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

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

ஒரு தரநிலையில் எளிமையான மாறுபாடுகளுக்கான நடை மற்றும் உள்ளடக்க மாற்றங்கள் <blockquote>.

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

<footer>மூலத்தை அடையாளம் காண a ஐ சேர்க்கவும் . மூலப் பணியின் பெயரை உள்ளிடவும் <cite>.

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

மூலத் தலைப்பில் பிரபலமான ஒருவர்

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

.blockquote-reverseவலப்புறம் சீரமைக்கப்பட்ட உள்ளடக்கத்துடன் பிளாக்மேட்டைச் சேர்க்கவும் .

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

மூலத் தலைப்பில் பிரபலமான ஒருவர்

<blockquote class="blockquote-reverse">
  ...
</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="list-unstyled">
  <li>...</li>
</ul>

கோட்டில்

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

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

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

விளக்கம்

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

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

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

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

விதிமுறைகளையும் விளக்கங்களையும் <dl>வரிசையாக அருகருகே உருவாக்கவும். இயல்புநிலை கள் போல அடுக்கி வைக்கத் தொடங்குகிறது <dl>, ஆனால் navbar விரிவடையும் போது, இவற்றைச் செய்யவும்.

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

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

தானாக துண்டித்தல்

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

கோட்டில்

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

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

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

பயனர் உள்ளீடு

<kbd>பொதுவாக விசைப்பலகை வழியாக உள்ளிடப்படும் உள்ளீட்டைக் குறிக்க பயன்படுத்தவும் .

கோப்பகங்களை மாற்ற, கோப்பகத்தின் cdபெயரைத் தொடர்ந்து தட்டச்சு செய்யவும்.
அமைப்புகளைத் திருத்த, அழுத்தவும் ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

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

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

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

மாறிகள்

மாறிகளைக் குறிக்க, <var>குறிச்சொல்லைப் பயன்படுத்தவும்.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

மாதிரி வெளியீடு

ஒரு நிரலிலிருந்து தொகுதிகள் மாதிரி வெளியீட்டைக் <samp>குறிக்க குறிச்சொல்லைப் பயன்படுத்தவும்.

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

<samp>This text is meant to be treated as sample output from a computer program.</samp>

அடிப்படை உதாரணம்

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

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

<table class="table">
  ...
</table>

கோடிட்ட வரிசைகள்

.table-stripedஉள்ள எந்த அட்டவணை வரிசையிலும் வரிக்குதிரை-கோட்டை சேர்க்க பயன்படுத்தவும் <tbody>.

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

:nth-childஇன்டர்நெட் எக்ஸ்ப்ளோரர் 8 இல் கிடைக்காத CSS தேர்வி மூலம் கோடிட்ட அட்டவணைகள் வடிவமைக்கப்பட்டுள்ளன .

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

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

விளிம்பு அட்டவணை

.table-borderedஅட்டவணை மற்றும் கலங்களின் அனைத்துப் பக்கங்களிலும் பார்டர்களைச் சேர்க்கவும் .

#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
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 table-condensed">
  ...
</table>

சூழ்நிலை வகுப்புகள்

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

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

#	நெடுவரிசை தலைப்பு	நெடுவரிசை தலைப்பு	நெடுவரிசை தலைப்பு
1	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
2	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
3	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
4	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
5	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
6	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
7	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
8	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்
9	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்	நெடுவரிசை உள்ளடக்கம்

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

உதவி தொழில்நுட்பங்களுக்கு அர்த்தத்தை வெளிப்படுத்துதல்

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

பதிலளிக்கக்கூடிய அட்டவணைகள்

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

செங்குத்து கிளிப்பிங்/துண்டிப்பு

பதிலளிக்கக்கூடிய அட்டவணைகள் overflow-y: hidden, அட்டவணையின் கீழ் அல்லது மேல் விளிம்புகளுக்கு அப்பால் செல்லும் எந்த உள்ளடக்கத்தையும் கிளிப் செய்யும். குறிப்பாக, இது கீழ்தோன்றும் மெனுக்கள் மற்றும் பிற மூன்றாம் தரப்பு விட்ஜெட்களை அகற்றும்.

பயர்பாக்ஸ் மற்றும் புலங்கள்

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

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

மேலும் தகவலுக்கு, இந்த ஸ்டாக் ஓவர்ஃப்ளோ பதிலைப் படிக்கவும் .

#	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு
1	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்
2	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்
3	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்

#	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு
1	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்
2	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்
3	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

அடிப்படை உதாரணம்

தனிப்பட்ட படிவக் கட்டுப்பாடுகள் தானாகவே சில உலகளாவிய ஸ்டைலிங்கைப் பெறுகின்றன. அனைத்து உரை <input>, <textarea>மற்றும் <select>உறுப்புகள் இயல்புநிலையாக .form-controlஅமைக்கப்படும் . உகந்த இடைவெளிக்கு width: 100%;லேபிள்கள் மற்றும் கட்டுப்பாடுகளை மடிக்கவும்..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

உள்ளீட்டு குழுக்களுடன் படிவக் குழுக்களைக் கலக்க வேண்டாம்

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

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

இடது-சீரமைக்கப்பட்ட மற்றும் இன்லைன்-பிளாக் கட்டுப்பாடுகளுக்கு உங்கள் படிவத்தில் (இது ஒரு ) ஆக .form-inlineஇருக்க வேண்டியதில்லை . குறைந்தபட்சம் 768px அகலம் கொண்ட வியூபோர்ட்களில் உள்ள படிவங்களுக்கு மட்டுமே இது பொருந்தும்.<form>

தனிப்பயன் அகலங்கள் தேவைப்படலாம்

உள்ளீடுகள் மற்றும் width: 100%;தேர்வுகள் பூட்ஸ்டார்ப்பில் இயல்பாகவே பயன்படுத்தப்படும். இன்லைன் படிவங்களுக்குள், width: auto;பல கட்டுப்பாடுகள் ஒரே வரியில் இருக்கும்படி மீட்டமைக்கிறோம். உங்கள் தளவமைப்பைப் பொறுத்து, கூடுதல் தனிப்பயன் அகலங்கள் தேவைப்படலாம்.

எப்போதும் லேபிள்களைச் சேர்க்கவும்

ஒவ்வொரு உள்ளீட்டிற்கும் ஒரு லேபிளை நீங்கள் சேர்க்கவில்லை என்றால், உங்கள் படிவங்களில் ஸ்கிரீன் ரீடர்கள் சிக்கலை எதிர்கொள்வார்கள். .sr-onlyஇந்த இன்லைன் படிவங்களுக்கு, வகுப்பைப் பயன்படுத்தி லேபிள்களை மறைக்கலாம் . aria-label, aria-labelledbyஅல்லது titleபண்புக்கூறு போன்ற உதவித் தொழில்நுட்பங்களுக்கான லேபிளை வழங்குவதற்கு மேலும் மாற்று முறைகள் உள்ளன . இவை எதுவும் இல்லை என்றால், ஸ்கிரீன் ரீடர்கள் பண்புக்கூறைப் பயன்படுத்தலாம் , ஆனால் மற்ற லேபிளிங் முறைகளுக்கு மாற்றாகப் பயன்படுத்துவது பரிந்துரைக்கப்படவில்லை placeholderஎன்பதை நினைவில் கொள்ளவும் .placeholder

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

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

படிவத்தில் சேர்ப்பதன் மூலம் லேபிள்கள் மற்றும் படிவக் கட்டுப்பாடுகளின் குழுக்களை கிடைமட்ட அமைப்பில் சீரமைக்க பூட்ஸ்டார்ப்பின் முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளைப் பயன்படுத்தவும் .form-horizontal(இது ஒரு . ஆக இருக்க வேண்டியதில்லை <form>). அவ்வாறு செய்வதால் .form-groupகள் கட்டம் வரிசைகளாக செயல்படும், எனவே தேவை இல்லை .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

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

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

உள்ளீடுகள்

மிகவும் பொதுவான படிவக் கட்டுப்பாடு, உரை அடிப்படையிலான உள்ளீட்டு புலங்கள். அனைத்து HTML5 வகைகளுக்கான ஆதரவையும் உள்ளடக்கியது: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telமற்றும் color.

வகை அறிவிப்பு தேவை

typeஉள்ளீடுகள் சரியாக அறிவிக்கப்பட்டால் மட்டுமே முழுமையாக வடிவமைக்கப்படும் .

<input type="text" class="form-control" placeholder="Text input">

உள்ளீட்டு குழுக்கள்

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

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

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

<textarea class="form-control" rows="3"></textarea>

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

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

முடக்கப்பட்ட தேர்வுப்பெட்டிகள் மற்றும் ரேடியோக்கள் ஆதரிக்கப்படுகின்றன, ஆனால் பெற்றோரின் ஹோவரில் "அனுமதிக்கப்படாத" கர்சரை வழங்க, நீங்கள் பெற்றோருக்கு வகுப்பைச் <label>சேர்க்க வேண்டும் , , , அல்லது ..disabled.radio.radio-inline.checkbox.checkbox-inline

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

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

விருப்பம் இரண்டு முடக்கப்பட்டுள்ளது

விருப்பம் இரண்டு வேறு ஏதாவது இருக்கலாம், அதைத் தேர்ந்தெடுப்பது விருப்பம் ஒன்றைத் தேர்வுநீக்கும்

விருப்பம் மூன்று முடக்கப்பட்டுள்ளது

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

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

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

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

லேபிள் உரை இல்லாத செக்பாக்ஸ்கள் மற்றும் ரேடியோக்கள்

க்குள் உரை இல்லை என்றால் <label>, உள்ளீடு நீங்கள் எதிர்பார்ப்பது போல் அமைந்திருக்கும். தற்போது இன்லைன் அல்லாத செக்பாக்ஸ்கள் மற்றும் ரேடியோக்களில் மட்டுமே வேலை செய்கிறது. aria-labelஉதவி தொழில்நுட்பங்களுக்கு (உதாரணமாக, பயன்படுத்தி ) சில வகையான லேபிளை இன்னும் வழங்க நினைவில் கொள்ளுங்கள் .

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

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

border-radiusபல நேட்டிவ் தேர்ந்தெடுக்கப்பட்ட மெனுக்கள்—அதாவது Safari மற்றும் Chrome இல்—வட்டமான மூலைகளைக் கொண்டிருப்பதைக் கவனிக்கவும், அவை பண்புகள் மூலம் மாற்ற முடியாது .

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

பண்புக்கூறுடன் கூடிய <select>கட்டுப்பாடுகளுக்கு, multipleஇயல்புநிலையாக பல விருப்பங்கள் காட்டப்படும்.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

நிலையான கட்டுப்பாடு

ஒரு படிவத்தில் ஒரு படிவ லேபிளுக்கு அடுத்ததாக எளிய உரையை வைக்க வேண்டியிருக்கும் போது, .form-control-staticவகுப்பைப் பயன்படுத்தவும் <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

கவனம் நிலை

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

டெமோ `:focus`மாநிலம்

மேலே உள்ள எடுத்துக்காட்டு உள்ளீடு, எங்கள் ஆவணத்தில் தனிப்பயன் பாணிகளைப் பயன்படுத்தி :focus, ஒரு .form-control.

ஊனமுற்ற நிலை

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

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

முடக்கப்பட்ட புலங்கள்

உள்ள அனைத்து கட்டுப்பாடுகளையும் ஒரே நேரத்தில் முடக்க , disabledபண்புக்கூறைச் சேர்க்கவும் .<fieldset><fieldset>

இணைப்பு செயல்பாடு பற்றி எச்சரிக்கை`<a>`

முன்னிருப்பாக, உலாவிகளில் உள்ள அனைத்து நேட்டிவ் ஃபார்ம் கட்டுப்பாடுகளையும் ( <input>, <select>மற்றும் <button>உறுப்புகள்) <fieldset disabled>முடக்கப்பட்டதாகக் கருதி, விசைப்பலகை மற்றும் மவுஸ் இரண்டின் தொடர்புகளைத் தடுக்கும். இருப்பினும், உங்கள் படிவமும் <a ... class="btn btn-*">கூறுகளை உள்ளடக்கியிருந்தால், இவற்றின் பாணி மட்டுமே வழங்கப்படும் pointer-events: none. பொத்தான்களுக்கான முடக்கப்பட்ட நிலை பற்றிய பிரிவில் குறிப்பிட்டுள்ளபடி (குறிப்பாக ஆங்கர் உறுப்புகளுக்கான துணைப் பிரிவில்), இந்த CSS சொத்து இன்னும் தரப்படுத்தப்படவில்லை மற்றும் Opera 18 மற்றும் அதற்குக் கீழே உள்ள அல்லது Internet Explorer 11 இல் முழுமையாக ஆதரிக்கப்படவில்லை, மேலும் வெற்றி பெற்றது விசைப்பலகை பயனர்கள் இந்த இணைப்புகளில் கவனம் செலுத்தவோ அல்லது செயல்படுத்தவோ முடியாது. எனவே பாதுகாப்பாக இருக்க, அத்தகைய இணைப்புகளை முடக்க தனிப்பயன் JavaScript ஐப் பயன்படுத்தவும்.

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

disabledபூட்ஸ்டார்ப் அனைத்து உலாவிகளிலும் இந்த பாணிகளைப் பயன்படுத்தும் போது, Internet Explorer 11 மற்றும் அதற்குக் கீழே உள்ள பண்புக்கூறை முழுமையாக ஆதரிக்காது <fieldset>. இந்த உலாவிகளில் புலத்தொகுப்பை முடக்க தனிப்பயன் JavaScript ஐப் பயன்படுத்தவும்.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

படிக்க மட்டும் நிலை

readonlyஉள்ளீட்டின் மதிப்பை மாற்றுவதைத் தடுக்க, உள்ளீட்டில் பூலியன் பண்புக்கூறைச் சேர்க்கவும் . படிக்க-மட்டும் உள்ளீடுகள் இலகுவாகத் தோன்றும் (முடக்கப்பட்ட உள்ளீடுகளைப் போலவே), ஆனால் நிலையான கர்சரைத் தக்கவைத்துக்கொள்கின்றன.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

உதவி உரை

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

படிவக் கட்டுப்பாடுகளுடன் உதவி உரையை இணைத்தல்

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

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

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

பூட்ஸ்டார்ப் படிவக் கட்டுப்பாடுகளில் பிழை, எச்சரிக்கை மற்றும் வெற்றி நிலைகளுக்கான சரிபார்ப்பு பாணிகளை உள்ளடக்கியது. பயன்படுத்த, சேர்க்க .has-warning, .has-error, அல்லது .has-successமூல உறுப்பில். ஏதேனும் .control-label, .form-control, மற்றும் .help-blockஅந்த உறுப்புக்குள் சரிபார்ப்பு பாணிகளைப் பெறும்.

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

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

மாநிலத்தின் மாற்றுக் குறிப்பும் வழங்கப்பட்டுள்ளதை உறுதிசெய்யவும். எடுத்துக்காட்டாக, படிவக் கட்டுப்பாட்டின் உரையிலேயே நிலை பற்றிய குறிப்பை நீங்கள் சேர்க்கலாம் <label>(பின்வரும் குறியீட்டு எடுத்துக்காட்டில் உள்ளது போல்), க்ளிஃபிகானைச்.sr-only சேர்க்கலாம் ( வகுப்பைப் பயன்படுத்தி பொருத்தமான மாற்று உரையுடன் - கிளிஃபிகான் எடுத்துக்காட்டுகளைப் பார்க்கவும் ) அல்லது வழங்குவதன் மூலம் கூடுதல் உதவி உரை தொகுதி. குறிப்பாக உதவி தொழில்நுட்பங்களுக்கு, தவறான படிவக் கட்டுப்பாடுகளும் ஒரு aria-invalid="true"பண்புக்கூறை ஒதுக்கலாம்.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

விருப்ப ஐகான்களுடன்

.has-feedbackகூடுதலாக மற்றும் சரியான ஐகானுடன் விருப்பமான பின்னூட்ட ஐகான்களையும் நீங்கள் சேர்க்கலாம் .

கருத்து ஐகான்கள் உரை <input class="form-control">கூறுகளுடன் மட்டுமே செயல்படும்.

சின்னங்கள், லேபிள்கள் மற்றும் உள்ளீட்டு குழுக்கள்

லேபிள் இல்லாத உள்ளீடுகளுக்கும் வலதுபுறத்தில் செருகு நிரலைக் கொண்ட உள்ளீட்டு குழுக்களுக்கும் பின்னூட்ட ஐகான்களை கைமுறையாக நிலைநிறுத்துவது அவசியம் . அணுகல்தன்மை காரணங்களுக்காக அனைத்து உள்ளீடுகளுக்கும் லேபிள்களை வழங்குமாறு வலுவாக ஊக்குவிக்கப்படுகிறீர்கள். லேபிள்கள் காட்டப்படுவதைத் தடுக்க விரும்பினால், .sr-onlyவகுப்பில் அவற்றை மறைக்கவும். நீங்கள் லேபிள்கள் இல்லாமல் செய்ய வேண்டும் என்றால் top, பின்னூட்ட ஐகானின் மதிப்பைச் சரிசெய்யவும். rightஉள்ளீட்டு குழுக்களுக்கு, உங்கள் addon அகலத்தைப் பொறுத்து மதிப்பை பொருத்தமான பிக்சல் மதிப்புக்கு சரிசெய்யவும் .

உதவி தொழில்நுட்பங்களுக்கு ஐகானின் அர்த்தத்தை தெரிவிக்கிறது

ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்கள் ஐகானின் பொருளைச் சரியாக வெளிப்படுத்துவதை உறுதிசெய்ய, கூடுதல் மறைக்கப்பட்ட உரை .sr-onlyவகுப்பில் சேர்க்கப்பட வேண்டும் மற்றும் அது பயன்படுத்துவதற்குத் தொடர்புடைய படிவக் கட்டுப்பாட்டுடன் வெளிப்படையாக இணைக்கப்பட வேண்டும் aria-describedby. <label>மாற்றாக, படிவக் கட்டுப்பாட்டுடன் தொடர்புடைய உண்மையான உரையை மாற்றுவது போன்ற பொருள் (உதாரணமாக, ஒரு குறிப்பிட்ட உரை நுழைவுப் புலத்திற்கான எச்சரிக்கை உள்ளது என்பது) வேறு வடிவத்தில் தெரிவிக்கப்படுவதை உறுதிசெய்யவும் .

பின்வரும் எடுத்துக்காட்டுகள் ஏற்கனவே அந்தந்த படிவக் கட்டுப்பாடுகளின் சரிபார்ப்பு நிலையை உரையிலேயே குறிப்பிட்டிருந்தாலும், <label>மேலே உள்ள நுட்பம் ( .sr-onlyஉரை மற்றும் aria-describedby) விளக்க நோக்கங்களுக்காக சேர்க்கப்பட்டுள்ளது.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

கிடைமட்ட மற்றும் இன்லைன் வடிவங்களில் விருப்ப ஐகான்கள்

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

மறைக்கப்பட்ட `.sr-only`லேபிள்களுடன் விருப்ப ஐகான்கள்

.sr-onlyபடிவக் கட்டுப்பாட்டை மறைக்க நீங்கள் வகுப்பைப் பயன்படுத்தினால் <label>(பண்பு போன்ற பிற லேபிளிங் விருப்பங்களைப் பயன்படுத்துவதற்குப் பதிலாக aria-label), பூட்ஸ்டார்ப் ஐகானைச் சேர்த்தவுடன் அதன் நிலையை தானாகவே சரிசெய்யும்.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

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

போன்ற வகுப்புகளைப் பயன்படுத்தி உயரங்களை அமைக்கவும் .input-lg, மற்றும் கட்ட நெடுவரிசை வகுப்புகளைப் பயன்படுத்தி அகலங்களை அமைக்கவும் .col-lg-*.

உயர அளவு

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

கிடைமட்ட வடிவம் குழு அளவுகள்

விரைவாக அளவு லேபிள்கள் மற்றும் படிவக் கட்டுப்பாடுகளைச் .form-horizontalசேர்ப்பதன் மூலம் .form-group-lgஅல்லது .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

நெடுவரிசையின் அளவு

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

பொத்தான் குறிச்சொற்கள்

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

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

சூழல் சார்ந்த பயன்பாடு

<a>பொத்தான் வகுப்புகள் மற்றும் <button>உறுப்புகளைப் பயன்படுத்த முடியும் என்றாலும் , <button>எங்கள் nav மற்றும் navbar கூறுகளுக்குள் உறுப்புகள் மட்டுமே ஆதரிக்கப்படும்.

இணைப்புகள் பொத்தான்களாக செயல்படுகின்றன

உறுப்புகள் <a>பொத்தான்களாகச் செயல்படப் பயன்படுத்தப்பட்டால் - தற்போதைய பக்கத்தில் உள்ள மற்றொரு ஆவணம் அல்லது பிரிவிற்குச் செல்வதற்குப் பதிலாக, பக்க செயல்பாடுகளைத் தூண்டுகிறது - அவற்றிற்கும் பொருத்தமானது கொடுக்கப்பட வேண்டும் role="button".

குறுக்கு உலாவி ரெண்டரிங்

ஒரு சிறந்த நடைமுறையாக, கிராஸ்-பிரவுசர் ரெண்டரிங் பொருந்துவதை உறுதிசெய்ய , முடிந்தவரை உறுப்பைப் பயன்படுத்த பரிந்துரைக்கிறோம் .<button>

மற்றவற்றுடன் , பயர்பாக்ஸ் <30 இல் ஒரு பிழை உள்ளதுline-height , இது -அடிப்படையிலான பொத்தான்களை அமைப்பதைத் தடுக்கிறது <input>, இதனால் அவை பயர்பாக்ஸில் உள்ள மற்ற பொத்தான்களின் உயரத்துடன் சரியாகப் பொருந்தவில்லை.

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

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

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

உதவி தொழில்நுட்பங்களுக்கு அர்த்தத்தை வெளிப்படுத்துதல்

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

அளவுகள்

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

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

செயலில் உள்ள நிலை

செயலில் இருக்கும் போது பொத்தான்கள் அழுத்தப்பட்டதாகத் தோன்றும் (இருண்ட பின்னணி, இருண்ட பார்டர் மற்றும் இன்செட் நிழலுடன்). உறுப்புகளுக்கு, இது <button>வழியாக செய்யப்படுகிறது :active. <a>உறுப்புகளுக்கு, இது .active. இருப்பினும், நீங்கள் செயலில் உள்ள நிலையை நிரல்ரீதியாக நகலெடுக்க வேண்டுமானால் , நீங்கள் s .activeஇல் பயன்படுத்தலாம் (மற்றும் பண்புக்கூறு அடங்கும்).<button>aria-pressed="true"

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

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

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

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

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

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

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

ஊனமுற்ற நிலை

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

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

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

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

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

disabledஇன் , இன்டர்நெட் எக்ஸ்ப்ளோரர் 9 மற்றும் அதற்குக் கீழே உள்ள பண்புக்கூறை நீங்கள் சேர்த்தால், <button>எங்களால் சரிசெய்ய முடியாத மோசமான உரை-நிழலுடன் உரை சாம்பல் நிறமாக மாறும்.

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

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

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

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

இணைப்பு செயல்பாடு எச்சரிக்கை

இந்த வகுப்பு s pointer-events: noneஇன் இணைப்பு செயல்பாட்டை முடக்க முயற்சிக்கிறது <a>, ஆனால் அந்த CSS சொத்து இன்னும் தரப்படுத்தப்படவில்லை மற்றும் Opera 18 மற்றும் அதற்கு கீழே உள்ள அல்லது Internet Explorer 11 இல் முழுமையாக ஆதரிக்கப்படவில்லை. கூடுதலாக, ஆதரிக்கும் உலாவிகளில் கூட pointer-events: none, விசைப்பலகை வழிசெலுத்தல் பாதிக்கப்படாமல் உள்ளது, அதாவது பார்வையுள்ள விசைப்பலகை பயனர்கள் மற்றும் உதவி தொழில்நுட்பங்களைப் பயன்படுத்துபவர்கள் இந்த இணைப்புகளை இன்னும் செயல்படுத்த முடியும். எனவே பாதுகாப்பாக இருக்க, அத்தகைய இணைப்புகளை முடக்க தனிப்பயன் JavaScript ஐப் பயன்படுத்தவும்.

பதிலளிக்கக்கூடிய படங்கள்

.img-responsiveபூட்ஸ்டார்ப் 3 இல் உள்ள படங்களை வகுப்பைச் சேர்ப்பதன் மூலம் பதிலளிக்கக்கூடியதாக மாற்றலாம் . max-width: 100%;இது , height: auto;மற்றும் படத்திற்கும் பொருந்தும் , display: block;அதனால் அது பெற்றோர் உறுப்புக்கு நன்றாக அளவிடும்.

.img-responsiveவகுப்பைப் பயன்படுத்தும் படங்களை மையப்படுத்த , .center-blockக்குப் பதிலாகப் பயன்படுத்தவும் .text-center. பயன்பாடு பற்றிய கூடுதல் விவரங்களுக்கு உதவி வகுப்புகள் பகுதியைப் பார்க்கவும் ..center-block

SVG படங்கள் மற்றும் IE 8-10

இன்டர்நெட் எக்ஸ்புளோரர் 8-10 இல், SVG படங்கள் .img-responsiveவிகிதாசார அளவில் உள்ளன. இதை சரிசெய்ய, width: 100% \9;தேவையான இடங்களில் சேர்க்கவும். மற்ற பட வடிவங்களில் சிக்கல்களை ஏற்படுத்துவதால் பூட்ஸ்ட்ராப் இதை தானாகப் பயன்படுத்தாது.

<img src="..." class="img-responsive" alt="Responsive image">

பட வடிவங்கள்

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

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

இன்டர்நெட் எக்ஸ்புளோரர் 8 வட்டமான மூலைகளுக்கு ஆதரவு இல்லை என்பதை நினைவில் கொள்ளவும்.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

சூழ்நிலை வண்ணங்கள்

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

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

Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus aactor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

தனித்தன்மையுடன் கையாளுதல்

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

உதவி தொழில்நுட்பங்களுக்கு அர்த்தத்தை வெளிப்படுத்துதல்

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

சூழல் பின்னணிகள்

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

Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus aactor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

தனித்தன்மையுடன் கையாளுதல்

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

உதவி தொழில்நுட்பங்களுக்கு அர்த்தத்தை வெளிப்படுத்துதல்

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

மூடு ஐகான்

மாதிரிகள் மற்றும் விழிப்பூட்டல்கள் போன்ற உள்ளடக்கத்தை நிராகரிக்க பொதுவான மூட ஐகானைப் பயன்படுத்தவும்.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

கேரட்ஸ்

கீழ்தோன்றும் செயல்பாடு மற்றும் திசையைக் குறிக்க கேரட்டுகளைப் பயன்படுத்தவும். டிராப்அப் மெனுக்களில் இயல்புநிலை கேரட் தானாகவே தலைகீழாக மாறும் என்பதை நினைவில் கொள்ளவும் .

<span class="caret"></span>

விரைவான மிதவைகள்

வகுப்பைக் கொண்டு ஒரு உறுப்பை இடது அல்லது வலது பக்கம் மிதக்கச் செய்யவும். !importantகுறிப்பிட்ட சிக்கல்களைத் தவிர்ப்பதற்காக சேர்க்கப்பட்டுள்ளது. வகுப்புகளை மிக்ஸின்களாகவும் பயன்படுத்தலாம்.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

நவ்பார்களில் பயன்படுத்துவதற்கு இல்லை

navbarகளில் உள்ள கூறுகளை பயன்பாட்டு வகுப்புகளுடன் சீரமைக்க, பயன்படுத்தவும் .navbar-leftஅல்லது .navbar-rightஅதற்குப் பதிலாகவும். விவரங்களுக்கு navbar ஆவணத்தைப் பார்க்கவும்.

மைய உள்ளடக்கத் தொகுதிகள்

ஒரு உறுப்பை க்கு display: blockமற்றும் மையத்தின் வழியாக அமைக்கவும் margin. மிக்சினாகவும் வகுப்பாகவும் கிடைக்கிறது.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

கிளியர்ஃபிக்ஸ்

மூல உறுப்பில்float சேர்ப்பதன் மூலம் களை எளிதாக அழிக்கவும் . Nicolas Gallagher பிரபலப்படுத்திய மைக்ரோ கிளியர்ஃபிக்ஸைப் பயன்படுத்துகிறது . மிக்ஸினாகவும் பயன்படுத்தலாம்..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

உள்ளடக்கத்தைக் காண்பித்தல் மற்றும் மறைத்தல்

பயன்பாடு மற்றும் வகுப்புகளுடன் ( திரை வாசகர்கள் உட்பட ) ஒரு உறுப்பைக் காண்பிக்க அல்லது மறைக்க வேண்டும் . விரைவு மிதவைகளைப் போலவே, குறிப்பிட்ட முரண்பாடுகளைத் தவிர்க்க இந்த வகுப்புகள் பயன்படுத்துகின்றன . அவை தொகுதி நிலை மாற்றத்திற்கு மட்டுமே கிடைக்கும். அவற்றை மிக்ஸினாகவும் பயன்படுத்தலாம்..show.hidden!important

.hideகிடைக்கிறது, ஆனால் இது எப்போதும் திரை வாசகர்களைப் பாதிக்காது மற்றும் v3.0.1 இல் இருந்து நீக்கப்பட்டது . பயன்படுத்தவும் .hiddenஅல்லது .sr-onlyஅதற்கு பதிலாக.

மேலும், .invisibleஒரு தனிமத்தின் தெரிவுநிலையை மட்டும் மாற்றுவதற்குப் பயன்படுத்தலாம், அதாவது அது displayமாற்றியமைக்கப்படவில்லை மற்றும் உறுப்பு ஆவணத்தின் ஓட்டத்தை இன்னும் பாதிக்கலாம்.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

ஸ்கிரீன் ரீடர் மற்றும் விசைப்பலகை வழிசெலுத்தல் உள்ளடக்கம்

உடன் ஸ்கிரீன் ரீடர்களைத் தவிர அனைத்து சாதனங்களிலும் ஒரு உறுப்பை மறை .sr-only. உறுப்பை மையப்படுத்தும்போது அதை மீண்டும் காண்பிக்க .sr-onlyஅதனுடன் இணைக்கவும் (எ.கா. விசைப்பலகை மட்டும் பயனரால்). அணுகல்தன்மை சிறந்த நடைமுறைகளைப்.sr-only-focusable பின்பற்றுவதற்கு அவசியம் . மிக்ஸினாகவும் பயன்படுத்தலாம்.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

படத்தை மாற்றுதல்

ஒரு உறுப்பின் உரை உள்ளடக்கத்தை பின்புலப் படத்துடன் மாற்ற உதவும் வகையில் .text-hideகிளாஸ் அல்லது மிக்சினைப் பயன்படுத்தவும்.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

வேகமான மொபைல்-நட்பு மேம்பாட்டிற்கு, மீடியா வினவல் மூலம் சாதனத்தின் உள்ளடக்கத்தைக் காண்பிக்கவும் மறைக்கவும் இந்த பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தவும். அச்சிடப்படும் போது உள்ளடக்கத்தை மாற்றுவதற்கான பயன்பாட்டு வகுப்புகளும் சேர்க்கப்பட்டுள்ளன.

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

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

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

	கூடுதல் சிறிய சாதனங்கள்தொலைபேசிகள் (<768px)	சிறிய சாதனங்கள்மாத்திரைகள் (≥768px)	நடுத்தர சாதனங்கள்டெஸ்க்டாப்புகள் (≥992px)	பெரிய சாதனங்கள்டெஸ்க்டாப்புகள் (≥1200px)
`.visible-xs-*`	தெரியும்	மறைக்கப்பட்டது	மறைக்கப்பட்டது	மறைக்கப்பட்டது
`.visible-sm-*`	மறைக்கப்பட்டது	தெரியும்	மறைக்கப்பட்டது	மறைக்கப்பட்டது
`.visible-md-*`	மறைக்கப்பட்டது	மறைக்கப்பட்டது	தெரியும்	மறைக்கப்பட்டது
`.visible-lg-*`	மறைக்கப்பட்டது	மறைக்கப்பட்டது	மறைக்கப்பட்டது	தெரியும்
`.hidden-xs`	மறைக்கப்பட்டது	தெரியும்	தெரியும்	தெரியும்
`.hidden-sm`	தெரியும்	மறைக்கப்பட்டது	தெரியும்	தெரியும்
`.hidden-md`	தெரியும்	தெரியும்	மறைக்கப்பட்டது	தெரியும்
`.hidden-lg`	தெரியும்	தெரியும்	தெரியும்	மறைக்கப்பட்டது

v3.2.0 இன் படி, ஒவ்வொரு பிரேக் பாயிண்டிற்கும் .visible-*-*வகுப்புகள் மூன்று மாறுபாடுகளில் வருகின்றன, displayகீழே பட்டியலிடப்பட்டுள்ள ஒவ்வொரு CSS சொத்து மதிப்புக்கும் ஒன்று.

வகுப்புகளின் குழு	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

எனவே, கூடுதல் சிறிய ( xs) திரைகளுக்கு எடுத்துக்காட்டாக, கிடைக்கும் .visible-*-*வகுப்புகள்: .visible-xs-block, .visible-xs-inline, மற்றும் .visible-xs-inline-block.

வகுப்புகள் .visible-xs, .visible-sm, .visible-md, மற்றும் .visible-lgஉள்ளன, ஆனால் அவை v3.2.0 இல் இருந்து நீக்கப்பட்டன . அவை தோராயமாக க்கு சமமானவை , தொடர்புடைய உறுப்புகளை மாற்றுவதற்கான .visible-*-blockகூடுதல் சிறப்பு நிகழ்வுகளைத் தவிர .<table>

அச்சு வகுப்புகள்

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

வகுப்புகள்	உலாவி	அச்சிடுக
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	மறைக்கப்பட்டது	தெரியும்
`.hidden-print`	தெரியும்	மறைக்கப்பட்டது

வகுப்பும் .visible-printஉள்ளது ஆனால் v3.2.0 இல் இருந்து நீக்கப்பட்டது . தொடர்புடைய உறுப்புகளுக்கான .visible-print-blockகூடுதல் சிறப்பு நிகழ்வுகளைத் தவிர, இது தோராயமாக சமமானதாகும் .<table>

சோதனை வழக்குகள்

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

இதில் தெரியும்...

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

மிகச்சிறியது ✔ x-சிறியதில் தெரியும்

சிறிய ✔ சிறியவற்றில் தெரியும்

நடுத்தர ✔ நடுத்தரத்தில் தெரியும்

பெரியது ✔ பெரிய அளவில் தெரியும்

கூடுதல் சிறிய மற்றும் சிறிய ✔ x-சிறிய மற்றும் சிறியவற்றில் தெரியும்

நடுத்தர மற்றும் பெரிய ✔ நடுத்தர மற்றும் பெரியவற்றில் தெரியும்

கூடுதல் சிறிய மற்றும் நடுத்தர ✔ x-சிறிய மற்றும் நடுத்தரத்தில் தெரியும்

சிறிய மற்றும் பெரிய ✔ சிறிய மற்றும் பெரியவற்றில் தெரியும்

கூடுதல் சிறிய மற்றும் பெரிய ✔ x-சிறிய மற்றும் பெரியவற்றில் தெரியும்

சிறிய மற்றும் நடுத்தர ✔ சிறிய மற்றும் நடுத்தரத்தில் தெரியும்

மறைக்கப்பட்டுள்ளது...

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

மிகச்சிறியது ✔ x-small இல் மறைக்கப்பட்டுள்ளது

சிறிய ✔ சிறியதாக மறைக்கப்பட்டுள்ளது

நடுத்தர ✔ நடுத்தரத்தில் மறைக்கப்பட்டுள்ளது

பெரியது ✔ பெரிய அளவில் மறைக்கப்பட்டுள்ளது

கூடுதல் சிறிய மற்றும் சிறிய x-சிறிய மற்றும் சிறியவற்றில் ✔ மறைக்கப்பட்டுள்ளது

நடுத்தர மற்றும் பெரிய ✔ நடுத்தர மற்றும் பெரிய மறைக்கப்பட்ட

கூடுதல் சிறிய மற்றும் நடுத்தர x-சிறிய மற்றும் நடுத்தரத்தில் ✔ மறைக்கப்பட்டுள்ளது

சிறிய மற்றும் பெரிய ✔ சிறிய மற்றும் பெரிய மறைக்கப்பட்ட

கூடுதல் சிறிய மற்றும் பெரிய ✔ சிறிய மற்றும் பெரிய x இல் மறைக்கப்பட்டுள்ளது

சிறிய மற்றும் நடுத்தர ✔ சிறிய மற்றும் நடுத்தர மறைக்கப்பட்ட

பூட்ஸ்டார்ப்பின் CSS ஆனது Less இல் கட்டமைக்கப்பட்டுள்ளது, இது மாறிகள், மிக்சின்கள் மற்றும் CSS ஐ தொகுப்பதற்கான செயல்பாடுகள் போன்ற கூடுதல் செயல்பாடுகளுடன் கூடிய முன்செயலியாகும். எங்கள் தொகுக்கப்பட்ட CSS கோப்புகளுக்குப் பதிலாக மூலக் குறைவான கோப்புகளைப் பயன்படுத்த விரும்புவோர், கட்டமைப்பில் நாம் பயன்படுத்தும் ஏராளமான மாறிகள் மற்றும் மிக்ஸின்களைப் பயன்படுத்தலாம்.

கிரிட் மாறிகள் மற்றும் மிக்சின்கள் கிரிட் சிஸ்டம் பிரிவில் உள்ளடக்கப்பட்டுள்ளன .

பூட்ஸ்டார்ப் தொகுத்தல்

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

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

மாறிகள்

வண்ணங்கள், இடைவெளி அல்லது எழுத்துரு அடுக்குகள் போன்ற பொதுவாகப் பயன்படுத்தப்படும் மதிப்புகளை மையப்படுத்தவும் பகிர்ந்து கொள்ளவும் ஒரு வழியாக முழுத் திட்டம் முழுவதும் மாறிகள் பயன்படுத்தப்படுகின்றன. முழுமையான முறிவுக்கு, Customizer ஐப் பார்க்கவும் .

வண்ணங்கள்

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

சாரக்கட்டு

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

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

இணைப்புகள்

ஒரே ஒரு மதிப்புடன் சரியான வண்ணத்துடன் உங்கள் இணைப்புகளை எளிதாக வடிவமைக்கவும்.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

சரியான மிதவை வண்ணத்தை @link-hover-colorதானாக உருவாக்க, ஒரு செயல்பாட்டைப் பயன்படுத்துகிறது, Less இன் மற்றொரு அற்புதமான கருவி. நீங்கள் பயன்படுத்தலாம் darken, lighten, saturateமற்றும் desaturate.

அச்சுக்கலை

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

சின்னங்கள்

உங்கள் ஐகான்களின் இருப்பிடம் மற்றும் கோப்புப் பெயரைத் தனிப்பயனாக்க இரண்டு விரைவான மாறிகள்.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

கூறுகள்

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

விற்பனையாளர் கலவைகள்

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

பெட்டி அளவு

உங்கள் கூறுகளின் பெட்டி மாதிரியை ஒற்றை மிக்சினில் மீட்டமைக்கவும். சூழலுக்கு, Mozilla இலிருந்து இந்த பயனுள்ள கட்டுரையைப் பார்க்கவும் .

Autoprefixer இன் அறிமுகத்துடன், v3.2.0 இல் மிக்சின் நிறுத்தப்பட்டது . பின்னோக்கி-இணக்கத்தன்மையைப் பாதுகாக்க, பூட்ஸ்டார்ப் v4 வரை மிக்ஸினை உள்நாட்டில் பூட்ஸ்டார்ப் தொடர்ந்து பயன்படுத்தும்.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

மழுங்கையாக்கப்பட்ட மூலைகள்

இன்று அனைத்து நவீன உலாவிகளும் முன்னொட்டு இல்லாத பண்புகளை ஆதரிக்கின்றன border-radius. எனவே, .border-radius()மிக்சின் இல்லை, ஆனால் பூட்ஸ்டார்ப்பில் ஒரு பொருளின் ஒரு குறிப்பிட்ட பக்கத்தில் இரண்டு மூலைகளை விரைவாகச் சுற்றுவதற்கான குறுக்குவழிகள் அடங்கும்.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

பெட்டி (துளி) நிழல்கள்

உங்கள் இலக்கு பார்வையாளர்கள் சமீபத்திய மற்றும் சிறந்த உலாவிகள் மற்றும் சாதனங்களைப் பயன்படுத்தினால், box-shadowசொத்தை சொந்தமாகப் பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள். பழைய Android (pre-v4) மற்றும் iOS சாதனங்களுக்கு (iOS 5க்கு முந்தைய) ஆதரவு தேவைப்பட்டால், தேவையான முன்னொட்டை எடுக்க, நிறுத்தப்பட்ட மிக்சினைப் பயன்படுத்தவும் .-webkit

நிலையான சொத்துக்களை ஆதரிக்காத காலாவதியான இயங்குதளங்களை பூட்ஸ்டார்ப் அதிகாரப்பூர்வமாக ஆதரிக்காததால், v3.1.0 இல் இருந்து mixin நிறுத்தப்பட்டது . பின்னோக்கி-இணக்கத்தன்மையைப் பாதுகாக்க, பூட்ஸ்டார்ப் v4 வரை மிக்ஸினை உள்நாட்டில் பூட்ஸ்டார்ப் தொடர்ந்து பயன்படுத்தும்.

உங்கள் பெட்டி நிழல்களில் வண்ணங்களைப் பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள் rgba(), அதனால் அவை பின்னணியுடன் முடிந்தவரை தடையின்றி கலக்கின்றன.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

மாற்றங்கள்

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

ஆட்டோபிரிஃபிக்சரின் அறிமுகத்துடன், v3.2.0 இல் மிக்சின்கள் நிறுத்தப்பட்டன . பின்னோக்கி-இணக்கத்தன்மையைப் பாதுகாக்க, பூட்ஸ்டார்ப் v4 வரை மிக்ஸின்களை உள்நாட்டில் பூட்ஸ்டார்ப் தொடர்ந்து பயன்படுத்தும்.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

உருமாற்றங்கள்

எந்தவொரு பொருளையும் சுழற்றவும், அளவிடவும், மொழிபெயர்க்கவும் (நகர்த்தவும்) அல்லது வளைக்கவும்.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

அனிமேஷன்கள்

CSS3 இன் அனைத்து அனிமேஷன் பண்புகளையும் ஒரு அறிவிப்பில் பயன்படுத்துவதற்கான ஒற்றை மிக்சின் மற்றும் தனிப்பட்ட பண்புகளுக்கு மற்ற மிக்சின்கள்.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

ஒளிபுகாநிலை

அனைத்து உலாவிகளுக்கும் ஒளிபுகாநிலையை அமைத்து, filterIE8க்கு ஃபால்பேக்கை வழங்கவும்.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ஒதுக்கிட உரை

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

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

நெடுவரிசைகள்

ஒற்றை உறுப்புக்குள் CSS வழியாக நெடுவரிசைகளை உருவாக்கவும்.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

சாய்வுகள்

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

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

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

அதற்குப் பதிலாக மூன்று வண்ணங்களைப் பயன்படுத்தவும். முதல் வண்ணம், இரண்டாவது வண்ணம், இரண்டாவது வண்ணத்தின் வண்ண நிறுத்தம் (25% போன்ற சதவீத மதிப்பு) மற்றும் மூன்றாவது வண்ணத்தை இந்த கலவைகளுடன் அமைக்கவும்:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

எச்சரிக்கை! நீங்கள் எப்போதாவது ஒரு சாய்வை அகற்ற வேண்டியிருந்தால், filterநீங்கள் சேர்த்த IE-குறிப்பிட்டவற்றை அகற்றுவதை உறுதிசெய்யவும். .reset-filter()மிக்ஸினைப் பயன்படுத்தி அதைச் செய்யலாம் background-image: none;.

பயன்பாட்டு கலவைகள்

யுடிலிட்டி மிக்சின்கள் ஒரு குறிப்பிட்ட இலக்கை அல்லது பணியை அடைய மற்றபடி தொடர்பில்லாத CSS பண்புகளை இணைக்கும் கலவைகள் ஆகும்.

கிளியர்ஃபிக்ஸ்

class="clearfix"எந்த உறுப்புகளையும் சேர்ப்பதை மறந்துவிட்டு , அதற்குப் பதிலாக .clearfix()பொருத்தமான இடத்தில் மிக்சினைச் சேர்க்கவும். Nicolas Gallagher இன் மைக்ரோ கிளியர்ஃபிக்ஸைப் பயன்படுத்துகிறது .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

கிடைமட்ட மையம்

எந்தவொரு உறுப்பையும் அதன் பெற்றோருக்குள் விரைவாக மையப்படுத்தவும். தேவை widthஅல்லது max-widthஅமைக்க வேண்டும்.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

அளவு உதவியாளர்கள்

ஒரு பொருளின் பரிமாணங்களை மிக எளிதாகக் குறிப்பிடவும்.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

மறுஅளவிடக்கூடிய உரைப் பகுதிகள்

எந்த textarea அல்லது வேறு எந்த உறுப்புக்கும் மறுஅளவிடுதல் விருப்பங்களை எளிதாக உள்ளமைக்கவும். இயல்பான உலாவி நடத்தைக்கான இயல்புநிலை ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

துண்டிக்கப்படும் உரை

ஒற்றை மிக்சினுடன் நீள்வட்டத்துடன் உரையை எளிதாக துண்டிக்கவும். உறுப்பு இருக்க வேண்டும் blockஅல்லது inline-blockநிலையாக இருக்க வேண்டும்.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

விழித்திரை படங்கள்

இரண்டு பட பாதைகள் மற்றும் @1x பட பரிமாணங்களைக் குறிப்பிடவும், பூட்ஸ்டார்ப் @2x மீடியா வினவலை வழங்கும். உங்களிடம் பல படங்கள் இருந்தால், உங்கள் விழித்திரை படத்தை CSS ஐ கைமுறையாக ஒரு மீடியா வினவலில் எழுதவும்.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

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

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

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

பாதை	விளக்கம்
`lib/`	ரூபி ஜெம் குறியீடு (சாஸ் உள்ளமைவு, தண்டவாளங்கள் மற்றும் திசைகாட்டி ஒருங்கிணைப்புகள்)
`tasks/`	மாற்றி ஸ்கிரிப்ட்கள் (அப்ஸ்ட்ரீம் லெஸ்ஸாக சாஸாக மாறுகிறது)
`test/`	தொகுத்தல் சோதனைகள்
`templates/`	திசைகாட்டி தொகுப்பு மேனிஃபெஸ்ட்
`vendor/assets/`	சாஸ், ஜாவாஸ்கிரிப்ட் மற்றும் எழுத்துரு கோப்புகள்
`Rakefile`	ரேக் மற்றும் கன்வெர்ட் போன்ற உள் பணிகள்

இந்த கோப்புகளை செயலில் பார்க்க Sass port இன் GitHub களஞ்சியத்தைப் பார்வையிடவும் .

நிறுவல்

Sass க்கான Bootstrap ஐ எவ்வாறு நிறுவுவது மற்றும் பயன்படுத்துவது என்பது பற்றிய தகவலுக்கு, GitHub repository readme ஐப் பார்க்கவும் . இது மிகவும் புதுப்பித்த ஆதாரம் மற்றும் ரெயில்கள், திசைகாட்டி மற்றும் நிலையான சாஸ் திட்டங்களுடன் பயன்படுத்துவதற்கான தகவலை உள்ளடக்கியது.

Sass க்கான பூட்ஸ்ட்ராப்

CSS

கண்ணோட்டம்

HTML5 டாக்டைப்

முதலில் மொபைல்

அச்சுக்கலை மற்றும் இணைப்புகள்

Normalize.css

கொள்கலன்கள்

கட்ட அமைப்பு

அறிமுகம்

ஊடக கேள்விகள்

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

உதாரணம்: அடுக்கப்பட்ட-கிடைமட்ட

எடுத்துக்காட்டு: திரவ கொள்கலன்

எடுத்துக்காட்டு: மொபைல் மற்றும் டெஸ்க்டாப்

எடுத்துக்காட்டு: மொபைல், டேப்லெட், டெஸ்க்டாப்

எடுத்துக்காட்டு: நெடுவரிசை மடக்குதல்

பதிலளிக்கக்கூடிய நெடுவரிசை மீட்டமைப்புகள்

சாக்கடைகளை அகற்றவும்

நெடுவரிசைகளை ஈடுசெய்கிறது

கூடு கட்டும் நெடுவரிசைகள்

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

குறைவான கலவைகள் மற்றும் மாறிகள்

மாறிகள்

கலவைகள்

எடுத்துக்காட்டு பயன்பாடு

அச்சுக்கலை

தலைப்புகள்

h1. பூட்ஸ்ட்ராப் தலைப்பு

h2. பூட்ஸ்ட்ராப் தலைப்பு

h3. பூட்ஸ்ட்ராப் தலைப்பு

h4. பூட்ஸ்ட்ராப் தலைப்பு

h5. பூட்ஸ்ட்ராப் தலைப்பு

h6. பூட்ஸ்ட்ராப் தலைப்பு

h1. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h2. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h3. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h4. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h5. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

h6. பூட்ஸ்ட்ராப் தலைப்பு இரண்டாம் நிலை உரை

உடல் நகல்

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

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

இன்லைன் உரை கூறுகள்

குறிக்கப்பட்ட உரை

நீக்கப்பட்ட உரை

ஸ்டிரைக்த்ரூ உரை

உரை செருகப்பட்டது

அடிக்கோடிட்ட உரை

சிறிய உரை

தடித்த

சாய்வு

மாற்று கூறுகள்

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

உருமாற்ற வகுப்புகள்

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

அடிப்படை சுருக்கம்

ஆரம்பநிலை

முகவரிகள்

தடைகள்

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

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

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

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

பட்டியல்கள்

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

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

பாணியற்றது

கோட்டில்

விளக்கம்

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

தானாக துண்டித்தல்

குறியீடு

கோட்டில்

பயனர் உள்ளீடு

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

மாறிகள்

மாதிரி வெளியீடு

அட்டவணைகள்

அடிப்படை உதாரணம்

கோடிட்ட வரிசைகள்

டெமோ `:focus`மாநிலம்

இணைப்பு செயல்பாடு பற்றி எச்சரிக்கை`<a>`

மறைக்கப்பட்ட `.sr-only`லேபிள்களுடன் விருப்ப ஐகான்கள்