ඉක්මන්-ආරම්භක උදාහරණ

ඉක්මන් සැකිලි කිහිපයක් අවශ්‍යද? අපි එකතු කර ඇති මෙම මූලික උදාහරණ බලන්න:

පෙරනිමි ජාලකය

Bootstrap හි කොටසක් ලෙස සපයන ලද පෙරනිමි ජාල පද්ධතිය 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>

ඔබේම ජාලකය රෝල් කරන්න

Bootstrap තුලට ගොඩනගා ඇත්තේ පෙරනිමි 940px ජාල පද්ධතිය අභිරුචිකරණය කිරීම සඳහා අතලොස්සක් වන විචල්‍යයන්ය. ටිකක් අභිරුචිකරණය සමඟ, ඔබට තීරුවල ප්‍රමාණය, ඒවායේ කාණු සහ ඒවා වාසය කරන බහාලුම් වෙනස් කළ හැකිය.

ජාලකය ඇතුළත

ජාල පද්ධතිය වෙනස් කිරීමට අවශ්‍ය විචල්‍යයන් සියල්ලම දැනට පවතින්නේ preboot.less.

දැන් අභිරුචිකරණය කිරීමට

ජාලකය වෙනස් කිරීම යනු @grid-*විචල්‍ය තුන වෙනස් කිරීම සහ අඩු ගොනු නැවත සම්පාදනය කිරීමයි.

බූට්ස්ට්‍රැප් තීරු 24ක් දක්වා ජාල පද්ධතියක් හැසිරවීමට සන්නද්ධ වේ; පෙරනිමිය 16ක් පමණි. ඔබේ ජාල විචල්‍යයන් තීරු 24ක ජාලකයකට අභිරුචිකරණය කර ඇති ආකාරය මෙන්න.

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

නැවත සම්පාදනය කළ පසු, ඔබ සැකසෙනු ඇත!

ස්ථාවර පිරිසැලසුම

පෙරනිමි සහ සරල 940px-පුළුල්, තනි වෙබ් අඩවියක් මඟින් සපයන ඕනෑම වෙබ් අඩවියක් හෝ පිටුවක් සඳහා කේන්ද්‍රගත පිරිසැලසුම <div.container>.

<ශරීරය>
  <div class = "බහාලකය" > 
    ...
  </div>
</body>

දියර පිරිසැලසුම

අවම සහ උපරිම පළල සහ වම් පැත්තේ පැති තීරුවක් සහිත විකල්ප, නම්‍යශීලී ද්‍රව පිටු ව්‍යුහයක්. යෙදුම් සහ ලේඛන සඳහා විශිෂ්ටයි.

<ශරීරය>
  <div class = "container-fluid" > 
    <div class = "පැති තීරුව" > 
      ...
    </div>
    <div class = "අන්තර්ගතය" > 
      ...
    </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 vehicula ut id elit.

උදාහරණ ශීර්ෂයට උප ශීර්ෂයක් ඇත...

වෙනත් මූලද්රව්ය

අවධාරණය, ලිපින සහ කෙටි යෙදුම් භාවිතා කිරීම

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

භාවිතා කරන විට

එහි අවට පිටපතට සාපේක්ෂව වචනයක් හෝ වාක්‍ය ඛණ්ඩයක අමතර වැදගත්කමක් හෝ අවධාරණයක් දැක්වීමට අවධාරණය ටැග් ( <strong>සහ ) භාවිතා කළ යුතුය. වැදගත්කම සහ ආතතිය අවධාරණය කිරීම සඳහා <em>භාවිතා කරන්න .<strong><em>

ඡේදයක අවධාරණය

Fusce dapibus , Telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. 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>එවිට ඔබට —එයට පෙර em dash එකක් ලැබෙනු ඇත.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල posuere erat a ante venenatis dapibus posuere velit aliquet.

ආචාර්ය ජුලියස් හිබර්ට්

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> ආචාර්ය ජුලියස් හිබර්ට් </small>
</blockquote>

ඇණවුම් නොකළ<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Massa සහ integer molestie lorem
• pretium nisl aliquet හි පහසුකම
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet nunc
• Eget porttitor lorem

මෝස්තර නොකළ<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Massa සහ integer molestie lorem
• pretium nisl aliquet හි පහසුකම
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet nunc
• Eget porttitor lorem

ඇණවුම් කළා<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Massa සහ integer molestie lorem
4. pretium nisl aliquet හි පහසුකම
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet nunc
8. Eget porttitor lorem

විස්තරdl

විස්තර ලැයිස්තු

නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada Magna mollis euismod.

කේතය

<code> <pre>

සරල ටැග් දෙකකින් ඔබේ කේතය මෝස්තරයෙන් පිම්ප් කරන්න. ජාවාස්ක්‍රිප්ට් හරහා වඩාත් විශිෂ්ටත්වය සඳහා, Google හි කේතය prettify පුස්තකාලය තුළට දමන්න, එවිට ඔබ සකසා ඇත.

කේතය ඉදිරිපත් කිරීම

කේතය, බ්ලොක් හෝ ස්නිපට් පේළිගත කිරීම, නිවැරදි ටැගය එතීමෙන් පමණක් ශෛලිය සමඟ පෙන්විය හැක. රේඛා කිහිපයක් පුරා විහිදෙන කේත කොටස් සඳහා, <pre>මූලද්‍රව්‍යය භාවිතා කරන්න. පේළිගත කේතය සඳහා, <code>මූලද්රව්යය භාවිතා කරන්න.

<div>
  <h1>ශීර්ෂකය</h1>
  <p>මෙහි යමක් තිබේ...</p>
</div>

<div> <h1> ශීර්ෂකය </h1> <p> මෙතන යමක්... </p> </div>
  
  

පේළිගත ලේබල්

<span class="label">

ඔබේ ශරීර පෙළෙහි ඇති ඕනෑම වාක්‍ය ඛණ්ඩයකට අවධානය යොමු කරන්න හෝ සලකුණු කරන්න.

ඕනෑම දෙයක් ලේබල් කරන්න

කවදා හෝ එවැනි අලංකාර නව එකක් අවශ්‍ය විය! හෝ කේතය ලියන විට වැදගත් කොඩි? හොඳයි, දැන් ඔබට ඒවා තිබේ. පෙරනිමියෙන් ඇතුළත් කර ඇති දේ මෙන්න:

මාධ්ය ජාලය

අඩු HTML පියසටහනක් සහ අවම මෝස්තර සහිත පිටු මත විවිධ ප්‍රමාණයේ සිඟිති රූ සංදර්ශන කරන්න.

උදාහරණ සිඟිති රූ

හි ඇති සිඟිති .media-gridරූ ඕනෑම ප්‍රමාණයකින් විය හැකි නමුත්, ඒවා ගොඩනඟන ලද Bootstrap ජාල පද්ධතියට සෘජුවම සිතියම්ගත කළ විට වඩාත් හොඳින් ක්‍රියා කරයි. .span290, 210, සහ 330 වැනි රූප පළල , , .span4, සහ .span6තීරු ප්‍රමාණවලට සමාන කිරීමට පෑඩින් පික්සල කිහිපයක් සමඟ ඒකාබද්ධ වේ .

මහා

මධ්යම

කුඩා

ඒවා කේතනය කිරීම

මාධ්‍ය ජාලක භාවිතා කිරීමට පහසු වන අතර සලකුණු පැත්තෙන් තරමක් සරල ය. ඒවායේ මානයන් තනිකරම ඇතුළත් කර ඇති පින්තූරවල ප්රමාණය මත පදනම් වේ.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img පන්තිය =  "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>

මේස විශිෂ්ටයි - බොහෝ දේ සඳහා. කෙසේ වෙතත්, විශිෂ්ට වගු, ප්‍රයෝජනවත්, පරිමාණය කළ හැකි සහ කියවිය හැකි (කේත මට්ටමින්) වීමට මාර්ක්අප් ආදරයක් අවශ්‍ය වේ. උදව් කිරීමට උපදෙස් කිහිපයක් මෙන්න.

සෑම විටම ඔබේ තීරු ශීර්ෂයන් a වලින් ඔතන්න<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" > 
  ...
</ වගුව>

පෙරනිමි මෝස්තර

කියවිය හැකි සහ පරිමාණය කළ හැකි ආකාරයෙන් ඉදිරිපත් කිරීමට සියලු ආකාරවලට පෙරනිමි මෝස්තර ලබා දී ඇත. පෙළ ආදාන, තෝරාගත් ලැයිස්තු, පෙළ ප්‍රදේශ, රේඩියෝ බොත්තම් සහ පිරික්සුම් කොටු සහ බොත්තම් සඳහා මෝස්තර සපයනු ලැබේ.

ගොඩගැසූ ආකෘති

ඔබේ පෝරමයේ HTML වෙත එක් කරන්න .form-stacked, එවිට ඔබට ලේබල ඔවුන්ගේ වමේ වෙනුවට ඔවුන්ගේ ක්ෂේත්‍රවල ඉහළින්ම ඇත. ඔබේ පෝරම කෙටි නම් හෝ ඔබට බර පෝරම සඳහා යෙදවුම් තීරු දෙකක් තිබේ නම් මෙය ඉතා හොඳින් ක්‍රියා කරයි.

ආකෘති ක්ෂේත්‍ර ප්‍රමාණයන්

ඕනෑම පෝරමයක් අභිරුචිකරණය කරන්න input, selectහෝtextareaඔබේ සලකුණු කිරීමට පන්ති කිහිපයක් පමණක් එක් කිරීමෙන්

v1.3.0 වන විට, අපි ආකෘති මූලද්‍රව්‍ය සඳහා ජාලක පදනම් වූ ප්‍රමාණ පන්ති එකතු කර ඇත. කරුණාකර දැනට පවතින .mini, .small, ආදී පන්තිවලට වඩා මේවා භාවිතා කරන්න.

බොත්තම්

සම්මුතියක් ලෙස, ක්‍රියා සඳහා බොත්තම් භාවිතා කරන අතර වස්තූන් සඳහා සබැඳි භාවිතා වේ. උදාහරණයක් ලෙස, "බාගැනීම" බොත්තමක් විය හැකි අතර "මෑතකාලීන ක්‍රියාකාරකම්" සබැඳියක් විය හැක.

සියලුම බොත්තම් ලා අළු මෝස්තරයකට පෙරනිමිය, නමුත් විවිධ වර්ණ මෝස්තර සඳහා ක්‍රියාකාරී පන්ති ගණනාවක් යෙදිය හැක. මෙම පන්තිවලට නිල් .primaryපන්තියක්, ලා-නිල් .infoපන්තියක්, කොළ .successපන්තියක් සහ රතු .dangerපන්තියක් ඇතුළත් වේ.

උදාහරණ බොත්තම්

බොත්තම් මෝස්තර යෙදූ දේ සමඟ ඕනෑම දෙයකට .btnයෙදිය හැක. සාමාන්‍යයෙන් ඔබට මේවා <a>, <button>, සහ තෝරන <input>මූලද්‍රව්‍ය සඳහා පමණක් යෙදීමට අවශ්‍ය වනු ඇත. එය පෙනෙන ආකාරය මෙන්න:

විකල්ප ප්රමාණ

විශාල හෝ කුඩා බොත්තම් කැමතිද? එය ලබා ගන්න!

ආබාධිත තත්ත්වය

එක් හේතුවක් හෝ වෙනත් හේතුවක් නිසා සක්‍රිය නොවන හෝ යෙදුම මඟින් අක්‍රිය කර ඇති බොත්තම් සඳහා, අක්‍රිය තත්ත්වය භාවිතා කරන්න. එය .disabledසබැඳි සහ මූලද්‍රව්‍ය :disabledසඳහා <button>වේ.

සබැඳි

බොත්තම්

එය කුමක් ද

අපගේ topbar යනු වෙබ් අඩවියක ලාංඡනය හෝ නම, ප්‍රාථමික සංචාලනය සහ සෙවුම් පෝරමය අඩංගු ස්ථාවර තීරුවකි.

අභිරුචිකරණය කළ හැකි

ඇතුළත ඇති සියලුම මූලද්‍රව්‍ය සහ සම්පූර්ණ ඉහළ තීරුව ද විකල්ප වේ. ඔබට ලාංඡනයක්/නමක්, 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 = "සක්‍රිය" > ඔබ මෙහි සිටී </li> 
</ul>

පේජිනේෂන්

Rdio විසින් ආනුභාව ලත් අතිශය සරල සහ අවම මෝස්තර සහිත පිටු නිර්මාණය. විශාල කොටස මග හැරීමට අපහසුය, පහසුවෙන් පරිමාණය කළ හැකි අතර විශාල ක්ලික් ප්‍රදේශ සපයයි.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← පෙර </a></li>  
    <li class = "සක්‍රිය" ><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

ක්‍රියාවක අසාර්ථකත්වය, විය හැකි අසාර්ථකත්වය හෝ සාර්ථකත්වය ඉස්මතු කිරීම සඳහා එක් පේළි පණිවිඩ. ආකෘති සඳහා විශේෂයෙන් ප්රයෝජනවත් වේ.

javascript ලබා ගන්න »

උදාහරණ කේතය

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> ශුද්ධ ග්වාකමෝල්! </strong> ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත. </p>
</div>

පණිවිඩ අවහිර කරන්න

.alert-message.block-message

පැහැදිලි කිරීමක් අවශ්‍ය පණිවිඩ සඳහා, අපට ඡේද විලාස ඇඟවීම් ඇත. දිගු දෝෂ පණිවිඩ බුබුලු දැමීම, අපේක්ෂිත ක්‍රියාවක් ගැන පරිශීලකයෙකුට අනතුරු ඇඟවීම හෝ පිටුවේ වැඩි අවධාරණය සඳහා තොරතුරු ඉදිරිපත් කිරීම සඳහා මේවා පරිපූර්ණ වේ.

javascript ලබා ගන්න »

උදාහරණ කේතය

<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>

මාදිලි

පසුබිම් සන්දර්භය පවත්වා ගැනීම වැදගත් වන අවස්ථාවන්හි සන්දර්භීය ක්‍රියාවන් සඳහා ආකෘති-සංවාද හෝ ලයිට් පෙට්ටිය විශිෂ්ට වේ.

javascript ලබා ගන්න »

මෙවලම් ඉඟි

ව්‍යාකූල පරිශීලකයෙකුට උපකාර කිරීමට සහ ඔවුන් නිවැරදි දිශාවට යොමු කිරීමට Twipsies ඉතා ප්‍රයෝජනවත් වේ.

javascript ලබා ගන්න »

Popovers

පිරිසැලසුමට බලපෑම් නොකර පිටුවකට යටිපෙළ තොරතුරු සැපයීමට popovers භාවිතා කරන්න.

javascript ලබා ගන්න »

ඇරඹේ

Bootstrap පුස්තකාලය සමඟ javascript ඒකාබද්ධ කිරීම ඉතා පහසුයි. පහතින් අපි මූලික කරුණු හරහා ගොස් ඔබට ආරම්භ කිරීම සඳහා නියම ප්ලගීන කිහිපයක් ලබා දෙන්නෙමු!

javascript docs බලන්න »

ඇතුළත් දේ

jQuery සහ Ender සමඟ ක්‍රියා කරන නව අභිරුචි ප්ලගීන සමඟ Bootstrap හි ප්‍රාථමික සංරචක සමහරක් ජීවයට ගෙන එන්න . ඔබේ විශේෂිත සංවර්ධන අවශ්‍යතාවලට සරිලන පරිදි ඒවා දීර්ඝ කිරීමට සහ වෙනස් කිරීමට අපි ඔබව දිරිමත් කරමු.

javascript අවශ්‍යද?

නැහැ! Bootstrap මුලින්ම නිර්මාණය කර ඇත්තේ CSS පුස්තකාලයක් ලෙසය. මෙම ජාවාස්ක්‍රිප්ට් ඇතුළත් කර ඇති මෝස්තරවලට ඉහළින් මූලික අන්තර්ක්‍රියාකාරී ස්ථරයක් සපයයි.

කෙසේ වෙතත්, ජාවාස්ක්‍රිප්ට් අවශ්‍ය අය සඳහා, අපි ඔබට බූට්ස්ට්‍රැප් ජාවාස්ක්‍රිප්ට් සමඟ ඒකාබද්ධ කරන්නේ කෙසේද යන්න තේරුම් ගැනීමට සහ මූලික ක්‍රියාකාරීත්වය සඳහා ඉක්මන්, සැහැල්ලු විකල්පයක් ඔබට ලබා දීමට ඉහත ප්ලගීන සපයා ඇත.

වැඩි විස්තර සඳහා සහ සමහර සජීවී ආදර්ශන බැලීමට, කරුණාකර අපගේ ප්ලගින ලේඛන පිටුව බලන්න .