بررسی 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>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 16804