چگونه با بوت استرپ یک وب سایت زیبا و ساده ایجاد کنیم 4: 7 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:54

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

نمونه کارها به چند مرحله کوچکتر تقسیم می شوند تا بتوانید آن را بیشتر مدیریت کنید: قاب HTML ، فریم CSS ، قاب جاوا اسکریپت ، نوار ناوبری و صفحه اصلی (با بلوک های محتوا).

اگر توضیحات من در مورد چیزی هنوز شما را گیج می کند ، می توانید با سوالات ، پیشنهادات خود یا عنوانی که در مورد آن گیج شده اید در Google نظر دهید. منابع زیادی برای برنامه نویسی وب سایت ها و Bootstrap در دسترس است.

توجه: این راهنما همه جانبه نیست و نباید به عنوان جایگزینی برای یادگیری نحوه برنامه نویسی در HTML ، CSS یا Javascript استفاده شود.

منابع مورد نیاز

• بوت استرپ 4
• jQuery 3.3.1

منابع اختیاری

• FontAwesome
• فونت های گوگل
• highlight.js

اگر می خواهید به مثال کامل بروید یا به مخزن نگاهی بیندازید:

• مثال کامل
• مخزن

توجه: در صورت تمایل به همراه ویرایشگر متن ، از Sublime در تصاویر برای نمونه های خود استفاده خواهم کرد.

مرحله 1: راه اندازی

راه اندازی پوشه

1. یک پوشه در جایی ایجاد کنید که بتوانید همه مواردی را که قرار است بارگیری کنیم بارگیری کنید. این فهرست اصلی شما برای نمونه کارها خواهد بود.
2. داخل آن پوشه ای با نام "bootstrap" ایجاد کنید
3. یک پوشه دیگر در داخل پوشه نمونه کارها با نام "jquery" ایجاد کنید

پوشه نمونه کارها

| ----- bootstrap | ----- jquery

بوت استرپ 4

1. به وب سایت آنها مراجعه کنید و روی دکمه "بارگیری" در زیر بخش "Compiled CSS and JS" کلیک کنید.
2. فایل.zip را در پوشه "Downloads" یا مکان مناسب دیگری ذخیره کنید.
3. فایل.zip را باز کرده و پوشه های "css" و "js" را در پوشه "bootstrap" که قبلاً ایجاد کرده اید استخراج کنید.

jQuery

1. از وب سایت آنها دیدن کنید و "فشرده نشده ، توسعه jQuery 3.3.1" را بارگیری کنید
2. آن فایل را در پوشه "jquery" که قبلاً ایجاد کرده اید ذخیره کنید.

همه چارچوب ها اکنون برای شروع کار بر روی نمونه کارها آماده هستند.

مرحله 2: فریم HTML (index.html)

اسم شما

این قاب هیچ چیز بیش از حد پیچیده نیست ، اما من می خواهم اهداف کلی راه اندازی را توضیح دهم.

Bootstrap JS After jQuery

به نظر می رسد نوعی همپوشانی بین فایل جاوا اسکریپت Bootstrap و jQuery وجود دارد. من آزمایش نکردم که ببینم این همپوشانی چقدر گسترده است ، اما یک مثال قابلیت کشویی است که در نوار ناوبری استفاده می کنم. اگر ابتدا در Bootstrap بارگیری می کنید ، دکمه کشویی کار نمی کند.

FontAwesome

اگر توسعه وب را انجام داده اید ، احتمالاً می دانید FontAwesome چیست. با این حال ، اگر اینطور نیست ، یک مجموعه نماد است که شامل یک جعبه ابزار برای سفارشی سازی بیشتر است. اگر شما هم مثل من هستید و هیچ استعداد هنری ندارید ، فوق العاده مفید است.

hightlight.js

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

توجه: از مکانهایی که در آن از پیوندهای سخت کد شده به فایلهایی مانند دو نماد و highlight.js استفاده می کنم مطلع باشید. همچنین ، از آنجا که فقط Bootstrap و jQuery مورد نیاز است ، می توانید هر چارچوب دیگری را اضافه یا حذف کنید. اگر هر کدام را حذف کردید ، به یاد داشته باشید که خطوط کد مربوطه را بعداً حذف کنید.

مرحله 3: قاب CSS (style.css)

/ * * امیدوارم رنگ bg را به خاکستری تغییر دهید و سبک فونت را برای وب سایت راحت تر کنید */ body {background: gray؛ font-family: 'Open Sans'، sans-serif؛ }

/*

* این اطمینان می دهد که نوار nav در بالای همه چیز قرار دارد */ nav {z-index: 9999؛ }

/*

* با این کار متن پاراگراف قابل خواندن بیشتر می شود */ p {font-size: 18px؛ margin-top: 5px؛ margin-bottom: 5px؛ }

/*

* با این کار مطمئن می شوید که همه بلوک های کد من به درستی قالب بندی شده اند */ code {text-align: left؛ }

/*

* من نمی خواهم لیستها دارای گلوله باشند */ li {list-style-type: none؛ }

/*

* پیوندها به طور پیش فرض آبی هستند ، و من می خواهم آنها را مطابق با سبک Bootstrap */ li a، a {color: white؛ }

/*

* من یک برچسب کلاس را به div متصل می کنم که حاوی نوار navbar است تا مطمئن شوید محتوا با هم تداخل ندارد */.navFix {padding-bottom: 70px؛ }

/*

* افزایش اندازه کشش navbar */.social-media {font-size: 1.3em؛ }

/*

* رنگ برجسته پیش فرض برای پیوندهای کشویی سفید است */.dropdown-menu a: hover {background-color: #212529؛ }

/*

* تقسیم نیروها نشان دادن pdf ها به ارتفاع مشخص */.pdfFill {height: 45rem؛ }

/*

* فاصله بین دکمه ها و بلوک های کد */.codeStyle {padding-top: 30px؛ }

من عناصر CSS مبتنی بر محتوا را در این قاب قرار دادم تا بعداً در وقت شما صرفه جویی کنم. همه آنها بسیار ساده هستند و بیشتر تغییرات کیفیت زندگی هستند که تعامل با مجموعه را برای خوانندگان آسان تر می کند.

nav z-index

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

هم ترازی کد

از آنجا که من معمولاً از کلاسهای "justify-content-center" و "text-center" Bootstrap برای تراز کردن عناصر استفاده می کنم ، نمی خواهم کد من این ماهیت تراز وسط را به ارث ببرد. این امر با بازنویسی تغییرات تراز و برچسب گذاری کد در راست چپ برطرف می شود: این امر باعث می شود فاصله بین برگه ها در کد حفظ شود.

بالشتک navFix

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

ارتفاع pdf

ارتفاع پیش فرض فایل های pdf بسیار کم است. این اساساً قابل خواندن نیست ، بنابراین من ارتفاع را تغییر دادم و سعی کردم فضای کافی برای تقریباً یک صفحه را در یک زمان بگذارم.

مرحله 4: جاوا اسکریپت فریم (javascript.js)

/ * * این مورد هر عنصری را در کلاس 'toggle' جستجو می کند و آن را پنهان یا پنهان می کند */ function toggleSection (id، toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id)؛ var divArray = document.getElementsByClassName (toggleID)؛

برای (var i = 0؛ i <divArray.length؛ i ++) {divArray .style.display = "none"؛ }

divID.style.display = "بلوک"؛

}

false false؛

}

/*

* کدی که باید به ترتیب خاصی اجرا شود */ $ (سند). آماده (تابع () {/ * * بارگذاری محتوا از فایل ها */

/*

* تأخیر اندکی را برای بارگیری در داده ها مجبور کنید */ setTimeout (تابع () {/ * * همه کدهای بارگذاری شده در */ $ ('پیش کد') را برجسته کنید. هر یک (عملکرد (من ، بلوک) { hljs.highlightBlock (بلوک) ؛}) ؛} ، 1000) ؛ })؛

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

toggleSection

من از مقادیر کلاس برای مدیریت محتوای مورد نیاز برای نمایش یا پنهان استفاده کردم ، زیرا بیشتر اوقات از div برای جدا کردن و گروه بندی چندین عنصر با هم استفاده می کنم. می توانید از این گزینه برای گروه بندی دکمه های جداگانه نیز استفاده کنید ، اما قبل از تنظیم صفحه نمایش "بلوک" به بررسی اضافی نیاز دارد تا اجازه نمایش هیچ محتوا را ندهد.

بارگذاری سند

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

$ ('#mq2-intro'). load ("files/tutorials/mq2/mq2-intro/content.html") ؛

این نمونه ای از نحوه بارگذاری محتوا است.

مرحله 5: نوار ناوبری

حروف اولیه

• صفحه اصلی
• درمورد من
• پروژه های آموزشی
• با من تماس بگیر

• نوار ناوبری پیچیده ترین عنصر از همه موارد موجود در مجموعه است. ترکیب کاملی از کلاس ها آن را شبیه یک پازل می کند که از شما می خواهد به طور مداوم به کتاب قوانین نگاه کنید.

  عملکرد Bootstrap

  Bootstrap اساساً از طریق مقادیر مختلف کلاس عمل می کند. با نگاهی به خود عنصر "nav" ، تعیین هدف هر کلاس چندان دشوار نیست:

  "navbar" ما گزینه "md" (متوسط) ، "گسترش" قادر ، "تاریک" است. و آن را به "بالا" "ثابت" کردیم. به نظر می رسد گیج کننده است زیرا ترکیبی از شناسه ها است ، اما اگر به آنها به عنوان صفت عنصر نگاه کنید ، درک آنچه اتفاق می افتد بسیار آسان تر می شود.

  نام تجاری

  نام تجاری لوگو و نام معمولی است که در هر وب سایت در بالا سمت چپ مشاهده می کنید. این یک عنصر طراحی شده و واقعی است که هر کاربر در این مرحله انتظار دارد.

  توجه: برچسب های "i" در واقع نمادهای FontAwesome هستند و این برچسب ها را از صفحه هر نمادی دریافت می کنید.

  دکمه Toggler/Collapsible (تلفن همراه)

  این دکمه فقط در دستگاه های تلفن همراه نشان داده می شود. اما از آنجا که ما در اعلامیه "nav" گنجانده ایم که نوار ناوبری باید قابل ارتقا باشد ، این عناصر از طریق شناسه های خود و شناسه های "تغییر داده" به یکدیگر متصل می شوند.

  پیوندهای نوار (سمت چپ)

  این پیوندها بستگی به نوع دسته بندی هایی دارد که برای نمونه کارها نیاز دارید. من چند نمونه معمولی را به عنوان نقطه شروع ذکر کردم ، اما هیچ کس یکسان نیست. ممکن است نیازی به بخش "آموزش ها" نداشته باشید زیرا روی ساخت مجسمه های هنری تمرکز می کنید. هر مورد "li" را می توان کپی و جایگذاری کرد ، بنابراین هنگامی که به نیازهای خود پی بردید ، تنظیم ناوبری آسان است.

  توجه: شما می توانید از نظر فنی منوهای کشویی را در سایر منوهای کشویی ایجاد کنید ، اما من آن را توصیه نمی کنم مگر اینکه مایل باشید CSS و Javascript بیشتری اضافه کنید تا رابط کاربری تمیز به نظر برسد.

  پیوندهای نوار (سمت راست)

  با دادن لیست مناسب پیوندها به کلاس "ml-auto" ، Bootstrap به طور مساوی دو لیست را به طور مساوی از هم جدا می کند. این باعث ایجاد تقسیم تمیز سمت چپ و راست می شود. من تصمیم گرفتم از این فضا برای پیوندهای رسانه های اجتماعی استفاده کنم زیرا این یک روش بسیار رایج و محبوب برای افزایش حضور شما است. اگر مربوط نیست ، می توانید این پیوندها را برای یک نوار جستجو ، اطلاعات ورود به سیستم و غیره حذف کنید. اما فقط به یاد داشته باشید که استفاده از آن فضای مهمی است. و مشابه پیوندهای navbar در سمت چپ ، می توانید اینها را نیز کپی و جایگذاری کنید.

  توجه: اگر قصد دارید از پیوندهایی که قبلاً تنظیم کرده ام استفاده کنید ، "نام کاربری" را در خود پیوندهای "href" واقعی تغییر دهید.

  مرحله 6: صفحه اصلی

  

  

  

  اسم شما

  بازیگر نویسنده برنامه نویس

  این بخش و صفحات بعدی محتوای شما بستگی به آنچه می خواهید در نمونه کار خود قرار دهید دارد. بدیهی است که من نمی توانم به هر نوع محتوا واحد بپردازم ، اما سعی کردم تصاویر ، pdf ها ، فیلم ها ، بلوک های کد ، برخی از موارد معمولی را شامل شود.

  قالب جدول

  صفحه اصلی به عنوان یک میز تنظیم شده است. من برای ایجاد محصول نهایی به مهارت های شگفت انگیز طراحی خود تکیه نمی کنم ، اما انواع مختلف ترکیب سطر و ستون را اضافه کردم تا نشان دهم که بسیار پویا و انعطاف پذیر است. می توانید 3 ردیف و 2 ستون ایجاد کنید تا دکمه ها در سمت چپ و محتوا در سمت راست وجود داشته باشد ، یا می توانید کاری کاملاً متفاوت انجام دهید. فقط کمی آزمایش نیاز دارد.

  دکمه ها

  این عملکردها اساساً مانند دکمه های معمولی عمل می کند. تنها یکپارچگی واقعی Bootstrap در اینجا ناشی از استایل است تا با بقیه موضوع مطابقت داشته باشد. در غیر این صورت ، به تعداد لازم یا دکمه های کوچک برای نمایش محتوای خود ایجاد کنید و سپس مطمئن شوید که پیوندهای href را با شناسه های div ها مطابقت دهید.

  محتوای کد برنامه نویسی

  برچسب های "کد" برچسب های پیش فرضی هستند که highlight.js برای مدیریت همه برجسته سازی ها استفاده می کند. اگر از فایل javascript.js به خاطر دارید ، بخشی برای بارگیری محتوا از سایر فایلها وجود دارد.

  $ ('#home-programmer-macro'). load ("files/home/watchLoot.mac")؛

  • قسمت اول این مورد به دنبال "id" عنصری است که می خواهید محتوا را در آن وارد کنید.
  • قسمت دوم محل فایلی است که می خواهید در آن بارگذاری شود.

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

  ویدیوی YouTube

  "iframe" تعبیه شده در واقع از خود YouTube آمده است. من نحوه دریافت آنها را به طور گسترده توضیح نخواهم داد ، اما وقتی به قسمت "اشتراک گذاری" یک ویدیو می روید ، یک گزینه "جاسازی" وجود دارد که به شما کمک می کند کد لازم برای نمایش ویدیوی خود را در صفحه وب ایجاد کنید.

  مرحله 7: آینده نگری

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

  مستندات Bootstrap

  اگر بدنبال عناصری هستید که از قبل برنامه ریزی شده اند و نمونه هایی از آنها وجود دارد که می توانید آنها را کپی و در آزمایش خود بچسبانید تا بتوانید آزمایش کنید ، مستندات Bootstrap یک مکان عالی برای شروع است. من به کارت ها ، چرخ فلک ها یا فرم ها دست نزدم. من اکیداً توصیه می کنم که برای مشاهده گزینه ها ، قسمت "اجزا" را بررسی کنید.

  W3Schools

  W3Schools یک وب سایت فوق العاده است که در آن می توانید تقریباً هر چیزی که مربوط به برنامه نویسی و توسعه وب است را بیاموزید. آنها بسیار باهوش تر از من هستند و تقریباً همه عملکردهای HTML ، CSS و Javascript را که فکر می کنید را پوشش می دهند.

  میزبانی نمونه کارها

  این دستورالعمل به شما می آموزد که چگونه وب سایت خود را در چند سیستم عامل مختلف میزبانی کنید. اینها مراحلی است که باید انجام دهید اگر می خواهید نمونه کارها را به افراد ، استخدام کنندگان و غیره نشان دهید.

  آزمایش کنید و از آن لذت ببرید

  تنها راهی که می توانید یک نمونه کار عالی بسازید این است که هر چیزی را که جالب به نظر می رسد آزمایش کنید و امتحان کنید. بسیاری از نمونه کارها و وب سایت های طراحی فانتزی از جلوه های گذار عالی یا زمینه های پویا استفاده می کنند ، اما هیچ یک از آنها از پیش ساخته نشده است.