۳۰
تیر

جلسه ۰۲ : تهیه کردن قالب آماده Bootstrap 4

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کاربردی آموزش Bootstrap 4 ، را دنبال می کنند. در بخش اول آموزش ما توضیحاتی در مورد دوره ی آموزش Bootstrap 4 ،ارائه کردیم. همچنین به ویژگی ها و قابلیت های جدید این نسخه نیز ، اشاره ای داشتیم. برای استفاده از این قالب آماده Bootstrap 4 ، بعد از آشنایی با کاربرد ، ویژگی ها و قابلیت های آن ، باید این قالب آماده را ، از مراجع معتبر اینترنتی ، دریافت کنید. تا بتوانید از ان برای طراحی قالب وب سایت خود استفاده کنید. از این رو ما در این بخش از دوره، به بررسی چگونگی تهیه کردن قالب آماده Bootstrap 4 و ایجاد اولین صفحه وب در Bootstrap 4 ، پرداخته ایم.

قالب آماده Bootstrap 4 – اولین صفحه وب در Bootstrap 4

تهیه کردن قالب آماده Bootstrap 4

در ادامه ابتدا نحوه تهیه Bootstrap را بررسی می کنیم. سپس به ایجاد اولین صفحه وب در Bootstrap 4، در قالب وب سایت می پردازیم.

تهیه Bootstrap 4

دو راه برای شروع استفاده از Bootstrap 4 در وب سایت شما وجود دارد:

استفاده از CDN.
دانلود Bootstrap 4 از getbootstrap.com.

۱- استفاده از CDN

اگر نمی خواهید خودتان Bootstrap 4 را دانلود کنید. و به قالب وب سایت اضافه کنید.، می توانید آن را از یک CDN (شبکه تحویل محتوا) بصورت آنلاین ، اضافه کنید.

MaxCDN پشتیبانی CDN را برای CSS و جاوا اسکریپت Bootstrap فراهم می کند. شما همچنین باید jQuery را وارد کنید:

مثال :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

دانلود Bootstrap 4

اگر قصد دارید قالب آماده Bootstrap 4 ، بصورت کامل دانلود کنید. می توانید به آدرس https://getbootstrap.com ، مراجعه کرده و ساختار آن را دانلود نمایید.

ایجاد اولین صفحه وب با استفاده از Bootstrap 4

۱- بخش doctype نسخه HTML5 را اضافه کنید.

Bootstrap 4 ، از عناصر HTML و خواص CSS که نیاز به نوع doctype HTML5 دارند استفاده می کند.

همیشه در ابتدای صفحه HTML5 doctype را همراه با مشخصه lang و مجموعه کاراکتر درست وارد کنید:

مثال :

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

<!DOCTYPE html>

<head>

</head>

</html>

۲- تنظیمات اولیه responsive

Bootstrap 4 ، برای responsive کردن وب سایت در صفحه نمایش های موبایل طراحی شده است.

Mobile-first به عنوان یک styles در هسته ی این فریم ورک، است.

برای اطمینان از رندر مناسب و لمس زوم، برچسب <meta> زیر را در داخل عنصر <head> اضافه کنید:

مثال :

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

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

خصوصیت width=device-width ، عرض صفحه وب سایت را با عرض صفحه نمایش دستگاه ها ، تنظیم می کند.

خصوصیت initial-scale=1 ، سطح زوم اولیه را زمانیکه وب سایت ، در مروگر ، بارگزاری می شود، تنظیم می کند.

۳-Containers

بوت استرپ ۴ همچنین نیاز به یک عنصر ، برای نگهداری محتویات سایت را دارد.

برای این منظور ، دو کلاس container ، وجو دارد:

کلاس container. ، شامل یک عرض (width) ثابت responsive ، است.
کلاس container-fluid. ، نیز شامل یک عرض کامل (full) است، که تمام صفحه ی viewport ،را پوشش می دهد.

دو پایه اصلی صفحات Bootstrap 4

در این مثال کد پایه صفحه طراحی شده با Bootstrap 4 ، را قرار داده ایم:

مثال :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 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/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

</div>

</body>

</html>

مثال ۲: در اینجا نیز یک کد پایه صفحه طراحی شده با Bootstrap 4 ، قرار دادیم، که تفاوت آن با مثال قبلی این است که در این صفحه تمام عرض صفحه را در بر می گیرد. (کلاس container-fluid ):

مثال :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 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/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

</div>

</body>

</html>

کلام آخر

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

QR: جلسه ۰۲ : تهیه کردن قالب آماده Bootstrap 4

به اشتراک بگذارید

آموزش Bootstrap 4 ,تهیه قالب Bootstrap 4 ,ویژگی های Bootstrap 4

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۲ : تهیه کردن قالب آماده Bootstrap 4

مقدمه

تهیه کردن قالب آماده Bootstrap 4

تهیه Bootstrap 4

۱- استفاده از CDN

دانلود Bootstrap 4

ایجاد اولین صفحه وب با استفاده از Bootstrap 4

۱- بخش doctype نسخه HTML5 را اضافه کنید.

۲- تنظیمات اولیه responsive

۳-Containers

دو پایه اصلی صفحات Bootstrap 4

کلام آخر

لیست مطالب دوره

آموزش بوت استرپ 4

سیستم شبکه بندی در Bootstrap 4

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ