akofaraji.ir

در این بخش قصد داریم با هم آموزش bootstrap ، که برگرفته از سایت خوب روکسو است را با هم پیش ببریم



Generic placeholder image
ئاکو فرجی
08 فروردین 1403

آشنایی با Bootstrap 4

  بوت استرپ چیست ؟   به اولین قسمت از سری آموزشی 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...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
08 فروردین 1403

سیستم Grid در بوت استرپ 4

  سیستم Grid در Bootstrap   سیستم grid در بوت استرپ بر اساس flexbox ساخته شده است و به شما اجازه می دهد تا 12 ستون هم در یک صفحه ایجاد کنید. البته اگر نمی خواهید از 12 ستون استفاده کنید می توانید از تعداد کمتری بهره ببرید.   این سیستم grid به شکل زیر است:   bootstrap grid system     نکته ای که باید در ذهن داشته باشید این است که مجموع ستون ها باید 12 بشود. اگر نمی دانید grid های CSS چیست توضیح مختصری برایتان می دهم؛ ماژول Grid در CSS به شما اجازه می دهد تا طرحی داشته باشید که بر اساس یک Grid (به معنی «شبکه توری» یا «مشبک») باشد. به تصویر زیر نگاه کنید:   تفاوت صفحات طراحی شده با CSS Grid   در این تصویر دو صفحه ی وب را می بینید. صفحه ی سمت راست بر اساس Grid طراحی شده است و همانطور که گفتیم Grid به شکل یک شبکه ی توری مانند و مشبک است و خانه هایی را که می بینید، شکل می دهد. حالا می توانید عناصر خود را با دقت فراوان داخل این خانه ها قرار دهید. اگر از Grid استفاده کنید دیگر نیازی به استفاده از float و مدیریت فضای پیشرفته نخواهید داشت. در واقع زمانی که برای صفحه ی خود grid طراحی کنید نیازی نیست نگران جای عناصر باشید چرا که عناصر نمی توانند از grid خود (خانه ی مشبکی مربوطه) خارج شوند. نک...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
10 فروردین 1403

متون و تایپوگرافی در بوت استرپ 4

  در این قسمت از مجموعه آموزشی Bootstrap 4 می خواهیم به بررسی تایپوگرافی bootstrap ، متون و حالت های مختلف نمایش آن ها بپردازیم. اطلاعات کافی در این زمینه می تواند به شما کمک کند که وب سایت خود را به آسانی و با دقت بیشتری طراحی کنید.   تنظیمات پیش فرض در بوت استرپ 4 متون، تنظیمات پیش فرض خاص خودشان را دارند. font-size برابر با 16 پیکسل و line-height برابر با 1.5 است. همچنین font-family برابر با توالی زیر است: "Helvetica Neue", Helvetica, Arial, sans-serif به علاوه، تمام عناصر <p> دارای margin-top: 0 و margin-bottom: 1rem (برابر 16 پیکسل) هستند.   تگ های heading تگ های <h1> تا <h6> در بوت استرپ 4 دارای وزن بالاتر (بولدتر) و اندازه ی بیشتری هستند. به مثال زیر توجه کنید:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <lin...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
08 فروردین 1403

طراحی جدول ها در بوت استرپ

  جدول ها در Bootstrap   جداول ساده ی بوت استرپ، دارای padding کم و خطوط افقی برای جدا کردن ردیف ها هستند. برای ایجاد این استایل ساده می توانید کلاس table. را به جدول خود اضافه کنید. مثال:   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 <!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="con...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
08 فروردین 1403

کار با تصاویر و رنگ ها در Bootstrap 4

  رنگ ها در بوت استرپ   رنگ ها در بوت استرپ (از نظر پیاده سازی) به دو دسته ی رنگ های متن و رنگ های پس زمینه تقسیم می شوند. همانطور که در قسمت های قبلی گفتیم رنگ های بوت استرپ معمولا دارای معنای خاصی هستند و ما قصد داریم این رنگ ها را ابتدا در متون بررسی کنیم؛ این رنگ ها عبارت اند از: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (که معمولا سیاه است body رنگ پیش فرض) and .text-light   به مثال زیر توجه کنید:     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 <!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.mi...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
08 فروردین 1403

دکمه ها و هشدارها

          Jumbotron در بوت استرپ شاید ندانید jumbotron چیست؛ در واقع jumbotron یک مربع معمولا خاکستری رنگ است که توجه خواننده را به خود جلب می کند. این مربع معمولا برای مشخص کردن قسمت های حساس و مهم یک متن مورد استفاده قرار می گیرد. شما می توانید هر کد HTML ای را در jumbotron ها قرار دهید، حتی عناصر دیگر بوت استرپ نیز در آن جای می گیرند. برای ایجاد این مربع ها در مثال زیر یک عنصر <div> ایجاد کرده ایم و سپس به آن کلاس jumbotron. را اضافه می کنیم:       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!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.c...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
09 فروردین 1403

مجموعه دکمه ها و نشان ها (badge)

          مجموعه دکمه ها در بوت استرپ   مجموعه دکمه ها یا button group ها همانطور که از نامشان مشخص است، مجموعه ای از چند دکمه هستند که در کنار هم قرار می گیرند. برای ساخت این دکمه ها باید از کلاس btn-group. استفاده کنید. به مثال زیر دقت کنید:     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 <!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>   &...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
08 فروردین 1403

نوار پیشرفت (Progress Bar)

          نوار پیشرفت یا progress bar در بوت استرپ چیست؟   نوار پیشرفت یا progress bar در بوت استرپ، همانطور که از نامش پیدا است نواری است که وضعیت کاربر در یک پروسه را مشخص می کند. به عبارت دیگر به کاربر نشان می دهد چقدر در فلان عملیات پیشرفت کرده است. برای ساخت این نوع از عناصر باید به عنصر نگه دارنده، کلاس progress. و به عنصر فرزند نیز کلاس progress-bar. را بدهید. بقیه ی جزئیات با قوانین CSS (مانند width برای تعیین عرض نوار پیشرفت) قابل تنظیم هستند.   به مثال زیر توجه کنید:     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!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>   <...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
08 فروردین 1403

spinner ها و صفحه بندی (Pagination)

  spinner در بوت استرپ   spinner ها (در لغت به معنی «چرخنده») همان علامت های بارگذاری و loading هستند که به کاربر نمایش داده می شوند تا بداند که سیستم در حال انجام پردازش کارهای موردنظر است. برای استفاده از spinner ها باید از کلاس spinner-border. استفاده کنید:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head>   <title>Bootstrap Example</title>   <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="container">   <h2>Spinners</h2> ...

ادامه مطلب
Generic placeholder image
ئاکو فرجی
08 فروردین 1403

آشنایی با List Group

  List Group چیست؟   List Group ها در واقع همان لیست های HTML هستند که بوت استرپ به شکل خاصی نمایش می دهد. این لیست ها برای نمایش مجموعه از از موارد مختلف مورد استفاده قرار می گیرند. ساده ترین نوع این لیست ها در بوت استرپ را با استفاده از یک <ul> با کلاس list-group. و چند عنصر <li> با کلاس list-group-item. می سازیم:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!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/...

ادامه مطلب