آموزش استفاده از بوت استرپ در صفحات وب

ارسال شده توسط: حسین درویشی Comments: 0

آموزش استفاده از بوت استرپ در صفحات وب

استفاده ازبوت استرپ در صفحات وب باعث می شود که ما در طراحی واسط گرافیکی سایتمون سریعتر عمل کنیم. اما اینکه چگونه می توانیم از بوت استرپ در صفحات وبمون استفاده کنیم؟

آموزش استفاده از بوت استرپ

برای استفاده از بوت استرپ یک صفحه html ایجاد کنید و در بخش head آن باید فایل های بوت استرپ را با استفاده از تگ link لینک دهیم. برا این منظور بروش زیر عمل کنید:

  • اول یک پوشه با یک اسم دلخواه باز کنید
  • سپس در داخل این پوشه یک صفحه html ایجاد کنید
  • یک پوشه به نام bootstrap داخل پوشه پروژه بسازید
  • فایل های بوت استرپ را از سایت آن دانلود کرده و دو فایل bootstrap.min.css و bootstrap.min.js را داخل پوشه بوت استرپ کپی کنید.
  • حال به صفحه html را باز کرده و در قسمت head آن کد زیر را قرار دهید
<head>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<script src="bootstrap/bootstrap.min.js"></script>
</head>
  • برای اینکه از صحیح بودن کار خود مطمئن باشیم یک تستی از پروژه می گیرم
  • برای این منظور کد زیر را داخل تگ body قرار دهید و پروژه را با استفاده از یک مرورگر بروز اجرا کنید.
<body>
<div class="container">
<div class="col col-sm-12">
<div class="alert alert-danger text-center">
<h1>با سلام به دنیای بوت استرپ خوش آمدید</h2>
</div>
</div>
</div>
</body>

پس از اجرا انتظار داریم تا خروجی بصورت زیر باشد.

آموزش استفاده از بوت استرپ

درآخر می توانید پروژه نهایی را بصورت رایگان از باکس زیر دانلود کنید

بخش دانلود

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *