ایجاد یک صفحه وب بوتسترپ از ابتدا
در صفحات پیش رو به شما نشان خواهیم داد که چطور یک وب سایت بوت استرپ را از ابتدا ایجاد کنید.
ابتدا با یک صفحه ی HTML ساده شروع می کنیم و سپس اجزای بیشتری را اضافه می کنیم تا جایی که یک وب سایت کاربردی و واکنش گرا، داشته باشیم.
ابتدا با صفحه ی HTML زیر شروع می کنیم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
</head>
<body>
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
</head>
<body>
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
اضافه کردن بوتسترپ از یک CDN و قرار دادن عناصر در یک ظرف(container)
اولین کاری که انجام می دهیم عبارت است از اضافه کردن بوتسترپ از یک CDN و همچنین لینک کردن جی کوئری.
سپس ما تمام عناصر درون عنصر <body> را درون یک ظرف(container) قرار می دهیم.
مثال (اضافه کردن container)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
خودتان امتحان کنید »
نکته: اگر می خواهید صفحه ی شما، تمام صفحه ی نمایش را پوشش دهد، می توانید به جای کلاس container از کلاس container-fluid استفاده کنید.
مثال
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
خودتان امتحان کنید »
و اینکه اگه میشه در مورد ریسپانسیو یه توضیح بدید که چی هست؟ متشکرم
1- چطور متوجه بشوم که از بوت استرپ استفاده شده: همان طور که می دانید برای اینکه بتوانیم از قابلیت های بوت استرپ استفاده کنیم باید فایل های "bootstrap.min.css" و "bootstrap-rtl.min_.css" و ... را به سایت اضافه کنیم، بنابراین فقط کافی است روی صفحه راست کلیک کنید و گزینه "View Page Source" را انتخاب کنید تا کد مربوط به صفحه وب ظاهر شود، حالا قسمت Head صفحه را بررسی کنید تا ببینید فایل های مذکور وجود دارد یا خیر؟
2- ریسپانسیو : ریسپانسیو یعنی واکنش گرا و پاسخ گرا به موبایل در واقع مخاطب می تواند سایت ما را با استفاده از مونیتور یا مبایل و یا تبلت مشاده کند. اگر با مونیتور کامپیوتر که صفحه آن بزرگ است سایت رو مشاهده کند المان های داخل صفحات ما می تواند بنحوی قرار بگیرد که دو ستون و یا سه ستون رو مخاطب مشاهده کند اما اگر با مبایل مشاهده کند برای اینکه پایین صفحه بواسطه 3 ستونی که عرض کردم اسکرول نخورد، از 1 ستون استفاده می کنیم و اسکرول پایین صفحه کاملا حذف می شود و اصلا به اسکرول نیازی نیست. به این ترتیب سایت کاربر پسندتر می شود که اصطلاحا به آن UserFriend می گویند.
و یک سوال دیگر هم داشتم
وقتی که از کلاس کانتینر استفاده میکنیم جطور میتوانیم بگوییم که از اطراف بیشتر حاشبه بگذارد؛آخه حاشیه هاش خیلی کمه
در مورد اضافه کردن حاشیه. اگر که منظورتون حاشیه ی داخلی یا همان padding است، فعلا کلاسی رو سراغ نداریم که به شما معرفی کنیم. تنها کاری که میشه کرد اینه که به صورت دستی به container مقداری padding بدهیم. که البته ممکن هست که در سیستم گرید(شبکه بندی) اختلال ایجاد کنه.