بیایید از بوت استرپ استفاده کنیم

 اول از همه میتونید بوت استرپو دانلود کنید و طبق استراکچرش جلو برید یا به صورت CDN چیزای مورد نیازو اضافه کنید. maxCDN هایی که نیاز داریم:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

خوبیای استفاده از CDN اینکه کاربرا حتما قبلا به سایتی که CDN مورد نظرتونو داشته سر زدن و به صورت اتوماتیک دانلود شده و در کش ذخیره میشه و وقتی به سایت شما میان و CDN های مشابهو میبینن دیگه مرورگر نیازی به دانلود دوبارشون نداره، یا مثلا وقتی مرورگر درخواست دانلودو میده CDN به نزدیک ترین سرورش درخواست میفرسته. همه اینا زمان لودو سریع تر میکنه.

ساخت اولین صفحه بوت استرپیمون

•  اضافه کردن doctype که واجبه .
• بوت استرپ mobile-first است بخاطر همین در head متا تگ زیر رو وارد میکنیم.  width=device-width عرض صفحه رو مطابق با اندازه عرض صفحه نمایش دستگاه میکنه. initial-scale=1 مقدار زوم اولیه صفحه رو زمانی که برای اولین بار در مرورگر لود میشه رو مشخص میکنه.

<!-- To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

• بوت استرپ نیاز به یک المنت container داره که کل محتوای سایتو در بر بگیره. میشه از دوتا کلاس .container یا .container-fluid استفاده کرد. کلاس .container فراهم کننده ریسپانسیو fixed width container هست و کلاس .container-fluid فراهم کننده یک full width container با پوشاندن کل عرض viewport است. ( نکته: container ها نمیشه تو در تو باشن یعنی نمیشه یک container رو داخل یک container دیگه بندازیم)

<div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
</div>

داکیومنتاش زیاده و حوصله ترجمه کردن ندارم. W3SCHOOLS BOOTSTRAP