دوستان عزیز، توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هفتم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. همونطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده که به صورت متنی در ادامه مطلب ارائه می شود.
Glyphicons یا آیکون های نمادین در بوت استرپ :
بوت استرپ 200 آیکن نمادین را از مجموعه ی آیکن های نمادین، در اختیار ما میگذارد که از این لینک میتونید ببینید. از این آیکون ها میتوان در متن ها ، دکمه ها ، جعبه ابزار ها ، نویگیشن ها ، فرم ها و دیگر جاها استفاده کرد. در ادامه با بعضی ازین آیکون های نمادین آشنا خواهیدشد.
سینتکس و نحوه ساخن یک آیکون Glyphicons در بوت استرپ :
یک آیکون Glyphicons در سینتکس و کد زیر قرار میگیرد، همچنین در قسمت name کد باید نام ایکون نمادین مورد نظر قرار بگیرد.
<span class="glyphicon glyphicon-name"></span>
در مثال زیر با شیوه های مختلف استفاده از یک ایکون Glyphicons در بوت استرپ آشنا خواهید شد :
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>Envelope icon as a link: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> </p> <p>Search icon: <span class="glyphicon glyphicon-search"></span></p> <p>Search icon on a button: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Search icon on a styled button: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Print icon: <span class="glyphicon glyphicon-print"></span></p> <p>Print icon on a styled link button: <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p>
نکته : جهت دست یابی به منبع کاملی از تمام این ایکون ها به لینک روبرو مراجعه کنید : Bootstrap Glyphicon Reference
آموزش کار با مدال ها و برچسب های بوت استرپ :
مدال ها : (Badges)
مدال ها شاخص های عددی هستند که نشان میدهند چه تعداد ایتم در ارتباط با لینک ها هستند، مانند تصویر زیر که اعداد (2 ، 10 و 5) مدال هستند .
برای ساخت مدال ها بالا از کلاس .badge به همراه عنصر <span> استفاده می کنیم :
<a href="#">News <span class="badge">5</span></a><br> <a href="#">Comments <span class="badge">10</span></a><br> <a href="#">Updates <span class="badge">2</span></a>
همچنین میتوان از مدال ها درون عناصر دیگری مانند دکمه ها نیز استفاده کرد :
مثال زیر نحوه ی اضافه کردن مدال به دکمه ها (تصویر بالا) را نشان می دهد :
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
برچسب ها : (Labels)
از برچسب ها برای ارائه توضیحات بیشتر در مورد چیزی استفاده میشود :
برای ساخت یک برچسب از کلاس .label به همراه یکی از کلاس های متنی .label-default, .label-primary, .label-success, .label-info, .label-warning یا .label-dangerدرون یک <span> استفاده می کنیم. کد تصویر بالا به شکل زیر می باشد :
<h1>Example <span class="label label-default">New</span></h1> <h2>Example <span class="label label-default">New</span></h2> <h3>Example <span class="label label-default">New</span></h3> <h4>Example <span class="label label-default">New</span></h4> <h5>Example <span class="label label-default">New</span></h5> <h6>Example <span class="label label-default">New</span></h6>
همچنین مثال زیر تمام کلاس های برچسب متنی را نشان می دهد :
<span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span>
برای تازه شدن دیر نیست.
موفق و پیروز باشید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۹ بهمن ۱۳۹۴
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس