ئاکو فرجی

بوت استرپ چیست ؟

به اولین قسمت از سری آموزشی Bootstrap 4 خوش آمدید! در این دوره قصد آشنایی با این فریم ورک محبوب را داریم.

بوت استرپ چیست ؟ Bootstrap در واقع مشهور ترین و محبوب ترین فریم ورک (در قسمت front-end یا ظاهر سایت) HTML و CSS و جاوا اسکریپت برای ساخت وب سایت های واکنش گرا و mobile friendly (سازگار با تلفن های همراه) است. این فریم ورک دارای انواع قابلیت ها آماده شده برای فرم ها، دکمه ها، گالری ها، جدول ها و … است که کار طراحی را برای شما بسیار آسان تر می کند و از طرفی خبر خوب این است که این فریم ورک کاملا رایگان است.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!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/4.3.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="jumbotron text-center">

  <h1>My First Bootstrap Page</h1>

  <p>Resize this responsive page to see the effect!</p>

</div>



<div class="container">

  <div class="row">

    <div class="col-sm-4">

      <h3>Column 1</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

    <div class="col-sm-4">

      <h3>Column 2</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

    <div class="col-sm-4">

      <h3>Column 3</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

  </div>

</div>

</body>

</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید این صفحه ی وب کاملا واکنش گراست و می تواند خودش را با گوشی های همراه وفق دهد. سعی کرده ایم در این دوره ی آموزشی انواع و اقسام مثال های مختلف را برایتان بیاوریم تا به صورت عملی و کامل با فریم ورک bootstrap آشنا شوید.

تفاوت Bootstrap 3 و Bootstrap 4

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

پیشنهاد ما به شما این است که اگر دوست دارید از Bootstrap 3 استفاده کنید (به دلیل پشتیبانی از آیکون ها و…) این کار را انجام دهید اما نه به خاطر پشتیبانی از مرورگرهایی مثل IE8 و IE9. شما به عنوان توسعه دهنده وظیفه دارید که مراقب کاربرانتان باشید و از آنها محافظت کنید. IE8 و IE9 اصلا مرورگر نیستند چه برسد به اینکه بخواهند امن باشند! در حقیقت نباید در سایت خود برای IE8 و قبل تر نیز پشتیبانی ایجاد کنید تا چند صدم درصد کاربرانی که ممکن است هنوز از آن ها استفاده کنند آن ها را کنار بگذارند. این تفکر پشتیبانی از IE8 و IE9 بسیار تفکر اشتباهی است و مکررا از سوی توسعه دهندگان گوگل و متخصصان این زمینه توصیه شده است که سعی نکنید برای تکنولوژی های بسیار بسیار قدیمی پشتیبانی ایجاد کنید. به طور مثال آقای کریس جکسون، رئیس بخش امنیت مایکروسافت، از کاربران می‌خواهد که تنها در مواردی که هیچ چاره‌ای نیست از IE استفاده کنند. او بر این عقیده است که نقش اینترنت اکسپلورر به مرور زمان تغییر کرده و دیگر نمی‌توان آن را یک مرورگر دانست (بلکه تنها ابزاری برای همخوانی با برخی وبسایت‌های قدیمی است) و افراد عادی و توسعه دهندگان نباید از آن استفاده کنند.

قالب کلی bootstrap

مثال زیر را برای شما آماده کرده ایم تا با قالب کلی و شکل کلی bootstrap آشنا شوید:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap 4 Website 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.3.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <style>

  .fakeimg {

    height: 200px;

    background: #aaa;

  }

  </style>

</head>

<body>

<div class="jumbotron text-center" style="margin-bottom:0">

  <h1>My First Bootstrap 4 Page</h1>

  <p>Resize this responsive page to see the effect!</p>

</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

    </ul>

  </div>

</nav>

<div class="container" style="margin-top:30px">

  <div class="row">

    <div class="col-sm-4">

      <h2>About Me</h2>

      <h5>Photo of me:</h5>

      <div class="fakeimg">Fake Image</div>

      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>

      <h3>Some Links</h3>

      <p>Lorem ipsum dolor sit ame.</p>

      <ul class="nav nav-pills flex-column">

        <li class="nav-item">

          <a class="nav-link active" href="#">Active</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Link</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Link</a>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled" href="#">Disabled</a>

        </li>

      </ul>

      <hr class="d-sm-none">

    </div>

    <div class="col-sm-8">

      <h2>TITLE HEADING</h2>

      <h5>Title description, Dec 7, 2017</h5>

      <div class="fakeimg">Fake Image</div>

      <p>Some text..</p>

      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

      <br>

      <h2>TITLE HEADING</h2>

      <h5>Title description, Sep 2, 2017</h5>

      <div class="fakeimg">Fake Image</div>

      <p>Some text..</p>

      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

    </div>

  </div>

</div>

<div class="jumbotron text-center" style="margin-bottom:0">

  <p>Footer</p>

</div>

</body>

</html>

مشاهده ی خروجی در JSBin

اگر کدها را نمیفهمید جای نگرانی نیست، این مثال تنها برای نمایش ظاهر زیبای bootstrap است!

چرا از bootstrap استفاده کنیم؟

دلایل اصلی استفاده از bootstrap موارد زیر هستند:

استفاده و یادگیری ساده: برای کار با bootstrap تنها به دانش عمومی در زمینه ی HTML و CSS نیاز دارید.

قابلیت های واکنش گرا (responsive): قابلیت های واکنش گرای bootstrap باعث می شوند طراحی با آن برای گوشی های همراه و تبلت ها نیز مناسب باشد و محتوا را در بهترین شکل ممکن نمایش دهد.

روش Mobile-first: بحث Mobile-first یعنی طراحی (از منظر کدها) اول برای گوشی های همراه انجام شود و سپس برای کامپیوترها. گوگل این روش را ترجیح می دهد.

پشتیبانی از مرورگرهای مختلف: Bootstrap 4 با تمام مرورگرهای مدرن و امروزی سازگاری دارد (کروم، فایرفاکس، Edge و IE10 به بالا، سافاری، اپرا).

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

اضافه کردن Bootstrap به سند خود از طریق یک CND

دانلود کردن Bootstrap از طریق سایت رسمی getbootstrap.com

منبع: سایت روکسو

اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر

نام شما

ایمیل شما

متن

منو

آشنایی با Bootstrap 4

بوت استرپ چیست ؟

تفاوت Bootstrap 3 و Bootstrap 4

قالب کلی bootstrap

چرا از bootstrap استفاده کنیم؟

اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر