امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آشنایی با فریم ورک Bootstrap طراحی قالب ‎(قسمت اول )
#1
یکی از فریم ورک های بسیار محبوب طراحی قالب وب ، سایت فریم ورک بوت استرپ است ، در این فایل آموزشی قصد داریم تا شما را با نحوه کار آن آشنا کنیم ضمنا به زودی در وب سایت آکادمیآی تی آموزش طراحی قالب سایت به وسیله فریم ورک بوت استرپ از صفر تا 100 برای شما تهیه خواهد شد و در ایمیلی جدید به شما دوست عزیز اطلاع رسانی خواهد شد .

فریمورک فرانت اند برازنده، قابل یادگیری و استفاده آسان، و قدرتمند برای طراحی سریع تر و آسان تر صفحات وب. ساختن یک وبسایت از پایه کار سختی است. حتی بعضی افراد که توانایی کد زدن به زبان های وب مثل JavaScript, HTML وCSS را دارند در طی ساخت یک وبسایت به مشکل بر میخورند. خوشبختانه تعدادی از توسعه‌ دهنده‌ ها و طراحان تویتر (Twitter)  از این مشکل اطلاع دارند و فریمورکی به نام  Bootstrap را راه اندازی کردند که زندگی را برای طراحان وب و توسعه دهندگان آسان تر کنند.در این مقاله نگاهی به  Bootstrap میندازیم و چند تا از قابلیت های آن را امتحان میکنیم تا بفهمیم این فریمورک چطوری به کارمون سرعت میده.


استفاده کردن از Bootstrap


Bootstrap فریمورک بسیار قدرتمندی است برای توسعه دهندگان فرانت اند، و قابلیت های مختلفی همراه دارد که ما به آنها نیاز داریم برای ساخت سریع تر و آسان تر یک وبسایت کامل بدون اینکه نیاز داشته باشیم از صفر خودمان بسازیمش.
برخی از قابلیت های موجود در Bootstrap عبارتند از:
شبکه (Grid) برای صفحه آرایی واکنش گرا (Responsive)
CSS پایه برای فن چاپ (Typography)، دکمه ها (Buttons)، فرم ها (Forms)، جدول ها (Tables) و تصاویر.
اجزا تشکیل دهنده محیط کاربری مانند پیمایش (Navigation)، میله پیشرفت کردن (Progress Bar)، هشدار ها (Alerts)، نوار پیمایش (Breadcrumbs) و… با سبک های ثابت و مدرن .
plugin های jQuery  برای ساختن تجربه محاوره ای (Interactive) در وبسایت .حال ما فرض میکنیم شما Bootstrap رو دانلود کردین ( از twitter.github.com/bootstrap/index.html) و همه ی اسِت های (Assets) لازم که شامل جاوا اسکریپت (JavaScript) و CSS آماده هستند به صورت زیر؛

حالا ما میتوانیم برخی از قابلیت ها رو شروع به استفاده کنیم.
1

2  


CSS اصلی: دکمه ها (Buttons)



Bootstrap سی اس اس پایه دارد که حاوی استایل هایی (styles) برای برخی از اجزای ابتدایی HTML شاملاست. Button یکی از اجزا معمولی است که در یک وبسایت بکار میرود و در Bootstrap استایل مربوط به آن توسط کلاس (class) به نام btn  اعمال میشود؛

1Default Button

نتیجه ی این مارک آپ بصورت زیر نمایش داده شده که استایل پیش فرض محسوب میشود؛


همچنین ما میتوانیم با اضافه کردن کلاس های بیشتر نقش دکمه رو تعریف کنیم؛

1Button
2Button
3Button

متناسب با نقش آن هر دکمه یک رنگ متفاوتی میگیرد:


.jpg   1.jpg (اندازه: 10 KB / تعداد دفعات دریافت: 0)
استایل  Bootstrap با  LESS ساخته شده. که استفاده آن را بجای CSS معمولی به شما توصیه میکنیم؛ کهبدین صورت استایل ها قابل تنظیم کردن بیشتری پیدا می کنند.
به عنوان مثال رنگ دکمه موفقیت (Success Button) به دیزاین شما زیاد نمی خورد؛ ما به راحتی میتوان متغیر هایی که در فایل variables.less موجود است را تغییر بدهیم، مثلا بدین صورت؛


1 @btnSuccessBackground:              #bce895; //#62c462;
2 @btnSuccessBackgroundHighlight:     #a0cd78; //#51a351;

چون بقیه آرگومان ها (Arguments) مانند سایه ها (Shadows) و گرادینت (Gradients) از قبل تنظیم شدند، استایل ها بصورت اتوماتیک هماهنگ میشوند نتیجه اش در تصویر زیر مشخص شده؛

.jpg   2.jpg (اندازه: 10/98 KB / تعداد دفعات دریافت: 0)


.jpg   3.jpg (اندازه: 10/76 KB / تعداد دفعات دریافت: 0)
پاسخ
#2
اجزای تشکیل دهنده ی محیط کاربری
Bootstrap همچنان برخی کامپوننت های (Components) که قابل استفاده مجدد را دارند فراهم میکند برای پیمایش (Navigation)، صفحه گذاری (Pagination)، میله پیشرفت (Progress Bar)، دکمه هاو خیلی اجزای بیشتر. اضافه کردن این اجزا به آسانی استایل سازی دکمه ها در بخش قبلی است، و در این مثال، ما ارتقا میدهیم آن دکمه ها را و در یک گروهی از دکمه بدین صورت قرار میدهیم؛

1 <div class="btn-group">
2 <button type="button" class="btn btn-success">Button</button>
3 <button type="button" class="btn btn-warning">Button</button>
4 <button type="button" class="btn btn-danger">Button</button>
5 </div>

متوجه شدید آیا که دکمه ها الان درون یک <div> قرار دارند که کلاس آن btn-group است؟

ما همچنین میتوانیم یک کلاس اضافه تر کنیم که این دکمه ها بصورت عمودی قرار بگیرند:

1 <div class="btn-group btn-group-vertical">
2 <button type="button" class="btn btn-success">Button</button>
3 <button type="button" class="btn btn-warning">Button</button>
4 <button type="button" class="btn btn-danger">Button</button>
5 </div>



.jpg   112.jpg (اندازه: 5/99 KB / تعداد دفعات دریافت: 0)






پلاگین های jQuery

من هنوز بخاطر میاورم زمانی که من ابتدا یک وبسایت استاتیک (Static) ساختم بهد از سایتی به سایت دیگر تو اینترنت برای پیدا کردن یک پلاگیم مناسب برای اضافه کردن یک ویژگی interactive باید جست و جو میکردم. با استفاده از Bootstrap شما نیازی به این کار ندارین بخاطر اینکه پلاگین های jQuery که همراه آن است مانند: Accordion, Modal, Tooltip, Popup, Tab و خیلی پلاگین دیکر راه حل مناسبی برای این مشکل اند.
در مثال زیر ما پلاگین Tooltip را بکار میگیریم.

1 <p id="container">Jujubes icing oat cake
2 <a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop tiramisu</a>.
3 Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum
4 jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi
5 bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.</p>  


توجه کنید که ما یک link بامشخصات rel و title اضافه کردیم. این لینکی است که یک پیغام را نشون میده هنگامی که ماوس روی آن هاور (hover) میکند. برای فعال سازی آن اسکریپت زیر را اضافه میکنیم :

1 $('#container').tooltip({
2     selector: "a[rel=tooltip]"
3 });

این اسکریپت هر لینکی که تحت آی دی #container است را هدف میگیره باrel=tooltop؛


.jpg   113.jpg (اندازه: 24/67 KB / تعداد دفعات دریافت: 0)
همان طور که میبینید روش اضافه کردن Tooltip با پلاگین های bootstrap کاملا مستقیم است و بر خلاف زمان های گذشته (که بعضی اوقات ما دچار تداخل  و خطا میشدیم در حین استفاده کردن از پلاگین های متعدد)، این پلاگین ها - Tooltip, Popup, Tabs و … - همگی با هم بدون مشکل فعالیت میکنند.


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


.jpg   114.jpg (اندازه: 22/89 KB / تعداد دفعات دریافت: 0)

نتیجه گیری
در Bootstrap قابلیت های بسیار بیشتری وجود دارد که ما همه ی آنها را بررسی نکردیم. که ما در مقاله بعدی به باقی این قابلیت ها می پردازیم و به صورت قدم به قدم شما را در ساختن یک وبسایت واقعی راهنمایی می کنیم. در زیر ما ۱۰ وبسایتی که به صورت بسیار خوب از Bootstrap به عنوان پیکره اصلی سایت خود استفاده کردند انتخاب کردیم برای الهام شما.
Ozwald Boateng
Red Antler
The Studio Dreams
Madeira Cloud
Open Cooks•
BreweryDB

به امید موفقیت تک تک شما دوستان و عزیزان همراه وب سایت آکادمی آی تی.
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  موضوعات جدید آموزشی bootstrap - سری دوم developer1 3 5,263 2016/06/11، 05:24 PM
آخرین ارسال: developzoom
Information ویدیو شماره 1 آموزش Bootstrap : نصب Bootstrap بر روی نرم افزار visual studio developer1 1 5,757 2015/06/06، 06:03 AM
آخرین ارسال: rafig256
  موضوعات جدید آموزشی bootstrap - سری اول developer1 0 2,551 2015/06/01، 12:17 AM
آخرین ارسال: developer1
Information شروع آموزش طراحی وب واکنش گرا Bootstrap developer1 1 3,301 2015/04/10، 02:57 PM
آخرین ارسال: rafig256

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان