میخوام درمورد ایجاد پنل با استفاده از بوت استراپ براتون توضیح بدم .باماهمراه بمانید.
معرفی پنل های twitter bootstrap 3
گاهی اوقات ممکن است تمایل داشته باشید بنا به دلایلی محتوای خود را داخل یک باکس قرار دهید. در چنین موقعیتی مولفه ی پنل می تواند بسیار مفید باشد. در اساسی ترین فرم، مولفه ی پنل حاشیه و لایه هایی را در اطراف محتوا به کار می برد.
در اینجا مثالی را می بینید از ایجاد پنل ها با تویتر بوت استرپ
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
<div class=”panel panel-default”>
<div class=”panel-body”>
Look, I’m in a panel!
</div>
</div>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
پنل هایی با تیتر
شما می توانید با استفاده از .panel-heading classبه پنل های خود عنوان اضافه کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
<div class=”panel panel-default”>
<div class=”panel-heading”>
This Page is Disabled
</div>
<div class=”panel-body”>
This page is temporarily disabled by the site administrator for some reason. <br><a href=”#”>
Click here
</a> to enable the page.
</div>
</div>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
همچنین می توانید با گروه.panel-title عناصر تیتر را ازh1 تا h6 وارد کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
<div class=”panel panel-default”>
<div class=”panel-heading”>
<h1 class=”panel-title”>
Panel Title
</h1>
</div>
<div class=”panel-body”>
Loremipsum dolor sit amet, consecteturadipiscingelit. Nam eusemtempor, varius quam at, luctus dui. Mauris magna metus, dapibusnecturpisvel, semper malesuada ante. Vestibulum id metus ac nislbibendumscelerisque non nonpurus.
</div>
</div>
پنل هایی با فوتر
مانند تیتر می توانید با استفاده از گروه .panel-footer بخش فوتر نیزبه پنل های خود اضافه کنید. فوتر پنل می تواند برای طبقه بندی دکمه ها یا متن ثانویه استفاده شود.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
<div class=”panel panel-default”>
<div class=”panel-body”>
This page is temporarily disabled by the site administrator for some reason.
</div>
<div class=”panel-footer clearfix”>
<div class=”pull-right”>
<a class=”btn btn-primary” href=”#”>
Learn More
</a>
<a class=”btn btn-default” href=”#”>
Go Back
</a>
</div>
</div>
</div>
خروجی مثال بالا مانند زیر می باشد.
پنل هایی با موقعیت های متنی
مانند دیگر مولفه ها می توانید گروه های وضعیت متنی مانند .panel-primary و .panel-success, .panel-info و .panel-warning, یا .panel-dangerرا روی مولفه های پنل اضافه کنید تا آن را با معنا تر و مورد توجه یوزرهای بیشتر قرار دهید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
<div class=”panel panel-primary”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
۳۰۱ Moved Permanently
</h3>
</div>
<div class=”panel-body”>
The requested page has been permanently moved to a new location.
</div>
</div>
<div class=”panel panel-success”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
۲۰۰ OK
</h3>
</div>
<div class=”panel-body”>
The server successfully processed the request.
</div>
</div>
<div class=”panel panel-info”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
۱۰۰ Continue
</h3>
</div>
<div class=”panel-body”>
The client should continue with its request.
</div>
</div>
<div class=”panel panel-warning”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
۴۰۰ Bad Request
</h3>
</div>
<div class=”panel-body”>
The request cannot be fulfilled due to bad syntax.
</div>
</div>
<div class=”panel panel-danger”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
۵۰۳ Service Unavailable
</h3>
</div>
<div class=”panel-body”>
The server is temporarily unable to handle the request.
</div>
</div>
خروجی مثال بالا مانند زیر می باشد .
Bootstrap
قرار دادن گروه های لیست و جدول ها در داخل پنل ها شما می توانید هر جدول بدون مرزی راوارد پنل کنید تا از این طریق آنها دا آموزنده تر کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
<div class=”panel panel-default”>
<!– Default panel contents –>
<div class=”panel-heading”>
User Information
</div>
<div class=”panel-body”>
<p>The following table contains some personal information about users.</p>
</div>
<!– Table –>
<table class=”table”>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</div>
خروجی مثال بالا مانند زیر می باشد
Bootstrap
همچنین می توانید گروه های لیست عریض را وارد هر پنلی کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
<div class=”panel panel-default”>
<!– Default panel contents –>
<div class=”panel-heading”>
Products
</div>
<div class=”panel-body”>
<p>The following products are currently available on our store.</p>
</div>
<!– List group –>
<div class=”list-group”>
<a class=”list-group-item” href=”#”>
Mobile Phones <span class=”badge”>
۵۰
</span>
</a>
<a class=”list-group-item” href=”#”>
Laptops & Desktops <span class=”badge”>
۱۴۵
</span>
</a>
<a class=”list-group-item” href=”#”>
Tablets <span class=”badge”>
۳۰
</span>
</a>
<a class=”list-group-item” href=”#”>
Audio & Video Players <span class=”badge”>
۶۵
</span>
</a>
<a class=”list-group-item” href=”#”>
Camera <span class=”badge”>
۸
</span>
</a>
</div>
</div>
Bootstrap
