همانطور كه در مقاله بوت استرپ چيست گفتيم، بوت استرپ يكي از رايج ترين فريم ورك هاي HTML و CSS ميباشد كه براي طراحي سايت ريسپانسيو منطبق با گوشي تلفن همراه به كار مي رود. مثال كدنويسي زير به سادگي نحوه طراحي يك صفحه با بوت استرپ را نشان مي دهد:
<div class="container">
<div class="jumbotron">
<h1>Your First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column A</h3>
<p>Hi! this is a sample for bootstrap site design...</p>
<p>I`m very glad to learn this to you...</p>
</div>
<div class="col-sm-4">
<h3>Column B</h3>
<p>Hi! this is a sample for bootstrap site design...</p>
<p>I`m very glad to learn this to you...</p>
</div>
<div class="col-sm-4">
<h3>Column C</h3>
<p>Hi! this is a sample for bootstrap site design...</p>
<p>I`m very glad to learn this to you...</p>
</div>
</div>
</div>
براي استفاده از بوت استرپ دو راه وجود دارد: يكي مراجعه به سايت getbootstrap.com و دنبال كردن دستورالعمل و دانلود بوت استرپ؛ و ديگري استخراج آن از يك CDN يا شبكه تحويل محتوا مانند MAXCDN:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
براي ساختن يك صفحه بوت استرپ به ترتيب زير عمل كنيد:
1- بوت استرپ از جزءهاي HTML و خصوصيات CSS استفاده ميكند
كه به داك تايپ HTML نياز دارد. همواره داك تايپ HTML5 را در ابتداي صفحه قرار داده و از تنظيمات زبان و كاراكتر ست صحيح استفاده كنيد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2- بوت استرپ 3 اولويت را با موبايل قرار مي دهد
بوت استرپ 3 براي طراحي سايت ريسپانسيو و مطابق با گوشي همراه ابداع شده است. استايلهاي مبتني بر موبايل جزئي از فريم ورك هسته اي مي باشند. براي اطمينان از رندر مناسب و زوم كردن با لمس كردن آن متا تگ زير را به درون تگ HEAD اضافه نماييد:
<meta name="viewport" content="width=device-width, initial-scale=1">
قسمت width=device-width اندازه صفحه را به گونه اي تنظيم مي كند كه مطابق با صفحه نمايش هر گوشي نمايش داده شود.
قسمت initial-scale=1 هم مقدار اوليه زوم را در هر گوشي وقتي سايت براي اولين بار لود مي شود تنظيم ميكند.
3- كانتينر يا نمايش محتوا
بوت استرپ به جزء محتوايي براي پوشاندن سايت هم نياز دارد.
دو كلاس كانتينر براي انتخاب كردن وجود دارد:
1- كلاس .container كه محتوايي با عرض ثابت را فراهم مي آورد
2- كلاس .container-fluid كه محتوايي تمام صفحه و منطبق با اندازه گوشي را فراهم مي كند.
كانتينترها را نميتوان درون هم قرار داد و بايد جداگانه استفاده شوند.
دو صفحه بوت استرپ ابتدايي
مثال زير يك صفحه بوت استرپ داراي محتواي ثابت را نشان مي دهد:
مثال زير يك صفحه بوت استرپ داراي محتواي تمام صفحه را نشان مي دهد:
محصولات مرتبط :
مقالات مرتبط :