Custom Elements، دارای یک چرخه حیات می‌باشند. در طی این چرخه حیات، میتوان تعدادی متد خاص را به المان سفارشی خود اضافه کرد که به صورت خودکار توسط مرورگر فراخوانی می‌شوند. به این متدها Life-cycle C allbacks یا Custom Element Reactions نیز می‌گویند. برای درک بهتر چرخه حیات مذکور، به تکه کد زیر توجه نمائید: customElements.define("x-component", class extends HTMLElement {
constructor() {
super();
...
Web Components مجموعه‌ای از تکنولوژی‌هایی می‌باشند که امکان ساخت المان‌های سفارشی با قابلیت استفاده‌ی مجدد و به همراه کپسوله‌سازی ساختار، استایل و عاملیت (Functionality) متناظر با المان ایجاد شده را در اختیار شما قرار می‌دهد. در این سری چند قسمتی، ابتدا روش ساخت Web Components را بدون استفاده از ابزار خاصی بررسی کرده و در ادامه با معرفی Stenciljs ، چند کامپوننت سفارشی را طراحی خواهیم کرد. سه تکنولوژی اصلی مورد استفاد ...
در بخش قبل با نصب فریم ورک vuetify و بخشی از کامپوننت‌های آن آشنا شدیم . Order : به‌وسیله‌ی order میتوان ترتیب قرارگیری آیتمهای Grid را مشخص کرد. فرض کنید یک ردیف سه ستون داریم و می‌خواهیم زمانیکه این آیتمها در مروگر نمایش داده می‌شوند، ترتیب قرارگیری آنها متناسب با نیاز ما باشد که با استفاده از دستور order این کار صورت می‌پذیرد. نکته: این کار برای بحث seo مورد استفاده قرار میگیرد.
...
برای طراحی ui برنامه‌هایی که با فریم ورک vue.js توسعه داده می‌شوند، داشتن یک css framework مناسب، جهت زیبا سازی برنامه، یکی از انتخابهای مهم می‌باشد. در این سری از آموزش‌ها، نحوه‌ی بکارگیری فریم ورک Vuetify را یاد خواهیم گرفت. چرا vuetify ؟ دلایل زیادی برای استفاده از این framework وجود دارد که از جمله آنها میتوان به مواردی از قبیل رابط کاربری خوب برای طرح بندی صفحه برنامه، پشتیبانی از تمام مرورگرها، پشتیبانی از ...
بوت استرپ، به همراه کلاس‌هایی است، برای نمایش زیباتر فرم‌ها، که شامل کلاس‌های اعتبارسنجی و حتی کنترل نحوه‌ی چیدمان و اندازه‌ی آنها نیز می‌شود. ایجاد فرم‌های مقدماتی، با بوت استرپ 4
بوت استرپ به همراه کلاس‌هایی مانند form-group و form-control است که از آنها میتوان برای ایجاد یک فرم مقدماتی استفاده کرد. در ابتدا مثال غیر تزئین شده‌ی زیر را در نظر بگیرید: <body>
<div class="container">
< ...
بوت استرپ، به همراه کامپوننت‌هایی برای پیاده سازی اعمال متداول طرحبندی صفحات است؛ مانند jumbotron ،media ،table و card.
کامپوننت jumbotron
از Jumbotron برای نمایش متنی مشخص در بالای یک صفحه، استفاده می‌شود. دو روش استفاده‌ی از آن در بوت استرپ 4 وجود دارند:
- داخل container: <div class="container">
<header class="jumbotron mt-4">
<div class="display-2 mb-4"> ...
در این قسمت، شیوه‌نامه‌هایی را بررسی می‌کنیم که به المان‌های پر کاربردی مانند دکمه‌ها، لیست‌ها و نشان‌ها اعمال می‌شوند.
شیوه‌نامه‌های کار با دکمه‌ها در بوت استرپ 4
کلاس پایه ایجاد دکمه‌های بوت استرپی، کلاس btn است. البته آن‌را میتوان با کلاس‌های دیگری نیز ترکیب کرد:
- کلاس btn را میتوان بر روی المان‌هایی مانند anchor، button و input نیز اعمال کرد: <a class="btn btn-primary" href="#" role="button"& ...
پس از سیستم طرحبندی بوت استرپ، مهم‌ترین کامپوننت‌های آن، کامپوننت‌های راهبری سایت مانند Navs ،Tabs ،Pills و Navbars هستند. Navbars در بوت استرپ 4 نسبت به نگارش سوم آن بازنویسی کامل شده‌اند و شامل بهبودهای قابل ملاحظه‌ای هستند.
کامپوننت‌های Nav در بوت استرپ 4
کامپوننت‌های گروه Nav، در نگارش 4 آن به علت استفاده‌ی از Flexbox، تغییرات بسیاری داشته‌اند و در نتیجه‌ی آن، انعطاف پذیرتر و ساده‌تر شده‌اند.
در ابتدا ...
قابلیت‌های یک Flex Container در بوت استرپ 4
یک Flex Container متداول به این صورت کار می‌کند:
این کلاس‌ها که موارد داخل پرانتز آنها اختیاری است، المان را تبدیل به یک المان Flexbox می‌کنند. حالت نمایشی پیش‌فرض آنها block است؛ اما اگر نیاز بود میتوان آنها را تبدیل به in-line نیز کرد. بنابراین ساده‌ترین Flex Container را میتوان با افزودن کلاس d-flex ایجاد کرد.
بر روی یک Flex Container میتوان کلاس‌های ت ...
امکان ایجاد ستونهای تو در تو در بوت استرپ 4
در اینجا امکان قرار دادن یک مجموعه‌ی کامل از ردیف‌ها و ستون‌ها، داخل یک ستون از پیش موجود نیز وجود دارد. برای اینکار ابتدا یک row جدید را داخل یک ستون موجود ایجاد می‌کنیم. با اینکار بلافاصله دسترسی به گرید 12 ستونه‌ی بوت استرپ را داخل آن ستون خواهیم داشت؛ به همراه تمام کلاس‌هایی که تاکنون آنها را بررسی کردیم.
یک مثال: ایجاد ستونهای تو در تو <head>
...