بوت استرپ

من قبلا برای مشتری‌هام که کاری انجام می‌دادم، صفحه مدیریتش رو هم خودم درست می‌کردم. درواقع همه کار رو خودم انجام می‌دادم، چرخ رو از نو می‌ساختم! کارم اشتباه بود، دوتا هم دلیل داشت: اول اینکه نمی‌دونستم فریمورک های آماده هست، وبعدشم وقتی فهمیدم همچین چیزایی هست، می‌ترسیدم برم سراغشون، یکم ترسناک به نظر می‌رسیدن،‌ ولی همش به خاطر تنبلی بود.

بوت استرپ احتمالا پرطرفدار ترین فریم ورک طراحی سمت کاربره (front-end).  دوتا از توسعه دهنده‌های توییتر این پروژه رو شروع کردن و سال ۲۰۱۱ متن بازش کردن.

بوت استرپ یک سیستم گرید ۱۲ ستونه رو در اختیار توسعه دهنده قرار می‌ده که توش از صفحه‌های کوچیک، مثل موبایل تا صفحه نمایش‌های عریض رو میزی رو پشتیبانی می‌کنه. یعنی برای هر کدوم از این‌ها کلاس‌های جداگانه داره، شما می‌تونید یک المان رو طوری بسازید که تو صفحه موبایل یک درصدی از صفحه نمایش رو اشغال کنه و توی یک مانیتور عریض یه درصد دیگه، یا حتی می‌تونید طوری از این کلاس‌ها استفاده کنید که محتوای شما با توجه به اندازه صفحه نمایش کاربر نشون داده بشه یا نشه.

مثال زیر که از ویکیپدیا آوردمش نحوه استفاده از بوت استرپ رو نشون میده:

[code]
<!DOCTYPE html>
<html>
<head>
<title>Example of Twitter Bootstrap</title>
<!– Include the bootstrap stylesheets –>
<link href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<h1>Search</h1>
<label>Example for a simple search form.</label>
<!– Search form with input field and button –>
<form class=”well form-search”>
<input type=”text” class=”input-medium search-query”>
<button type=”submit” class=”btn btn-primary”>Search</button>
</form>
<h2>Results</h2>
<!– Table with alternating cell background color and outer frame –>
<table class=”table table-striped table-bordered”>
<thead>
<tr>
<th>#</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lorem ipsum dolor …</td>
</tr>
<tr>
<td>2</td>
<td>Ut enim ad minim veniam, …</td>
</tr>
<tr>
<td>3</td>
<td>Duis aute irure dolor …</td>
</tr>
</tbody>
</table>
</div>
<!– JavaScript placed at the end of the document so the pages load faster –>
<!– Optional: Include the jQuery library –>
<script src=”//code.jquery.com/jquery-1.7.2.min.js”></script>
<!– Optional: Incorporate the Bootstrap JavaScript plugins –>
<script src=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js”></script>
</body>
</html>
[/code]

خروجی کار به این شکل میشه:

Twitter-bootstrap-example-firefox-10

مستندات بوت استرپ خیلی خوب و کامل تو سایتش هست، کلی مطلب دیگه هم رو اینترنت میتونید در موردش پیدا کنید.

خلاصه، هیچ وقت کارایی رو که قبلا انجام شدن، خیلی خوب هم انجام شدن، خودتون دوباره انجام ندید.

پانویس: یه قالب مدیر سایت رو که بر اساس بوت استرپ بود رو راست به چپ کردم و اینجا گذاشتم.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.