گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/11 - 16:47
كد :6104
ایجاد یک صفحه وب Bootstrap از ابتدا
ما در اینجا به شما نشان خواهیم داد که چطور یک وب سایت Bootstrap را از ابتدا ایجاد کنید.
ابتدا با یک صفحه ی 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>
اضافه کردن Bootstrap از یک CDN و قرار دادن عناصر در یک container
اولین کاری که باید انجام دهیم این است که Bootstrap را از یک CDN اضافه کنیم و به jQuery لینک دهیم.
سپس تمام عناصر HTML را داخل عنصر <body> و در یک container قرار می دهیم (<"div class="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.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>
</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 a paragraph.</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.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>
</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 a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>