اجزا

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

د تڼۍ ډلې

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

غوره تمرینات

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

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

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

ډیفالټ مثال

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

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

د تولپټ مثال

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

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

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

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

تڼۍ ښکته کول

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. عمل
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- د ښکته کولو مینو لینکونه -->
  8. </ul>
  9. </div>

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

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

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

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

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


د ویشلو تڼۍ ډراپ ډاون

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

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

اندازه

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

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

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

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

  1. <div class = "btn-group" >
  2. <بټن کلاس = "btn" > عمل </ تڼۍ>
  3. <بټن کلاس = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </ تڼۍ>
  6. <ul class = "dropdown-menu" >
  7. <!-- د ښکته کولو مینو لینکونه -->
  8. </ul>
  9. </div>

ډراپ اپ مینو

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

  1. <div class = "btn-group dropup" >
  2. <بټن کلاس = " btn " > ډراپ اپ </ تڼۍ>
  3. <بټن کلاس = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </ تڼۍ>
  6. <ul class = "dropdown-menu" >
  7. <!-- د ښکته کولو مینو لینکونه -->
  8. </ul>
  9. </div>

د ملټيکون پاڼې پاڼې کول

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

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

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

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

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

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

مثالونه

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

مارک اپ

په . <div>_<ul>

  1. <div class = "صفحه کول" >
  2. <ul>
  3. <li><a href = "#" > مخکینی </a></li>
  4. <li class = "فعال" >
  5. <a href="#" > 1 </a> _ _
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > بل </a></li>
  11. </ul>
  12. </div>

پیجر د چټکو پخوانیو او راتلونکو لینکونو لپاره

د پیجر په اړه

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

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

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

ډیفالټ مثال

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

  1. <ul class = "پیجر" >
  2. <li>
  3. <a href="#" > پخوانی </a> _ _
  4. </li>
  5. <li>
  6. <a href="#" > بل </a> _ _
  7. </li>
  8. </ul>

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

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

  1. <ul class = "پیجر" >
  2. <li class = "پخوانی" >
  3. <a href="#" > & larr ; زوړ </a>
  4. </li>
  5. <li class = "بل" >
  6. <a href="#" > نوی & rarr ; </a>
  7. </li>
  8. </ul>
لیبلونه مارک اپ
ډیفالټ <span class="label">Default</span>
بریالیتوب <span class="label label-success">Success</span>
خبرتیا <span class="label label-warning">Warning</span>
مهم <span class="label label-important">Important</span>
معلومات <span class="label label-info">Info</span>
انعطاف <span class="label label-inverse">Inverse</span>

په اړه

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

شته ټولګي

نوم بېلګه مارک اپ
ډیفالټ 1 <span class="badge">1</span>
بریالیتوب 2 <span class="badge badge-success">2</span>
خبرتیا 4 <span class="badge badge-warning">4</span>
مهم 6 <span class="badge badge-important">6</span>
معلومات ۸ <span class="badge badge-info">8</span>
انعطاف 10 <span class="badge badge-inverse">10</span>

د اتل واحد

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

مارک اپ

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

  1. <div class = "hero-unit" >
  2. <h1> سرلیک </h1>
  3. <p> ټګ لاین </p>
  4. <p>
  5. <a class="btn btn-primary btn-large" >
  6. نور زده کړئ
  7. </a>
  8. </p>
  9. </div>

سلام نړی!

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

نور زده کړئ

د پاڼې سرلیک

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

  1. <div class = "page-header" >
  2. <h1> د مثال پاڼې سرلیک </h1>
  3. </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

مارک اپ

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

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href="#" class="thumbnail" > _ _ _ _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> د تمبیل لیبل </h5>
  6. <p> د تمبنیل سرلیک دلته دلته... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

نور مثالونه

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

د سپک وزن ډیفالټ

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

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

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

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


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

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

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

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

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

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

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

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

خبرتیا!

خپل ځان ته غوره وګورئ، تاسو ډیر ښه نه ښکاري. Nulla vitae elit libero, a pharatra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

متناسب بدیلونه د خبرتیا مفهوم بدلولو لپاره اختیاري ټولګي اضافه کړئ

خطا او خطر

اوه ټویټ! یو څو شیان بدل کړئ او بیا د سپارلو هڅه وکړئ.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

بریالیتوب

ډیر ښه! تاسو دا مهم خبرتیا پیغام په بریالیتوب سره ولولئ.
  1. <div class = "خبرتیا الرټ-بریالی" >
  2. ...
  3. </div>

معلومات

پورته شه! دا خبرتیا ستاسو پام ته اړتیا لري، مګر دا خورا مهم نه دی.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

مثالونه او مارک اپ

اساسی

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

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

پټه

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

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

متحرک

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

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

اختیارونه او د براوزر ملاتړ

اضافي رنګونه

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

پټې بارونه

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

چلند

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

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

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

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

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

ویلز

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

وګوره، زه په یوه څاه کې یم!
  1. <div class = "ښه" >
  2. ...
  3. </div>

آیکون بند کړئ

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

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

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

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