د تڼۍ ډلې

د ډیری بټونو سره یوځای کولو لپاره د تڼۍ ګروپونه د یوې جامع برخې په توګه وکاروئ. دوی د یو لړ <a>یا <button>عناصرو سره جوړ کړئ.

غوره تمرینات

موږ د تڼۍ ګروپونو او اوزار بارونو کارولو لپاره لاندې لارښوونې وړاندیز کوو:

• تل ورته عنصر په یوه تڼۍ ګروپ کې وکاروئ، <a>یا <button>.
• په ورته بټن ګروپ کې د مختلف رنګونو بټنونه مه ګډوئ.
• د متن سربیره یا پرځای عکسونه وکاروئ، مګر ډاډه اوسئ چې alt او سرلیک متن پکې شامل کړئ چیرې چې مناسب وي.

اړونده تڼۍ ګروپونه د ډراپ ډاون سره (لاندې وګورئ) باید په جلا توګه وغوښتل شي او تل د مطلوب چلند څرګندولو لپاره د ډراپ ډاون کارټ شامل کړئ.

ډیفالټ مثال

دلته دا دی چې HTML څنګه د معیاري بټن ګروپ لپاره ګوري چې د لنگر ټګ بټونو سره جوړ شوی:

<div class = "btn-group" > 
  <بټن کلاس = "btn" > 1 </ تڼۍ> 
  <بټن کلاس = "btn" > 2 </ تڼۍ> 
  <بټن کلاس = "btn" > 3 </ تڼۍ> 
</div>

د تولپټ مثال

د ډیرو پیچلو اجزاوو لپاره <div class="btn-group">په a کې سیټونه یوځای کړئ.<div class="btn-toolbar">

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

چک بکس او د راډیو خوندونه

د تڼۍ ګروپونه هم کولی شي د راډیو په توګه کار وکړي، چیرې چې یوازې یوه تڼۍ فعاله وي، یا د چک بکسونه، چیرې چې هر ډول بټن فعال وي. د دې لپاره جاواسکریپټ اسناد وګورئ .

جاواسکریپټ ترلاسه کړئ »

په تڼۍ ګروپونو کې ښکته کول

پورته شه! د ډراپ ډاونونو سره تڼۍ باید په انفرادي ډول د سمې رینډرینګ لپاره په خپل ځان .btn-groupکې وتړل شي..btn-toolbar

لنډیز او مثالونه

د ډراپ ډاون مینو د متحرک کولو لپاره هره تڼۍ وکاروئ دا په دننه کې ځای په ځای .btn-groupکولو او مناسب مینو مارک اپ چمتو کولو سره.

د نښه کولو بیلګه

د تڼۍ ډلې ته ورته، زموږ مارک اپ د منظم تڼۍ مارک اپ کاروي، مګر د سټایل اصلاح کولو او د بوټسټریپ ډراپ ډاون jQuery پلگ ان ملاتړ کولو لپاره د یو څو اضافو سره.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    عمل
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

د ټولو تڼیو اندازو سره کار کوي

د تڼۍ ښکته کول په هره اندازه کار کوي. ستاسو د تڼۍ اندازه .btn-large, .btn-smallیا .btn-mini.

جاوا سکرپٹ ته اړتیا لري

د بټن ډراپ ډاونونه د فعالیت لپاره د بوټسټریپ ډراپ ډاون پلگ ان ته اړتیا لري.

په ځینو حاالتو کې - لکه ګرځنده - ډراپ ډاون مینو به د لید پورټ څخه بهر وغځوي. تاسو اړتیا لرئ په لاسي ډول یا د دودیز جاوا سکرپٹ سره سمون حل کړئ.

لنډیز او مثالونه

د تڼۍ ګروپ سټایلونو او مارک اپ باندې رامینځته کول ، موږ کولی شو په اسانۍ سره د سپلایټ تڼۍ رامینځته کړو. د سپلایټ بټن په ښي خوا کې یو معیاري عمل او په ښي خوا کې د متناسب لینکونو سره یو ډراپ ډاون ټګل وړاندې کوي.

اندازه

د اضافي تڼۍ ټولګي وکاروئ .btn-mini، .btn-smallیا .btn-largeد اندازه کولو لپاره.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

د نښه کولو بیلګه

موږ د عادي تڼۍ ډراپ ډاونونو ته پراختیا ورکوو ترڅو د دوهم تڼۍ عمل چمتو کړو چې د جلا ډراپ ډاون محرک په توګه کار کوي.

<div class = "btn-group" > 
  <بټن کلاس = "btn" > عمل </ تڼۍ> 
  <بټن کلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ تڼۍ>
  <ul class = "dropdown-menu" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

ډراپ اپ مینو

د ډراپ ډاون مینو هم د سمدستي والدینو لپاره د واحد ټولګي په اضافه کولو سره له لاندې څخه پورته کیدی شي .dropdown-menu. دا به د لور لور .caretته واړوي او پخپله مینو کې ځای په ځای کړي ترڅو د پورته ښکته پرځای له لاندې څخه پورته حرکت وکړي.

<div class = "btn-group dropup" > 
  <بټن کلاس = " btn " > ډراپ اپ </ تڼۍ> 
  <بټن کلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ تڼۍ>
  <ul class = "dropdown-menu" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

ځواکمن بیس کلاس

دلته د نیوی ټول برخې - ټبونه، ګولۍ، او لیستونه - د ټولګي له لارې ورته اساس مارک اپ او سټایلونه شریکوي ..nav

کله چې وکارول شي

ټبونه او ګولۍ د منځپانګې د برخو یا د اړونده منځپانګو د پاڼو تر منځ د تګ راتګ لپاره خورا ښه دي.

د اجزاو سمون

د نیوی لینکونو تنظیم کولو لپاره، .pull-leftیا .pull-rightد کارونې ټولګي وکاروئ. دواړه ټولګي به په ټاکل شوي لوري کې د CSS فلوټ اضافه کړي.

بنسټیز ټبونه

<ul>منظم لینکونه واخلئ او اضافه کړئ .nav-tabs:

• کور
• پروفایل
• پیغامونه

<ul class = "nav nav-tabs" > 
  <li class = "فعال" > 
    <a href="#" > کور </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

اساسي ګولۍ

ورته HTML واخلئ، مګر .nav-pillsپرځای یې وکاروئ:

• کور
• پروفایل
• پیغامونه

<ul class = "nav nav-pills" > 
  <li class = "فعال" > 
    <a href="#" > کور </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

څنګه یې وخورئ

لکه څنګه چې ټبونه او ګولۍ د ډیفالټ له مخې افقی دي، یوازې دویمه ټولګي اضافه کړئ .nav-stacked، د دې لپاره چې دوی په عمودي ډول پټ شوي وي.

پټې شوي ټبونه

• کور
• پروفایل
• پیغامونه

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

ډډ شوي ګولۍ

• کور
• پروفایل
• پیغامونه

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

بډایه مینو اسانه کړي

په بوټسټریپ ټبونو او ګولیو کې د ډراپ ډاون مینو خورا اسانه دي او یوازې یو څه اضافي HTML او لږ وزن لرونکي jQuery پلگ ان ته اړتیا لري.

د جاواسکریپټ پا pageې ته لاړشئ ترڅو په بوټسټریپ کې د ډراپ ډاون پیل کولو په اړه اسناد ولولئ .

ټبونه د ښکته کیدو سره

• کور
• مرسته
• ښکته کول
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = " dropdown" > 
    <a ټولګي = "ډراپ-ډاون-ټوګل" 
       data-toggle = "غورځیدنه"
       href = "#" >
        ښکته کول
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- لینکونه -->
    </ul>
  </li>
</ul>

ګولۍ د ښکته کیدو سره

• کور
• مرسته
• ښکته کول
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = " dropdown" > 
    <a ټولګي = "ډراپ-ډاون-ټوګل" 
       data-toggle = "غورځیدنه"
       href = "#" >
        ښکته کول
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- لینکونه -->
    </ul>
  </li>
</ul>

د اپلیکیشن سټایل نیویګیشن

د نیوی لیستونه د اختیاري سرلیکونو سره د نیوی لینکونو ګروپونو جوړولو لپاره ساده او اسانه لار وړاندې کوي. دا په OS X کې د موندونکي په څیر په سایډ بارونو کې غوره کارول کیږي.

په ساختماني ډول، دوی د ټبونو او ګولیو په څیر په ورته اصلي نیوی سټایلونو کې جوړ شوي، نو کارول او دودیز کول مستقیم دي.

د شبیانو سره

د نیوی لیستونه د شبیهونو سره تجهیز کول هم اسانه دي. د ټولګي سره مناسب <i>ټګ اضافه کړئ او تاسو تنظیم شوي یاست.

افقی ویشونکي

د ټولګي سره د خالي لیست توکي په جوړولو سره افقی ویشونکی اضافه کړئ .divider، لکه:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

د نمونې nav لیست

د لینکونو لیست واخلئ او اضافه کړئ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    د لیست سرلیک
  </li>
  <li class = "فعال" > 
    <a href="#" > کور </a> _ _ 
  </li>
  <li>
    <a href="#" > کتابتون </a> _ _ 
  </li>
  ...
</ul>

د عکسونو سره مثال

ورته مثال، مګر <i>د شبیانو لپاره د ټاګونو سره.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href="#" > _ _ 
      <i class = "icon-book" ></i> 
      کتابتون
    </a>
  </li>
  ...
</ul>

څه پکې شامل دي

خپل ټبونه د ساده پلگ ان سره ژوند ته راوړو ترڅو د ټبونو له لارې د مینځپانګې ترمینځ بدل شي. بوټسټریپ د میز وړ ټبونه په څلورو سټایلونو کې مدغم کوي: پورتنۍ (ډیفالټ) ، ښیې ، ښکته او کیڼ.

د دوی ترمینځ بدلول اسانه دي او یوازې خورا لږ مارک اپ بدلولو ته اړتیا لري.

په ټبونو کې غوړیږي

د دې لپاره چې ټبونه تیاره شي، .fadeهر یو ته اضافه کړئ .tab-pane.

د jQuery پلگ ان ته اړتیا لري

ټول د میز وړ ټبونه زموږ د سپک وزن jQuery پلگ ان لخوا پرمخ وړل کیږي. د جاوا سکریپټ ډاکس پاڼې کې ژوند ته د ټب وړ ټبونو راوستلو څرنګوالي په اړه نور ولولئ .

جاواسکریپټ ترلاسه کړئ →

د جدول وړ مثال

د دې لپاره چې د ټبونو ټب کولو وړ وي، .tab-paneد هر ټب لپاره یو ځانګړی ID جوړ کړئ او په کې یې وپلټئ .tab-content.

د ښي یا کیڼ اړخ سره تړل شوي ټبونو لپاره، .nav-tabsاو .tab-contentپه کې وتړئ .tabbable.

مستقیم مارک اپ

د ټب وړ ټبونو کارول د ریپینګ div ، د ټبونو سیټ ، او د مینځپانګې د میز وړ پینونو سیټ ته اړتیا لري.

<div class = "tabbable" > <!-- یوازې د کیڼ / ښیې ټبونو لپاره اړین -->  
  <ul class = "nav nav-tabs" > 
    <li class = "فعال" ><a href = "#tab1" data-toggle = "tab" > برخه 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > برخه 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> زه په لومړۍ برخه کې یم. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> سلامونه، زه په دوهمه برخه کې یم. </p>
    </div>
  </div>
</div>

ټبونه په ښکته کې

د HTML ترتیب فلیپ کړئ او په لاندې کې د ټبونو ایښودلو لپاره ټولګي اضافه کړئ.

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ټبونه په ښي خوا کې

ټولګي بدل کړئ ترڅو ټبونه چپ اړخ ته واچوئ.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ښي خوا ته ټبونه

ښي خوا ته د ټبونو د ایښودلو لپاره ټولګي بدل کړئ.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar scaffolding

نوبار یوازې یو څو ویشونو ته اړتیا لري ترڅو د جامد یا ثابت نندارتون لپاره ښه جوړښت وکړي.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "کانټینر" > 
      ...
    </div>
  </div>
</div>

ثابت نوبار

نوبار د ویو پورټ پورتنۍ یا ښکته برخې ته د اضافي ټولګي سره په بهرنۍ برخې کې تنظیم کړئ .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

کله چې تاسو navbar وصل کړئ، په یاد ولرئ چې د لاندې پټې سیمې حساب وکړئ. 40px یا ډیر پیډینګ ته اضافه کړئ <body>. ډاډ ترلاسه کړئ چې دا د اصلي بوټسټریپ CSS وروسته او د اختیاري ځواب ویونکي CSS څخه دمخه اضافه کړئ.

د برانډ نوم

ستاسو د برانډ یا پروژې نوم ښودلو لپاره یو ساده لینک یوازې د لنگر ټګ ته اړتیا لري.

<a class = "برانډ" href = "#" >  
  د پروژې نوم
</a>

فورمې په navbar کې

په نووبار کې د فورمې په سمه توګه سټایل او موقعیت لپاره، مناسب ټولګي اضافه کړئ لکه څنګه چې لاندې ښودل شوي. د ډیفالټ فارم لپاره، شامل کړئ .navbar-formاو .pull-leftیا .pull-rightیې په سمه توګه تنظیم کړئ.

<فارم کلاس = "نوبار-فارم پل-کیڼ" > 
  <د داخلولو ډول = "متن" کلاس = "span2" >  
</form>

د یو ډیر دودیز شوي لټون فارم لپاره، په نووبار کې د ځانګړو سټایلونو لپاره داخل او داخل ته اضافه .navbar-searchکړئ .form.search-query

<form class = "navbar-search pull-left" > 
  د انپټ ډول = "متن" کلاس = "لټون-پوښتنه" ځای لرونکی = "لټون" >   
</form>

اختیاري ځواب ویونکی تغیر

ستاسو په ټاپ بار کې د مینځپانګې مقدار پورې اړه لري ، تاسو ممکن ځواب ورکوونکي اختیارونه پلي کړئ. د دې کولو لپاره، خپل د nav منځپانګې په یوه لرونکی div کې .nav-collapse.collapseوتړئ، او د نیوبار ټګل تڼۍ اضافه کړئ .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "کانټینر" > 
 
      -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- ډاډه اوسئ چې برانډ هلته پریږدئ که تاسو غواړئ دا وښودل شي -->
      <a class = "برانډ" href = "#" > د پروژې نوم </a>  
 
      <!-- هر څه چې تاسو غواړئ په 940px یا لږ کې پټ کړئ، دلته دننه ځای په ځای کړئ -->
      <div class = "nav-collapse" > 
        -->
      </div>
 
    </div>
  </div>
</div>

نوي لینکونه

د غیر منظم لیستونو له لارې د نوي توکي اضافه کول ساده دي.

<ul class = "nav" > 
  <li class = "فعال" > 
    <a href="#" > کور </a> _ _ 
  </li>
  <li><a href = "#" > لینک </a></li> 
  <li><a href = "#" > لینک </a></li> 
</ul>

تاسو کولی شئ په اسانۍ سره د خالي لیست توکي او ساده ټولګي سره خپلو نیوی لینکونو کې ویشونکي اضافه کړئ. یوازې دا د لینکونو ترمنځ اضافه کړئ:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

د اجزاو سمون

د نیوی، لټون فورمه، یا متن ترتیب کولو لپاره، .pull-leftیا د .pull-rightکارونې ټولګي وکاروئ. دواړه ټولګي به په ټاکل شوي لوري کې د CSS فلوټ اضافه کړي.

د ډراپ ډاون مینو اضافه کول

نیوی ته د ډراپ ډاونونو او ډراپ اپونو اضافه کول خورا ساده دي ، مګر زموږ د جاواسکریپټ پلگ ان کارولو ته اړتیا لري .

<ul class = "nav" > 
  <li class = " dropdown" > 
    <a href = "#" 
          ټولګي = "د ښکته کول"
          data-toggle = "ډراپ ډاون" >
          حساب
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

جاواسکریپټ ترلاسه کړئ →

په نووبار کې متن

د متن تارونه په الف کې وتړئ <.navbar-text>، معمولا <p>د مناسب مخکښ او رنګ لپاره په ټاګ کې.

ولې یې وکاروئ

د Breadcrumb نیویګیشن د کاروونکو د ښودلو لپاره د یوې لارې په توګه کارول کیږي چیرې چې دوی په اپلیکیشن یا سایټ کې دي، مګر د لومړني نیویګیشن لپاره نه. د دوی کارول لږ او لنډ وساتئ ترڅو خورا اغیزمن وي.

مثالونه

یو واحد مثال ښودل شوی لکه څنګه چې دا ممکن په ډیری پاڼو کې ښودل شي.

• کور

• کور /
• کتابتون

• کور /
• کتابتون /
• ډاټا

مارک اپ

HTML د لینکونو سره ستاسو معیاري غیر منظم لیست دی.

<ul class = "breadcrumb" > 
  <li>
    <a href="#" > کور </a> <span class = " divider " > / < / span>   
  </li>
  <li>
    <a href="#" > کتابتون </a> <span class = " divider " > / < / span>   
  </li>
  <li class = "فعال" > ډاټا </li> 
</ul>

کله چې وکارول شي

الټرا ساده او لږ تر لږه سټایل شوی پاڼه د Rdio لخوا الهام شوې، د ایپسونو او لټون پایلو لپاره عالي. لوی بلاک له لاسه ورکول سخت دي، په اسانۍ سره د توزیع وړ، او لوی کلک ساحې چمتو کوي.

د رسمي پاڼې لینکونه

لینکونه د تنظیم وړ دي او په یو شمیر شرایطو کې د سم ټولګي سره کار کوي. .disabledد نه کلیک کولو وړ لینکونو او .activeاوسنۍ پاڼې لپاره.

انعطاف منونکی سمون

د صفحې د لینکونو د سمون لپاره د دوو اختیاري ټولګیو څخه یو اضافه کړئ: .pagination-centeredاو .pagination-right.

مثالونه

د ډیفالټ صفحې اجزا انعطاف وړ ده او په یو شمیر تغیراتو کې کار کوي.

مارک اپ

په . <div>_<ul>

<div class = "صفحه کول" > 
  <ul>
    <li><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 = "#" > بل </a></li> 
  </ul>
</div>

د پیجر په اړه

د پیجر اجزا د روښنايي مارک اپ او حتی روښانه سټایلونو سره د ساده صفحې پلي کولو لپاره د لینکونو مجموعه ده. دا د ساده سایټونو لکه بلاګونو یا مجلو لپاره خورا ښه دی.

اختیاري معلول حالت

د پیجر لینکونه هم .disabledد صفحې څخه عمومي ټولګي کاروي.

ډیفالټ مثال

د ډیفالټ په واسطه، پیجر مرکزونه لینکونه لري.

• مخکینی
• بل

<ul class = "پیجر" > 
  <li>
    <a href="#" > پخوانی </a> _ _ 
  </li>
  <li>
    <a href="#" > بل </a> _ _ 
  </li>
</ul>

تړل شوي لینکونه

په بدیل سره، تاسو کولی شئ هر لینک د اړخونو سره سم کړئ:

• ← زوړ
• نوی →

<ul class = "پیجر" > 
  <li class = "پخوانی" > 
    <a href="#" > & larr ; زوړ </a> 
  </li>
  <li class = "بل" > 
    <a href="#" > نوی & rarr ; </a> 
  </li>
</ul>

په اړه

بیجونه کوچني، ساده برخې دي چې د شاخص یا یو ډول شمیرې ښودلو لپاره. دوی عموما د بریښنالیک پیرودونکو لکه Mail.app یا د پش خبرتیاو لپاره په ګرځنده ایپسونو کې موندل کیږي.

شته ټولګي

بوټسټریپ ستاسو په سایټ کې د مینځپانګې ښودلو لپاره د هیرو واحد په نوم یو سپک وزن لرونکی ، انعطاف وړ برخه چمتو کوي. دا د بازارموندنې او مینځپانګې - درنو سایټونو کې ښه کار کوي.

مارک اپ

خپل مینځپانګه په داسې divډول لپاسه کړئ:

<div class = "hero-unit" > 
  <h1> سرلیک </h1>
  <p> ټګ لاین </p>
  <p>
    <a class="btn btn-primary btn-large" > 
      نور زده کړئ
    </a>
  </p>
</div>

یو ساده شیل د دې لپاره چې h1په یوه پاڼه کې د مینځپانګې برخې په مناسبه توګه ځای په ځای کړي او برخې برخې کړي. دا کولی شي h1د ډیفالټ small، عنصر او همدارنګه ډیری نور اجزا (د اضافي سټایلونو سره) وکاروي.

<div class = "page-header" > 
  <h1> د مثال پاڼې سرلیک </h1>
</div>

ډیفالټ تمبیلونه

د ډیفالټ په واسطه، د بوټسټریپ تمبیلونه د لږترلږه اړین مارک اپ سره تړل شوي عکسونو ښودلو لپاره ډیزاین شوي.

په لوړه کچه د تنظیم وړ

د یو څه اضافي مارک اپ سره، دا ممکنه ده چې هر ډول HTML منځپانګې لکه سرلیکونه، پراګرافونه، یا تڼۍ په تمبیلونو کې اضافه کړئ.

• 

  د تمبیل لیبل

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  عمل عمل

• 

  د تمبیل لیبل

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  عمل عمل

ولې تمبیلونه وکاروئ

تمبیلونه (پخوا .media-gridتر v1.4 پورې) د عکسونو یا ویډیوګانو ، د عکس لټون پایلو ، پرچون محصولاتو ، پورټ فولیو او نور ډیر څه لپاره عالي دي. دوی کولی شي لینکونه یا جامد مواد وي.

ساده، انعطاف منونکی مارک اپ

د تمبیل مارک اپ ساده دی - د ulهر شمیر liعناصرو سره ټول هغه څه دي چې ورته اړتیا وي. دا خورا انعطاف منونکی هم دی ، د هر ډول مینځپانګې لپاره یوازې یو څه ډیر مارک اپ سره ستاسو مینځپانګې وتړئ.

د گرډ کالم اندازه کاروي

په نهایت کې ، د تمبیل جز د تمبنیل ابعادو کنټرول لپاره د موجوده گرډ سیسټم ټولګي — لکه .span2یا — کاروي..span3

مارک اپ

لکه څنګه چې مخکې یادونه وشوه، د تمبیلونو لپاره اړین مارک اپ روښانه او مستقیم دی. دلته د تړل شوي عکسونو لپاره ډیفالټ ترتیب ته یو نظر دی :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href="#" class="thumbnail" > _ _ _ _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

په تمبیلونو کې د دودیز HTML منځپانګې لپاره، مارک اپ یو څه بدلون کوي. د بلاک کچې مینځپانګې ته هرچیرې اجازه ورکولو لپاره ، موږ <a>د ورته ډول لپاره تبادله کوو <div>:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> د تمبیل لیبل </h5>
      <p> د تمبنیل سرلیک دلته دلته... </p>
    </div>
  </li>
  ...
</ul>

نور مثالونه

خپل ټول اختیارونه د مختلف گرډ ټولګیو سره چې تاسو ته شتون لري وپلټئ. تاسو کولی شئ مختلف اندازې مخلوط او میچ کړئ.

بیا لیکل شوی بیس کلاس

د Bootstrap 2 سره، موږ د بیس کلاس ساده کړی .alertدی: پرځای .alert-message. موږ لږ تر لږه اړین مارک اپ هم کم کړی <p>دی - د ډیفالټ لخوا هیڅ اړتیا نشته، یوازې بهرنی <div>.

یو واحد خبرتیا پیغام

د لږ کوډ سره د ډیر دوامدار اجزا لپاره، موږ د بلاک خبرتیاو لپاره توپیر لرونکی لید لرې کړی، هغه پیغامونه چې د ډیرو پیډینګ سره راځي او معمولا ډیر متن. ټولګی هم بدل شوی دی .alert-block.

د جاوا سکرپٹ سره ښه ځي

بوټسټریپ د عالي jQuery پلگ ان سره راځي چې د خبرتیا پیغامونو ملاتړ کوي ، د دوی ګړندي او اسانه ګوښه کول.

پلگ ان ترلاسه کړئ »

بېلګې خبرتیاوې

خپل پیغام او اختیاري نږدې آیکون په یوه ډیوی کې د ساده ټولګي سره وتړئ.

<div class = "خبرتیا" > 
  <button class = "close" data- dismisss = "alert" > × </button>  
  <strong> خبرداری! </strong> د ځان لپاره غوره وګورئ، تاسو ډیر ښه نه یاست.
</div>

پورته شه! iOS وسایل href="#"د خبرتیاو د ګوښه کولو لپاره اړتیا لري. ډاډ ترلاسه کړئ چې دا او د لنگر نږدې شبیانو لپاره د ډیټا ځانګړتیا شامل کړئ. په بدیل سره، تاسو کولی شئ <button>د ډاټا ځانګړتیا سره یو عنصر وکاروئ، کوم چې موږ د خپلو اسنادو لپاره غوره کړی دی. کله چې کاروئ <button>، تاسو باید شامل type="button"کړئ یا ستاسو فورمې ممکن ونه سپارل شي.

په اسانۍ سره د معیاري خبرتیا پیغام د دوه اختیاري ټولګیو سره پراخ کړئ: .alert-blockد ډیرو پیډینګ او متن کنټرولونو .alert-headingلپاره او د ورته سرلیک لپاره.

<div class = "alert alert-block" > 
  <a class = "close" data- dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > خبرداری! </h4> 
  غوره ځان وګورئ، تاسو نه یاست ...
</div>

خطا او خطر

<div class = "alert alert-error" > 
  ...
</div>

بریالیتوب

<div class = "خبرتیا الرټ-بریالی" > 
  ...
</div>

معلومات

<div class = "alert alert-info" > 
  ...
</div>

اساسی

د ډیفالټ پرمختګ بار د عمودی تدریجي سره.

<div class = "پرمختګ" > 
  <div class = "bar" 
       سټایل = " پلنوالی : 60 ٪؛ " ></div> 
</div>

پټه

د پټو اغیزو رامینځته کولو لپاره تدریجي کاروي (نه IE).

<div class = "progress progress-striped" > 
  <div class = "bar" 
       سټایل = " پلورل : 20 ٪؛ " ></div> 
</div>

متحرک

پټه بیلګه اخلي او متحرک کوي (نه IE).

<div class = "progress progress-striped 
     فعال" >
  <div class = "bar" 
       سټایل = " پلنوالی : 40 ٪؛ " ></div> 
</div>

اضافي رنګونه

د پرمختګ بارونه د ورته سټایلونو لپاره ځینې ورته تڼۍ او خبرتیا ټولګي کاروي.

پټې بارونه

د جامد رنګونو سره ورته، موږ مختلف پټې شوي پرمختګ بارونه لرو.

چلند

د پرمختګ بارونه د CSS3 لیږدونه کاروي، نو که تاسو په متحرک ډول د جاوا سکرپٹ له لارې پلنوالی تنظیم کړئ، نو دا به په اسانۍ سره اندازه شي.

که تاسو .activeټولګي وکاروئ، ستاسو د .progress-stripedپرمختګ بارونه به پټې له کیڼ څخه ښیې ته متحرک کړي.

د براوزر ملاتړ

د پرمختګ بارونه د دوی ټولو اغیزو ترلاسه کولو لپاره CSS3 تدریجي ، لیږدونه ، او متحرکات کاروي. دا ځانګړتیاوې په IE7-9 یا د فایرفوکس پخوانیو نسخو کې نه ملاتړ کیږي.

اوپیرا او IE پدې وخت کې د متحرکاتو ملاتړ نه کوي.

ویلز

په یو عنصر باندې د ساده تاثیر په توګه څاه وکاروئ ترڅو دا د انسټیټ تاثیر ورکړي.

<div class = "ښه" > 
  ...
</div>

آیکون بند کړئ

د منځپانګې لکه موډلونو او خبرتیاو د ردولو لپاره د عمومي نږدې آیکون څخه کار واخلئ.

×

<بټن کلاس = "بند" > × </ تڼۍ> 

iOS وسیلې د کلیک پیښو لپاره یو href="#" ته اړتیا لري که تاسو د لنگر کاروئ.

<a class = "بند" href = "#" > × </a>