مباحث منوهای پایین افتادنی و برگهها (tabs) در بوت استرپ 2 و 3 یکسان هستند و نکات آنها در بحث «نگاهی به اجزای تعاملی Twitter Bootstrap» عنوان شدهاند. در ادامه به اجزای جدیدی خواهیم پرداخت که مختص بوت استرپ 3 بوده و از تازههای آن بهشمار میروند. همچنین اجزایی را که در بررسی بوت استرپ 2 به آنها پرداخته نشد، مانند Carousels و Scroll spy، نیز بررسی میکنیم.
پنلها و آکاردئونها
پنلهای آکاردئونی، بسیار شبیه به برگهها عمل میکنند. با کلیک بر روی یک سربرگ، محتوای مخفی شده آن نمایش داده میشود. این اعمال نیز توسط اجزای جاوا اسکریپتی بوت استرپ، به کمک jQuery عمل میکنند.
یک مثال:
- ابتدا کل ناحیه مدنظر باید در یک div با کلاس panel-group محصور شود؛ به همراه یک id دلخواه. از این id در ویژگیهای data-parent عنوانهای هر پنل این گروه استفاده میشود. به این ترتیب سیستم جاوا اسکریپتی آن متوجه خواهد شد که باید داخل چه ناحیهای از صفحه عمل کند.
- پس از مشخص سازی آغاز پنل گروهی مدنظر، هر گروه، داخل یک div با کلاس panel panel-default قرار خواهد گرفت. به این ترتیب اولین پنل آکاردئونی مثال، شکل میگیرد.
- سپس داخل هر پنل مجزا، باید توسط panel-heading مشخص کنیم که عنوان این پنل و محتوای خاص این عنوان کجا باید قرار گیرند. همچنین به کمک panel-collapse collapse in، محتوایی را که با کلیک بر روی عنوان هر پنل به صورت خودکار ظاهر خواهد شد را معرفی میکنیم.
در ادامه میتوان پنلهای بیشتری را به این مجموعه و گروه افزود.
- پنلی که قرار است در ابتدای کار باز باشد، دارای کلاس collapse in خواهد بود؛ مابقی فقط collapse دارند.
بررسی کامپوننت Carousels
بوت استرپ به همراه کامپوننت اسلایدشو توکاری است به نام Carousel که بدون نیاز به حتی یک سطر کدنویسی جاوا اسکریپت اضافی، یک اسلاید شو بسیار حرفهای را ارائه میدهد. مثالی را در این مورد در ادامه ملاحظه میکنید:
توضیحات:
- در قسمت carousel-inner این کامپوننت، لیست تک تک تصاویر مورد نیاز قرار خواهند گرفت. تصویر آغازین دارای div ایی محصور کننده با کلاس active item است و مابقی کلاس item دارند.
- مرحله بعد، کار افزودن سیستم راهبری و حرکت بین تصاویر اضافه شده است. این سیستم چیزی نیست جز چند لینک مزین شده با کلاسهای left carousel-control و همچنین right carousel-control. ویژگیهای data-slide این لینکها نیز مشخص کننده اعمالی هستند که کامپوننت جاوا اسکریپتی carousel قرار است انجام دهد. برای مثال حرکت به قبل یا بعد. همچنین باید دقت داشت که href این لینکها به id مرتبط با div اصلی دربرگیرنده این قسمت از صفحه اشاره میکند. از یک سری گلیف آیکن نیز برای نمایش فلش رو به چپ و راست نیز در اینجا استفاده شده است.
- قسمت لیست مرتبط دارای کلاس carousel-indicators، در حقیقت مشخص کننده سه دایره کوچکی است که در تصویر فوق ملاحظه میکنید. به ازای هر تصویر، یک مورد را باید افزود. در اینجا data-target هر آیتم به id مرتبط با div محصور کننده کل اسلایدشو اشاره میکند. data-slide-toها به شماره تصویر متناظر هر آیتم متصل خواهند شد. ایندکس آغازین این آیتمها از صفر شروع میشود.
بررسی کامپوننت Scroll spy
اگر به مستندات رسمی بوت استرپ مراجعه کنید، منوی کنار صفحه با لغزش صفحه به سمت پایین ثابت است؛ اما به ازای هر سرفصل جدیدی در صفحه، آیتم فعال این منو نیز به صورت خودکار تغییر میکند. این قابلیت توسط کامپوننت Scroll spy ایجاد شده است. یک مثال:
توضیحات:
- کار با ایجاد یک section جدید که حاوی منوی ثابت کنار صفحه است، شروع میشود. این section دارای کلاس scrollspy میباشد. داخل این section لیست عناوین منو قرار میگیرند که ul آن دارای کلاس nav nav-list affix خواهد بود. affix سبب میشود تا این لیست در کنار صفحه ثابت نمایش داده شود و همواره نمایان باشد.
- نکته مهم لیست آیتمهای منو، مقادیر href لینکهای آن است. این مقادیر باید به id محتوای متناظر اشاره کنند. این محتواها را در ادامهی کار ملاحظه میکنید.
- به علاوه اگر به تگ body در ابتدای کار دقت کرده باشید، ویژگیهای data-spy و هدفی که قرار است تحت نظر قرار گیرد به آن اضافه شدهاست.
- تا اینجا این سیستم کار میکند؛ اما اگر صفحه را به بالا و پایین حرکت دهید، پس زمینه آیتم فعال، تغییر رنگ نمیدهد. برای این منظور نیاز است، به CSS سفارشی خود، چند سطر ذیل را اضافه کرد:
فایلهای نهایی این قسمت را از اینجا نیز میتوانید دریافت کنید:
bs3-sample04.zip
پنلها و آکاردئونها
پنلهای آکاردئونی، بسیار شبیه به برگهها عمل میکنند. با کلیک بر روی یک سربرگ، محتوای مخفی شده آن نمایش داده میشود. این اعمال نیز توسط اجزای جاوا اسکریپتی بوت استرپ، به کمک jQuery عمل میکنند.
یک مثال:
<div class="container"> <h4 class="alert alert-info"> پنل آکاردئونی</h4> <div class="row"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#vacc" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"> <span class="glyphicon glyphicon-pushpin"></span>اطلاعات یک</a> </h4> </div> <div id="vacc" class="panel-collapse collapse in"> <div class="panel-body"> <p> متن متن متن متن .......</p> <p> <a href="#" class="btn btn-info">بیشتر >></a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#checkups" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"> <span class="glyphicon glyphicon-ok"></span>اطلاعات 2</a> </h4> </div> <div id="checkups" class="panel-collapse collapse"> <div class="panel-body"> <p> متن متن متن متن .......</p> <p> <a href="#" class="btn btn-info">بیشتر >></a></p> </div> </div> </div> </div> <!-- end accordion --> </div> <!-- end row --> </div> <!-- /container -->
توضیحات:
- ابتدا کل ناحیه مدنظر باید در یک div با کلاس panel-group محصور شود؛ به همراه یک id دلخواه. از این id در ویژگیهای data-parent عنوانهای هر پنل این گروه استفاده میشود. به این ترتیب سیستم جاوا اسکریپتی آن متوجه خواهد شد که باید داخل چه ناحیهای از صفحه عمل کند.
- پس از مشخص سازی آغاز پنل گروهی مدنظر، هر گروه، داخل یک div با کلاس panel panel-default قرار خواهد گرفت. به این ترتیب اولین پنل آکاردئونی مثال، شکل میگیرد.
- سپس داخل هر پنل مجزا، باید توسط panel-heading مشخص کنیم که عنوان این پنل و محتوای خاص این عنوان کجا باید قرار گیرند. همچنین به کمک panel-collapse collapse in، محتوایی را که با کلیک بر روی عنوان هر پنل به صورت خودکار ظاهر خواهد شد را معرفی میکنیم.
در ادامه میتوان پنلهای بیشتری را به این مجموعه و گروه افزود.
- پنلی که قرار است در ابتدای کار باز باشد، دارای کلاس collapse in خواهد بود؛ مابقی فقط collapse دارند.
بررسی کامپوننت Carousels
بوت استرپ به همراه کامپوننت اسلایدشو توکاری است به نام Carousel که بدون نیاز به حتی یک سطر کدنویسی جاوا اسکریپت اضافی، یک اسلاید شو بسیار حرفهای را ارائه میدهد. مثالی را در این مورد در ادامه ملاحظه میکنید:
<div class="container"> <h4 class="alert alert-info"> اسلاید شو</h4> <div class="row"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- carousel-indicators --> <section class="carousel-inner"> <div class="active item"> <img src="images/01.jpg" alt="Photo 1"></div> <div class="item"> <img src="images/02.png" alt="Photo 2"></div> <div class="item"> <img src="images/03.jpg" alt="Photo 3"></div> </section><!-- carousel-inner --> <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"> </span></a><a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <!-- myCarousel --> </div> <!-- end row --> </div>
توضیحات:
- در قسمت carousel-inner این کامپوننت، لیست تک تک تصاویر مورد نیاز قرار خواهند گرفت. تصویر آغازین دارای div ایی محصور کننده با کلاس active item است و مابقی کلاس item دارند.
- مرحله بعد، کار افزودن سیستم راهبری و حرکت بین تصاویر اضافه شده است. این سیستم چیزی نیست جز چند لینک مزین شده با کلاسهای left carousel-control و همچنین right carousel-control. ویژگیهای data-slide این لینکها نیز مشخص کننده اعمالی هستند که کامپوننت جاوا اسکریپتی carousel قرار است انجام دهد. برای مثال حرکت به قبل یا بعد. همچنین باید دقت داشت که href این لینکها به id مرتبط با div اصلی دربرگیرنده این قسمت از صفحه اشاره میکند. از یک سری گلیف آیکن نیز برای نمایش فلش رو به چپ و راست نیز در اینجا استفاده شده است.
- قسمت لیست مرتبط دارای کلاس carousel-indicators، در حقیقت مشخص کننده سه دایره کوچکی است که در تصویر فوق ملاحظه میکنید. به ازای هر تصویر، یک مورد را باید افزود. در اینجا data-target هر آیتم به id مرتبط با div محصور کننده کل اسلایدشو اشاره میکند. data-slide-toها به شماره تصویر متناظر هر آیتم متصل خواهند شد. ایندکس آغازین این آیتمها از صفر شروع میشود.
بررسی کامپوننت Scroll spy
اگر به مستندات رسمی بوت استرپ مراجعه کنید، منوی کنار صفحه با لغزش صفحه به سمت پایین ثابت است؛ اما به ازای هر سرفصل جدیدی در صفحه، آیتم فعال این منو نیز به صورت خودکار تغییر میکند. این قابلیت توسط کامپوننت Scroll spy ایجاد شده است. یک مثال:
<body id="articles" data-spy="scroll" data-target=".scrollspy"> <div class="container"> <h4 class="alert alert-info"> Scroll spy</h4> <div id="articlesindex" class="row"> <section class="scrollspy clearfix col col-lg-3 hidden-sm"> <ul class="nav nav-list affix"> <li><a href="#item1"><span class="glyphicon glyphicon-user"></span>Item 1</a></li> <li><a href="#item2"><span class="glyphicon glyphicon-user"></span>Item 2</a></li> <li><a href="#item3"><span class="glyphicon glyphicon-user"></span>Item 3</a></li> </ul> <!-- nav-list --> </section><!-- scrollspy --> <section class="col col-lg-9"> <article id="item1" class="media"> <h2> item1</h2> <div class="media-body"> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> </div> </article> <article id="item2" class="media"> <h2> item2</h2> <div class="media-body"> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> </div> </article> <article id="item3" class="media"> <h2> item3</h2> <div class="media-body"> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> </div> </article> </section><!-- artistinfo --> </div> <!-- end row --> </div> <!-- /container --> <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="Scripts/bootstrap-rtl.js"></script> </body>
توضیحات:
- کار با ایجاد یک section جدید که حاوی منوی ثابت کنار صفحه است، شروع میشود. این section دارای کلاس scrollspy میباشد. داخل این section لیست عناوین منو قرار میگیرند که ul آن دارای کلاس nav nav-list affix خواهد بود. affix سبب میشود تا این لیست در کنار صفحه ثابت نمایش داده شود و همواره نمایان باشد.
- نکته مهم لیست آیتمهای منو، مقادیر href لینکهای آن است. این مقادیر باید به id محتوای متناظر اشاره کنند. این محتواها را در ادامهی کار ملاحظه میکنید.
- به علاوه اگر به تگ body در ابتدای کار دقت کرده باشید، ویژگیهای data-spy و هدفی که قرار است تحت نظر قرار گیرد به آن اضافه شدهاست.
- تا اینجا این سیستم کار میکند؛ اما اگر صفحه را به بالا و پایین حرکت دهید، پس زمینه آیتم فعال، تغییر رنگ نمیدهد. برای این منظور نیاز است، به CSS سفارشی خود، چند سطر ذیل را اضافه کرد:
.scrollspy .nav > li.active{ background: lightgray; }
فایلهای نهایی این قسمت را از اینجا نیز میتوانید دریافت کنید:
bs3-sample04.zip