به انجمن تخصصی وب هاستینگ خوش آمدید

academyIT · 02-12-2017, 01:10 PM

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

فریم ورک front end برازنده با یادگیری و استفاده آسان، قدرتمند برای طراحی سریع‌تر صفحات وب.

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

[color=#ffffff !important]استفاده از Bootstrap[/color]

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

طراحی واکنش‌گرا (Responsive)
CSS پایه برای Typography،Button، Form ،Table، Image
اجزا تشکل‌دهنده محیط کاربری مانند Navigation، Progress Bar، Alerts، Breadcrumbs و… با سبکهای جدید
pluginهای jQuery.

برای استفاده از بوت استرپ، ابتدا باید آن را از سایت بوت استرپ دانلود و سپس تگ‌های زیر را به کد خود اضافه کنید:

کد:

[color=#ffffff !important]CSS پایه: Buttonها[/color]
Bootstrap برای برخی از اجزای ابتدایی HTML مانند button دارای cssهای از پیش تعریف شده است. Button یکی از اجزا معمولی وب سایت است که در Bootstrap استایل مربوط به آن به وسیله کلاسی به نام btn اعمال می‌شود.

کد:

Default Button

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

همچنین با اضافه کردن کلاس‌های تعریف شده دیگر، ظاهر آن‌ها قابل تغییر است.
در این حالت متناسب با نقش هر button رنگ آن مشخص خواهد شد:

کد:

ButtonButtonButton

استایل Bootstrap با LESS ساخته شده است که استفاده از آن به جای CSS معمولی توصیه می‌شود؛ بدین صورت استایل‌ها قابلیت تغییر بیشتری پیدا می‌کنند.
به عنوان مثال اگر رنگ Success Button به طراحی شما نمی‌خورد؛ به راحتی می‌توانید متغیرهای موجود در فایل variables.less را تغییر بدهید:
ادامه مطلب http://academyit.net/%D8%A8%D9%88%D8%AA-...8%B3%D8%AA

درباره انجمن تخصصی وب هاستینگ

پیوند ها

دوستان