learn bootstrap آموزش بوت استرپ
 
همانطور که در مقاله بوت استرپ چيست گفتيم، بوت استرپ يکي از رايج ترين فريم ورک هاي 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 که محتوايي تمام صفحه و منطبق با اندازه گوشي را فراهم مي کند.
کانتينترها را نميتوان درون هم قرار داد و بايد جداگانه استفاده شوند.
 

دو صفحه بوت استرپ ابتدايي

مثال زير يک صفحه بوت استرپ داراي محتواي ثابت را نشان مي دهد:
مثال بوت استرپ 1
مثال زير يک صفحه بوت استرپ داراي محتواي تمام صفحه را نشان مي دهد:
مثال بوت استرپ 2




محصولات مرتبط :



مقالات مرتبط :

درخواست تماس