امتیاز دهید:
ایجاد اولین صفحه وب با استفاده از بوت استرپ

کاربران مبتدی که از فریم ورک خاصی استفاده نمیکنند، میتوانند با نرم افزاری مثل  ++notepad  یا sublime کار خود را شروع کنند.

1- اولین کاری که انجام می دهید این است که یک فایل با پسوند html ایجاد میکنید ( مثلا یک فایل notepad ایجاد کرده و آن را rename نموده و به نام firstproject.html ذخیره میکنیم)

2- در اینجا یک سند html ایجاد کرده اید، در اولین مرحله یک doctype  html5 در بالای صفحه برای تعریف زبان و کاراکترهای صحیح ایجاد می کنید

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

3- در مرحله بعدی تگ viewport را در بالای صفحه تعریف میکنید، این تگ برای برخورداری از حالت واکنش گرایی در سایت بسیار حائز اهمیت است.

تگ view port استاندارد به شکل زیر تعریف می شود:

 <meta name="viewport" content="width=device-width, initial-scale=1">

با مقدار دهی device-width  به تگ viewport به مرورگر می گوییم عرض دستگاه را با عرض صفحه نمایش یکی کن مثلا اگر عرض دستگاه ۳۲۰ پیکسل است، به جای آن که مقدار پیش فرض ۹۸۰۰ پیکسل را به عرض صفحه اختصاص دهد همان مقدار را به عرض صفحه اختصاص بدهد.

این متا تگ در بسیاری از موبایل ها پشتیبانی می شود و جای نگرانی زیادی در مورد عدم ساپورت آن وجود ندارد.

Initial - scale ( بین ۰ تا ۱۰ ) کشیدگی پیش فرض را نشان می دهد که اگر بر روی ۱ باشد به طور استاندارد صفحه را بدون zoom in و یا zoom out نشان می دهد.

 آشنایی با مفهوم container:

اولین چیزی که شما برای طراحی یک  صفحه بدان احتیاج دارید این است که محدوده ی صفحه وب خود را برای قراردادن المان های مختلف در آن مشخص کنید.

در بوت استرپ مفهومی بنام container وجود دارد که در واقع به شیوه ای راحت میتوانید از آن برای دسته بندی مطالب سایت خود استفاده کنید.

 

دو کلاس container در بوت استرپ وجود دارد:

  • container : که یک سایز ثابت ریسپانسیو را برای شما فراهم می کند
  • container-fluid : کل ناحیه کاربری را مطابق با عرض device در نظر میگیرد.

نکته :  container  به صورت آبشاری نمیتواند استفاده شود یعنی شما نمی توانید یک container را داخل container دیگر قرار دهید.

 مثال : کد زیر یک صفحه ریسپانسیو ساده را با استفاده از ساختار بوت استرپ برای شما ایجاد میکند:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

خروجی این صفحه به شکل زیر است:

 

همانطور که میبینید محتوا داخل یک container ای قرار گرفته که همه با فاصله از عرض اصلی و کل صفحه قرار دارند.

حال اگر به جای کلاس container از container-fluid استفاده کنید، خروجی به شکل زیر می شود:

 

در اینجا همانطور که مشاهده میکنید، محتوا کل صفحه را در بر گرفته و از همان ابتدا شروع شده است.


نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )