توییتر بوت استرپ و sematic UI

پیش از این توییتر Bootstrap vs. Boilerplate را مقایسه کردیم، در حالی که هر دو آنها به طور مشابه در توسعه UI front-end استفاده میشوند، Bootstrap  یک چارچوب است و Boilerplate نیست. در این مقاله، Bootstrap را با یک چارچوب جلوه ای دیگر، Semantic UI مقایسه خواهیم کرد. تاریخ و جنبه های دیگر این دو چارچوب را مقایسه نخواهیم کرد، تنها حقایق فنی که بیشترین برای هر توسعه دهنده ی جلوه ای برای تصمیم گیری برای استفاده از آن مفید است.

 

اجزای چارچوب

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

بوت استرپ دارای فایل های CSS، جاوا اسکریپت ، و فونت (یا مجموعه آیکون ها) است. اجزای قلم لازم نیست و ممکن است با مجموعه ای از آیکون ها مانند Font Awesome جایگزین شوند.

 

 

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

در اینجا یک لیست کامل از ویژگی های:

  • Glyphicons
  • Dropdowns
  • گروه های دکمه
  • دکمه ها کشویی
  • گروه های ورودی
  • Navs
  • Navbar
  • ترنج ها
  • صفحه بندی ها
  • برچسب ها
  • نشان ها
  • Jumbotron
  • صفحه کلیدی
  • عکس ها
  • هشدارها
  • Wells

 

از تاریخ ۳۰ ژوئیه ۲۰۱۶، بوت استرپ به استفاده از تنظیمات کمتری از اجزای سازنده منتهی شده است، به این معنی که شما هم اکنون می توانید جزء هایی را که نیاز دارید انتخاب کنید، نه اینکه تمام بسته های خود را شامل کنید، که می تواند زمان بارگذاری برنامه شما را تحت تاثیر قرار دهد. فقط به این صفحه مراجعه کنید تا بسته Bootstrap خودتان را سفارشی کنید.

 

 

 

UI semantic

ساختار اجزای رابط کاربری Semantic بسیار مشکل تر از Bootstrap است، همانطور که فرآیند نصب است. در حالی که Bootstrap فقط یک موضوع اصلی را فراهم می کند، رابط کاربری Semantic شامل بیش از ۲۰ تم در بسته پایه خود، علاوه بر CSS، JS، و فایل های فونت. همچنین شامل فایل های آهنگساز، Bower و Gulp می باشد.

 

 

بله، شما فقط می توانید فایل ها را به پروژه خود کپی کنید و فایل های .js و .css را به کد HTML پیوند دهید و از آن استفاده کنید. اما روش توصیه شده UI Semantic برای استفاده از چارچوب متفاوت از آنچه ما در بالا توضیح دادیم. اول از همه، بهترین روش این است که Gulp and Composer را به سرور خود نصب کنید، نه فقط کپی کردن فایلها. این تکنولوژی ها به شما کمک می کند تا نه تنها رابط کاربری معنایی را نصب کنید، بلکه همچنین می توانید تمام وابستگی ها را بررسی کنید و اگر قبلا آنها را اضافه کرده اید، آنها را اضافه کنید.

 

سرعت برنامه نویسی

Css بوت استرپ

این چارچوب فایلی محبوب دارای کلاس هایی با نام هایی است که به راحتی اشتباه گرفته می شوند، اما شما به سرعت آنها را می گیرید. در اینجا یک رشته عادی است که می تواند در هر کد منبع یک پروژه مبتنی بر بوت استرپ یافت شود:

 

<div data-role=”header”>
<a href=”#” class=”ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete”>Cancel</a>
<h1>My App</h1>
<button class=”ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check”>Save</button>

</div>

 

همانطور که می بینید، نام کلاس های CSS برای خواندن بسیار دوستانه است.

 

CSS semantic-UI

CSS Semantic-UI موفق می شود که حتی با استفاده از Bootstrap کاربر پسند تر با CSS باشد که برای برنامه نویسان آسان تر از آن است که با خواندن زبان معنایی بیشتر – به این ترتیب نام آن را بخواند. در اینجا چند نمونه وجود دارد:

 

<div class=”ui stackable inverted divided equal height stackable grid”>

 

در اینجا یک نمونه با شبکه semantic-ui (به این دلیل که شبکه یکی از ویژگی های اغلب مورد استفاده در هر چارچوب جلویی است). ما می خواهیم یک ستون ۳ ستون ایجاد کنیم، بنابراین ما از کلاس CSS زیر استفاده می کنیم:

 

<div class=”three wide column”>

 

همانطور که می بینید، تمام کلاس های معنایی-آمریکایی از واژه های انسانی استفاده می کنند. بسیار دوستانه! کد گذاری بیشتر شبیه نوشتن متن منظم است.

 

بوت استرپ JS

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

 

 

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

در اینجا کد نمونه ای از یک منو نوار است.:

 

<nav class=”navbar navbar-default” role=”navigation”>

<div class=”container-fluid”>

<!– Brand and toggle get grouped for better mobile display –>

<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-ex1-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Title</a>
</div>

<!– Collect the nav links, forms, and other content for toggling –>
<div class=”collapse navbar-collapse navbar-ex1-collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>

</ul>
<form class=”navbar-form navbar-left” role=”search”>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Search”>
</div>
<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
<ul class=”nav navbar-nav navbar-right”>

<li><a href=”#”>Link</a></li>

<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Dropdown <b class=”caret”></b></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>

<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Something else here</a></li>

<li><a href=”#”>Separated link</a></li>
</ul>
</li>

</ul>

</div><!– /.navbar-collapse –>

</div>
</nav>

 

ویژگی های HTML5 “data-toggle” و “data-target” به شما این امکان را می دهند که زیر منوها را برای یک منوی قابل انعطاف تنظیم کنید بدون آنکه نیاز به دانستن JS داشته باشید.

در اینجا وضعیت مشابهی با مدال وجود دارد:

 

<button type=”button” class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal”>Launch demo modal</button>

 

ویژگی HTML5 data-toggle = “modal” یک محتوای div با id = “myModal” را باز می کند. این همه چیزی است که شما باید انجام دهید، هیچ کد اضافی JS و یا CSS مورد نیاز نیست.

نکته: اگر شما نمی دانید که چه ویژگی های HTML5 data * هستند، برای اطلاعات بیشتر به این صفحه مراجعه کنید.

 

UI semantic JS

جاوا اسکریپت یک مهارت لازم که برای داشتن آن، رابط کاربری طراحی سایت را با استفاده از رابط کاربری معنایی طراحی کنید. (این برای طراحان جوان مشکل خواهد بود؛ هر توسعه دهنده سطح جلویی وسطی و سطح بالا باید در JS به خوبی شناخته شود). تقریبا تمام ویژگی های UI Semantic بدون اسکریپت JS کار نخواهد کرد: پنجره modal، کشویی، لغزنده و غیره.

کد JS بسیار ساده است. در اینجا یک مثال است:

 

<script>
$(document)
.ready(function() {
$(‘.ui.sidebar’)
.sidebar(‘attach events’, ‘.toc.item’)
;

})
;
</script>

 

اکثر نمونه های عناصر UI Semantic در وب سایت رسمی خود، نکات جاوا اسکریپت را ارائه می دهند:

 

 

گام بعدی بعد از ساخت یک اسکایپ اساسی HTML از پروژه آینده شما، ایجاد یک فایل main.js است که شامل کد جاوا اسکریپت برای عناصر Semantic-UI شماست.

 

طراحی و جلوه های بصری

بوت استرپ

صادقانه، طراحی پیشرفته ترین جنبه بوت استرپ نیست. جدیدترین نسخه، بوت استرپ ۴ (که هنوز در نسخه آلفا از تاریخ ۱ اوت ۲۰۱۶ است)، سعی خواهد کرد این مسئله را حل کند، اما در حال حاضر عناصر استاندارد بوت استرپ قوی ترین قضیه نیستند. شخصا، من دوست دارم پانل ها یا داشبورد های مدیریتی را در Bootstrap ایجاد کنم که نیازی به طراحی های سفارشی زیادی ندارند اما ممکن است انواع مختلف صفحه با عناصر مختلف داشته باشند.

 

 

نکته: با استفاده از “تم ها” می توانید سبک ها را در Bootstrap از بین ببرید. برخی از تم ها رایگان هستند و برخی از آنها از طریق نرم افزار رایگان رایگان هستند. شما می توانید اینجا را اینجا، اینجا یا اینجا پیدا کنید. آخرین لینک شما را به وب سایت تم بوت استرپ رسمی، که اتهامات برای تم های خود را.

 

UI semantic

این چارچوب شامل چندین تم است. شما حتی می توانید یک طراحی سایت بوت استرپ یا یک نسخه کامل از طراحی GitHub را تقلید کنید:

 

 

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

 

 

طراحی بسیار تمیز و مدرن است. همچنین تم ها در دسترس هستند. مفیدترین آنها “مسطح”، “ماده” و “پیش فرض” خواهند بود.

 

نتیجه

من هر دو قاب را دوست دارم در طول چند سال گذشته، آنها هر دو با توجه به ویژگی ها و سازگاری تکنولوژیکی (Gulp، Bower، Composer، NPM، و غیره) پیشرفت زیادی کرده اند. در حالی که ویژگی های طراحی بوت استرپ نه به عنوان قوی UI semantic، Bootstrap مهارت های JS را نیاز ندارد. از سوی دیگر، UI Semantic به نظر می رسد مدرن تر است، اما شما قطعا باید JS را بدانید. اگر شما یک توسعه دهنده ی یاهو هستید، Bootstrap را دوست دارید؛ اگر شما یک توسعه دهنده پیشرفته هستید، احتمالا ترجیحا UI Semantic را ترجیح می دهید.

0 دیدگاه برای “توییتر بوت استرپ و sematic UI”

پاسخ دهید

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

*