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

சில விரைவான வார்ப்புருக்கள் வேண்டுமா? நாங்கள் ஒன்றாக இணைத்துள்ள இந்த அடிப்படை எடுத்துக்காட்டுகளைப் பாருங்கள்:

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

பூட்ஸ்டார்ப்பின் ஒரு பகுதியாக வழங்கப்படும் இயல்புநிலை கட்ட அமைப்பு 940px அகலம் கொண்ட 16-நெடுவரிசை கட்டமாகும். இது பிரபலமான 960 கிரிட் அமைப்பின் சுவையாகும், ஆனால் இடது மற்றும் வலது பக்கங்களில் கூடுதல் விளிம்பு/திணிப்பு இல்லாமல்.

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

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

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

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

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

உள்ளமை நெடுவரிசைகளின் எடுத்துக்காட்டு

<div class = "row" > 
  <div class = "span12" > 
    நெடுவரிசையின் நிலை 1
    <div class = "row" > 
      <div class = "span6" > 
        நிலை 2
      </div>
      <div class = "span6" > 
        நிலை 2
      </div>
    </div>
  </div>
</div>

உங்கள் சொந்த கட்டத்தை உருட்டவும்

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

கட்டத்தின் உள்ளே

கிரிட் அமைப்பை மாற்றுவதற்கு தேவையான மாறிகள் அனைத்தும் தற்போது உள்ளன preboot.less.

இப்போது தனிப்பயனாக்க

கட்டத்தை மாற்றியமைப்பது என்பது மூன்று @grid-*மாறிகளை மாற்றுவது மற்றும் குறைவான கோப்புகளை மீண்டும் தொகுத்தல் ஆகும்.

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

@GridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

மீண்டும் தொகுக்கப்பட்டவுடன், நீங்கள் அமைக்கப்படுவீர்கள்!

நிலையான தளவமைப்பு

இயல்புநிலை மற்றும் எளிமையான 940px-அகலமான, மையப்படுத்தப்பட்ட தளவமைப்பு எந்தவொரு இணையதளம் அல்லது ஒரு பக்கத்தால் வழங்கப்படும் <div.container>.

<உடல்>
  <div class = "container" > 
    ...
  </div>
</body>

திரவ அமைப்பு

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

<உடல்>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

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

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

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

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

h1. தலைப்பு 1

h2. தலைப்பு 2

h3. தலைப்பு 3

h4. தலைப்பு 4

h5. தலைப்பு 5

h6. தலைப்பு 6

எடுத்துக்காட்டு பத்தி

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

எடுத்துக்காட்டுத் தலைப்பில் துணைத் தலைப்பு உள்ளது...

மற்றவை உறுப்புகள்

முக்கியத்துவம், முகவரிகள் மற்றும் சுருக்கங்களைப் பயன்படுத்துதல்

<strong> <em> <address> <abbr>

எப்போது பயன்படுத்த வேண்டும்

ஒரு சொல் அல்லது சொற்றொடரைச் சுற்றியுள்ள நகலுடன் தொடர்புடைய கூடுதல் முக்கியத்துவம் அல்லது முக்கியத்துவத்தைக் குறிக்க வலியுறுத்தல் குறிச்சொற்கள் ( <strong>மற்றும் <em>) பயன்படுத்தப்பட வேண்டும். <strong>முக்கியத்துவத்திற்கும் <em>மன அழுத்தத்திற்கும் பயன்படுத்தவும் .

ஒரு பத்தியில் வலியுறுத்தல்

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

குறிப்பு:<b> HTML5 இல் பயன்படுத்துவது மற்றும் குறியிடுவது இன்னும் பரவாயில்லை, <i>அவை முறையே தடிமனாகவும் சாய்வாகவும் இருக்க வேண்டியதில்லை (அதிக சொற்பொருள் உறுப்பு இருந்தால், அதைப் பயன்படுத்தவும்). <b>கூடுதல் முக்கியத்துவத்தை தெரிவிக்காமல் வார்த்தைகள் அல்லது சொற்றொடர்களை முன்னிலைப்படுத்துவதாகும், அதே சமயம் <i>பெரும்பாலும் குரல், தொழில்நுட்ப சொற்கள், முதலியன.

முகவரிகள்

உறுப்பு <address>அதன் அருகிலுள்ள மூதாதையர் அல்லது முழு வேலை அமைப்புக்கான தொடர்புத் தகவலுக்காகப் பயன்படுத்தப்படுகிறது. இது எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான இரண்டு எடுத்துக்காட்டுகள் இங்கே:

குறிப்பு: ஒரு வரியில் உள்ள ஒவ்வொரு வரியும் <address>ஒரு வரி முறிவுடன் ( ) முடிவடைய வேண்டும் அல்லது உள்ளடக்கத்தை சரியாக கட்டமைக்க <br />ஒரு தொகுதி-நிலை குறிச்சொல்லில் (எ.கா., ) மூடப்பட்டிருக்க வேண்டும் .<p>

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

சுருக்கங்கள் மற்றும் சுருக்கெழுத்துக்களுக்கு, <abbr>குறிச்சொல்லைப் பயன்படுத்தவும் ( HTML5<acronym> இல் நிறுத்தப்பட்டது ). குறிச்சொல்லுக்குள் சுருக்கெழுத்து படிவத்தை வைத்து முழுமையான பெயருக்கு ஒரு தலைப்பை அமைக்கவும்.

தடைகள்

<blockquote> <p> <small>

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

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

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

டாக்டர் ஜூலியஸ் ஹிபர்ட்

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. முழு எண் போஸ்யூரே எராட் அன்டே வெனெனாடிஸ் டாபிபஸ் போஸ்யூரே வெலிட் அலிக்வெட். </p>
  <small> டாக்டர் ஜூலியஸ் ஹிபர்ட் </small>
</blockquote>

வரிசைப்படுத்தப்படவில்லை<ul>

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

பாணியற்றது<ul.unstyled>

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

உத்தரவிட்டார்<ol>

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

விளக்கம்dl

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

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

யூயிஸ்மோட்

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

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

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

Etiam porta sem malesuada Magna mollis euismod.

குறியீடு

<code> <pre>

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

குறியீட்டை வழங்குகிறோம்

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

<div>
  <h1>தலைப்பு</h1>
  <p>இங்கே ஏதோ இருக்கிறது...</p>
</div>

<div> <h1> தலைப்பு </h1> <p> இங்கே ஏதோ இருக்கிறது... </p> </div>
  
  

இன்லைன் லேபிள்கள்

<span class="label">

உங்கள் உடல் உரையில் உள்ள எந்தவொரு சொற்றொடரையும் கவனத்தை ஈர்க்கவும் அல்லது கொடியிடவும்.

எதையும் லேபிளிடு

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

மீடியா கட்டம்

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

எடுத்துக்காட்டு சிறுபடங்கள்

இல் உள்ள சிறுபடங்கள் .media-gridஎந்த அளவிலும் இருக்கலாம், ஆனால் அவை நேரடியாக உள்ளமைக்கப்பட்ட பூட்ஸ்டார்ப் கிரிட் அமைப்பில் மேப் செய்யும் போது சிறப்பாகச் செயல்படும். 90, 210 மற்றும் 330 போன்ற பட அகலங்கள் ஒரு சில பிக்சல்கள் திணிப்புடன் இணைந்து .span2, .span4, மற்றும் .span6நெடுவரிசை அளவுகளுக்கு சமமாக இருக்கும்.

பெரியது

நடுத்தர

சிறிய

அவற்றை குறியிடுதல்

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

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

கட்டிட மேசைகள்

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

எப்பொழுதும் உங்கள் நெடுவரிசை தலைப்புகளை ஒரு <thead>படிநிலையில் மடிக்கவும் <thead>> <tr>> <th>.

நெடுவரிசைத் தலைப்புகளைப் போலவே, உங்கள் அட்டவணையின் அனைத்து உள்ளடக்கமும் ஒரு வரிசையில் மூடப்பட்டிருக்க வேண்டும், <tbody>எனவே உங்கள் படிநிலை <tbody>> <tr>> <td>.

எடுத்துக்காட்டு: இயல்புநிலை அட்டவணை பாணிகள்

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

<அட்டவணை>
  ...
</ அட்டவணை>

எடுத்துக்காட்டு: வரிக்குதிரை-கோடுகள்

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

குறிப்பு: Zebra-striping என்பது IE8 மற்றும் அதற்குக் கீழே உள்ள பழைய உலாவிகளுக்கு கிடைக்காத ஒரு முற்போக்கான மேம்பாடு ஆகும்.

<table class = "zebra-striped" > 
...
</ அட்டவணை>

எடுத்துக்காட்டு: Zebra-striped w/ TableSorter.js

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( செயல்பாடு () { 
    $ ( "அட்டவணை#வரிசைப்படுத்தப்பட்ட அட்டவணை" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</ அட்டவணை>

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

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

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

.form-stackedஉங்கள் படிவத்தின் HTML இல் சேர்த்தால், அவர்களின் புலங்களின் இடதுபுறத்தில் இல்லாமல் மேலே லேபிள்கள் இருக்கும் . உங்கள் படிவங்கள் குறுகியதாக இருந்தால் அல்லது கனமான படிவங்களுக்கான உள்ளீடுகளின் இரண்டு நெடுவரிசைகள் இருந்தால் இது சிறப்பாகச் செயல்படும்.

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

உங்கள் மார்க்அப்பில் சில வகுப்புகளைச் சேர்ப்பதன் மூலம் எந்தப் படிவத்தையும் input, selectஅல்லது அகலத்தையும் தனிப்பயனாக்குங்கள் .textarea

v1.3.0 இன் படி, படிவ உறுப்புகளுக்கான கட்டம் அடிப்படையிலான அளவு வகுப்புகளைச் சேர்த்துள்ளோம். ஏற்கனவே உள்ள .mini, .small, போன்ற வகுப்புகளில் இவற்றைப் பயன்படுத்தவும்.

பொத்தான்கள்

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

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

எடுத்துக்காட்டு பொத்தான்கள்

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

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

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

ஊனமுற்ற நிலை

செயலில் இல்லாத அல்லது ஒரு காரணத்திற்காக ஆப்ஸால் முடக்கப்பட்ட பொத்தான்களுக்கு, முடக்கப்பட்ட நிலையைப் பயன்படுத்தவும். இது .disabledஇணைப்புகள் மற்றும் :disabledஉறுப்புகளுக்கானது <button>.

இணைப்புகள்

பொத்தான்கள்

அது என்ன

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

தனிப்பயனாக்கக்கூடியது

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

கீழிறங்கும் அடங்கும்

முக்கிய வழிசெலுத்தலின் ஒரு பகுதியாக, உங்கள் நாவில் கீழ்தோன்றும் சேர்க்கும் திறனை நாங்கள் சேர்த்துள்ளோம். இது எவ்வாறு செய்யப்படுகிறது என்பதைப் பார்க்க, மேலே உள்ள இரண்டாம் நிலை nav ஐப் பார்க்கவும் (வலது சீரமைக்கப்பட்டது). கீழ்தோன்றும் குறிச்சொற்கள் தற்போதைய பக்கத் தேர்வைக் காட்டுவதற்கும் liதுணைபுரிகின்றன ..active

தாவல்கள் மற்றும் மாத்திரைகள்

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

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

• வீடு
• சுயவிவரம்
• செய்திகள்
• அமைப்புகள்
• தொடர்பு கொள்ளவும்
• கீழே போடு
  • இரண்டாம் நிலை இணைப்பு
  • இங்கே வேறு ஏதாவது
  • மற்றொரு இணைப்பு

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > சுயவிவரம் </a></li> 
  <li><a href = "#" > செய்திகள் </a></li> 
  <li><a href = "#" > அமைப்புகள் </a></li> 
  <li><a href = "#" > தொடர்பு </a></li> 
</ul>

• வீடு
• சுயவிவரம்
• செய்திகள்
• அமைப்புகள்
• தொடர்பு கொள்ளவும்

<ul class = "மாத்திரைகள்" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > சுயவிவரம் </a></li> 
  <li><a href = "#" > செய்திகள் </a></li> 
  <li><a href = "#" > அமைப்புகள் </a></li> 
  <li><a href = "#" > தொடர்பு </a></li> 
</ul>

ரொட்டிதூள்கள்

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

• வீடு

• முகப்பு /
• நடு பக்கம்

• முகப்பு /
• நடு பக்கம் /
• மற்றொன்று

• முகப்பு /
• நடு பக்கம் /
• மற்றொன்று /
• நீ இங்கே இருக்கிறாய்

<ul class = "breadcrumb" > 
  <li><a href = "#" > முகப்பு </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > நடுப் பக்கம் </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > மற்றொன்று </a> <span class = "divider" > / </span></li>   
  <li class = "active" > நீங்கள் இங்கே இருக்கிறீர்கள் </li> 
</ul>

பேஜினேஷன்

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

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← முந்தைய </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "அடுத்து" ><a href = "#" > அடுத்து → </a></li>  
  </ul>
</div>

அடிப்படை எச்சரிக்கைகள்

.alert-message

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

ஜாவாஸ்கிரிப்டைப் பெறுக »

எடுத்துக்காட்டு குறியீடு

<div class = "alert-message எச்சரிக்கை" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> புனித குவாக்காமோல்! </strong> நீங்களே சரி பார்க்கவும், நீங்கள் நன்றாக இல்லை. </p>
</div>

செய்திகளைத் தடு

.alert-message.block-message

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

ஜாவாஸ்கிரிப்டைப் பெறுக »

எடுத்துக்காட்டு குறியீடு

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> புனித குவாக்காமோல்! இது ஒரு எச்சரிக்கை! </strong> நீங்களே சரி பார்க்கவும், நீங்கள் நன்றாக இல்லை. Nulla vitae elit libero, a pharetra ague. பிரசென்ட் கொமோடோ கர்சஸ் மேக்னா, அல்லது ஸ்கெலரிஸ்க் நிஸ்ல் கான்செக்டூர் மற்றும். </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > இந்த செயலை எடு </a> <a class = "btn small" href = "#" > அல்லது இதைச் செய் </a>     
  </div>
</div>

மாதிரிகள்

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

ஜாவாஸ்கிரிப்டைப் பெறுக »

உதவிக்குறிப்புகள்

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

ஜாவாஸ்கிரிப்டைப் பெறுக »

Popovers

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

ஜாவாஸ்கிரிப்டைப் பெறுக »

தொடங்குதல்

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

ஜாவாஸ்கிரிப்ட் டாக்ஸைக் காண்க »

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

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

ஜாவாஸ்கிரிப்ட் அவசியமா?

இல்லை! பூட்ஸ்ட்ராப் முதன்மையாக CSS நூலகமாக வடிவமைக்கப்பட்டுள்ளது. இந்த ஜாவாஸ்கிரிப்ட் உள்ளடக்கிய பாணிகளின் மேல் ஒரு அடிப்படை ஊடாடும் அடுக்கை வழங்குகிறது.

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

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