بررسی container در بوت استرپ
ایجاد یک صفحه وب بوتسترپ از ابتدا
در صفحات پیش رو به شما نشان خواهیم داد که چطور یک وب سایت بوت استرپ را از ابتدا ایجاد کنید.
ابتدا با یک صفحه ی 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>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 17555
دیدگاهها
سلام ببخشید از کجا می توان متوجه شد که سایت از بوت استرپ استفاده کرده یا نه؟
و اینکه اگه میشه در مورد ریسپانسیو یه توضیح بدید که چی هست؟ متشکرم
سلام
1- چطور متوجه بشوم که از بوت استرپ استفاده شده: همان طور که می دانید برای اینکه بتوانیم از قابلیت های بوت استرپ استفاده کنیم باید فایل های "bootstrap.min. css" و "bootstrap-rtl. min_.css" و ... را به سایت اضافه کنیم، بنابراین فقط کافی است روی صفحه راست کلیک کنید و گزینه "View Page Source" را انتخاب کنید تا کد مربوط به صفحه وب ظاهر شود، حالا قسمت Head صفحه را بررسی کنید تا ببینید فایل های مذکور وجود دارد یا خیر؟
2- ریسپانسیو : ریسپانسیو یعنی واکنش گرا و پاسخ گرا به موبایل در واقع مخاطب می تواند سایت ما را با استفاده از مونیتور یا مبایل و یا تبلت مشاده کند. اگر با مونیتور کامپیوتر که صفحه آن بزرگ است سایت رو مشاهده کند المان های داخل صفحات ما می تواند بنحوی قرار بگیرد که دو ستون و یا سه ستون رو مخاطب مشاهده کند اما اگر با مبایل مشاهده کند برای اینکه پایین صفحه بواسطه 3 ستونی که عرض کردم اسکرول نخورد، از 1 ستون استفاده می کنیم و اسکرول پایین صفحه کاملا حذف می شود و اصلا به اسکرول نیازی نیست. به این ترتیب سایت کاربر پسندتر می شود که اصطلاحا به آن UserFriend می گویند.
یک سوال که برای من پیش اومده این است که چرا خود شما برای سایتتان از بوت استرپ استفاده نمی کنید و آنرا ریسپانسیو نمی کنید
و یک سوال دیگر هم داشتم
وقتی که از کلاس کانتینر استفاده میکنیم جطور میتوانیم بگوییم که از اطراف بیشتر حاشبه بگذارد؛آخه حاشیه هاش خیلی کمه
خیلی خوب بود با تشکر
در حال حاضر سایت بیاموز از بوت استرپ استفاده کرده و رسپانسیو است.
در مورد اضافه کردن حاشیه. اگر که منظورتون حاشیه ی داخلی یا همان padding است، فعلا کلاسی رو سراغ نداریم که به شما معرفی کنیم. تنها کاری که میشه کرد اینه که به صورت دستی به container مقداری padding بدهیم. که البته ممکن هست که در سیستم گرید(شبکه بندی) اختلال ایجاد کنه.