آموزش Bootstrap

کار با تصاویر و عکس ( Images ) در Bootstrap

bootstrap دارای مجموعه ای از کلاس های آماده و از پیش تعریف شده است که به وسیله آنها می توانید افکت های خاصی را به تصاویر موجود در صفحات وب خود ، اعمال کنید .
برای مثال ، می توانید گوشه های تصاویر را گرد کرده و یا با آنها آلبوم عکس بسازید .
در این درس ، به بررسی کلاس های مرتبط با تصاویر ( Images ) خواهیم پرداخت . توجه داشته باشید که این کلاس ها به تگ <img> در HTML اعمال می شوند .

به وسیله کلاس img-rounded. در Bootstrap می توانید گوشه های یک عکس ( تگ <img> ) را به صورت گرد در بیاورید . انجام این کار همانند استفاده از خاصیت border-radius در CSS 3 می باشد .
نکته مهم : این کلاس در IE 8 کار نمی کند ! .
به کد و مثال زیر دقت ونمایید :

<div class="container">
<h2> تصویر با گوشه های گرد </h2>
<p> باعث می شود تا گوشه های تصویر گرد شوند img-rounded کلاس</p>
<img src="../../Pic/Exam_1.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="180">
</div>

 

دنبال کردن این مطلب

کار با جدول ها ( Tables ) در Bootstrap

به وسیله کلاس های آماده و تعریف شده برای جدول های HTML در bootstrap ، می توانید به سادگی و فقط با دادن نام کلاس به جدول مورد نظر خود ، قالب و استایل متفاوتی را به جدول خود بدهید .
در این درس به بررسی کلاس های bootstrap برای جدول ها خواهیم پرداخت . bootstrap دارای یک سری کلاس آماده جهت استایل دهی و افکت گذاری روی جدول های HTML است که کار شما را برای ساختن جدول های زیبا و واکنش گرا ، آسان می کند .
راهنمایی مهم : برای استفاده از خواص و افکت های هر کلاس ، کافی است نام آن کلاس را به خاصیت class تگ <table> موزد نظر خود اضافه کنید . برای هر جدول می توانید از یک یا چندین کلاس به صورت هم زمان ، بهره بگیرید .
در ادامه به بررسی هر یک از این کلاس ها خواهیم پرداخت .

کلاس table. ، یک فرم ساده ( با حاشیه درونی ( margin ) کم ) و خطوط جدا کننده افقی را به جدول می دهد . در این حالت جدول دارای حاشیه دور ( border ) و خطوط عمودی نمی باشد .
مثال زیر ، نحوه استفاده و خروجی این کلاس را نشان می دهد :

<div class="container">
<h2 style="text-align : center" >جدول ساده در بوت استرپ</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>Rezaee</td>
<td>Ali@example.com</td>
</tr>
<tr>
<td>Zahra</td>
<td>Kiani</td>
<td>Zahra@example.com</td>
</tr>
<tr>
<td>Amir</td>
<td>Sedighi</td>
<td>Amir@example.com</td>
</tr>
</tbody>
</table>
</div>

 

دنبال کردن این مطلب

کار با متن ( Text ) و فنون چاپ در Bootstrap

در این درس با کلاس ها و خواص مختلف CSS تعریف شده در bootstrap ، جهت قالب بندی و استایل دهی محتویات متنی صفحه ، مثل هدرها ( عنوان یا Heading ) ، پاراگراف ها و ... آشنا خواهید شد .
اندازه پیش فرض متن ( font-size ) در bootstrap ، مقدار 14px و میزان بلندی خطوط 1.428 می باشد . قلم پیش فرض مورد استفاده نیز Helvetica ، Arial و sans-serif بوده که مجموع این خواص به بخش <body> و کل پاراگراف های صفحه ( تگ های <p> ) اعمال می شوند.
علاوه بر خواص فوق ، تگ <p> در bootstrap دارای یک حاشیه پایینی ( Bottom-margin ) به اندازه نصف ارتفاع خطوط ، یعنی تقریبا معادل 10px می باشد .

شما می توانید تگ های عنوان <h1> تا <h6> را همانند روشی که در HTML استفاده می کردید ، در bootstrap نیز تعریف کنید . bootstrap به صورت خودکار ، استایل خاصی را به این نوع نوشته ها می دهد :

<div class="container">
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
</div>

 

دنبال کردن این مطلب

آموزش مقدماتی کار با سیستم خانه بندی ( Grid )

در سیستم خانه بندی bootstrap ، عرض صفحه به 12 خانه مساوی ( Column ) تقسیم می شود . شما می توانید از میزان پهنای این خانه ها برای قرار دادن محتویات مورد نظر خود استفاده نموده و یا با گروه کردن ( Combine ) آنها ، خانه های پهن تری ایجاد کنید .
همانطور که در مثال زیر نشان داده می شود ، ردیف اول دارای 12 ستون است . در این حالت می توانید محتوبات مورد نظر خود را در هر یک این خانه ها قرار دهید ، اما اگر به فضای بیشتری نیاز دارید ، با گروه کردن خانه ها ( که در ادامه به آموزش آن خواهیم پرداخت ) به صورت 2 ، 3 ، 4 ، 5 ، 6 ، 8 ، 10 و یا 12 تایی ، ستون های پهن تری ساخته و استفاده کنید .

سیستم خانه بندی ( Grid ) در bootstrap کاملا واکنش گرا ( Responsive ) بوده و ستون ها می توانند ، نحوه قرار گیری و خروجی خود را بر حسب سایز صفحه تغییر دهند .
برای مثال فرض کنید که 3 ستون مساوی ( span4 ) در عرض صفحه دارید . در یک صفحه نمایش بزرگ ، این 3 ستون در کنار هم و در عرض صفحه قرار خواهند گرفت . اما در یک صفحه نمایش کوجک مثل موبایل ، هر یک از ستون ها ( span4 ) به تنهایی در عرض صفحه نمایش داده شده و دو ستون دیگر به ترتیب زیر هم قرار گرفته و آنها نیز کل عرض صفحه را می پوشانند .
تصویر زیر نحوه نمایش ستون ها در سیستم خانه بندی bootstrap را نشان می دهد :


به این صورت می توانید محتویات خود را فارغ از اینکه ، از قبل بدانید بر روی چه اندازه صفحه نمایشی قرار است نمایش داده شوند ، تنظیم کنید .
نکته : حتما به خاطر داشته باشید که مجموع ستون ها در عرض صفحه ، نبایستی از عدد 12 بیشتر شود .

bootstrap دارای 4 کلاس ( بر حسب سایز صفحه و نوع دستگاه نمایش دهنده محتویات ) برای قالب بندی ستون ها به شرح زیر است :

کلاس xs که برای صفحات کوچک مثل موبایل استفاده می شود .
کلاس sm که برای صفحات متوسط مثل تبلت ها به کار می رود .
کلاس md که برای صفحات نمایش معمولی مثل لپ تاپ ها یا مانیتورها تعیین شده است .
کلاس lg که برای دستگاه های بزرگ و wide مناسب می باشند .
هر یک از کلاس های فوق ، هنگامی که در یک عنصر تعیین شوند ، متناسب با اندازه صفحه نمایش ، در خروجی به کار می روند . در ادامه بیشتر با نحوه استفاده و خروجی این کلاس ها ، آشنا خواهید شد .

نکته مهم : اگر یک Grid را با کلاس کوچک تر ، مثل xs یا sm تعریف کنیم ، در هنگام نمایش در یک صفحه بزرگ ، خانه ها به صورت هوشمند و واکنش گرا بزرگ شده و خود را با صفحه متناسب می کنند .
به عبارت دیگر ، کلاس های xs یا sm می توانند نقش کلاس های md و lg را بازی کنند . اما برعکس این عمل رخ نمی دهد . یعنی اگر کلاس ، md باشد ، آنگاه در یک صفحه موبایل به صورت نا متناسب نمایش داده خواهد شد .

کد زیر ، ساختار پایه سیستم خانه بندی ( Grid ) در bootstrap را نشان می دهد . 

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>

 

دنبال کردن این مطلب

آموزش نصب Bootstrap در نرم افزار ویژوال استودیو

همانطور که در درس های قبل اشاره کردیم ، bootstrap مجموعه ای از کلاس ها و اسکریپت های آماده است که می توانید از آنها برای قالب دهی و طراحی عناصر صفحات خود استفاده نمایید .
در این درس ، شما را با نحوه اضافه کردن فایل ها و امکانات bootstrap به یک سایت ASP.Net در محیط ویژوال استودیو آشنا خواهیم کرد .
نرم افزار ویژوال استودیو ، دارای ابزار درون ساخته ای به نام Package Manager Console می باشد که به وسیله آن می توانید پکیج ها و ابزارهای آماده را به پروژه یا وب سایت خود اضافه نمایید . این ابزار به صورت خودکار ، به منبع هر پکیج متصل شده و فایل ها ، پوشه ها و سایر محتویات مربوط به هر پکیج را دانلود کرده و آن را درون پروژه یا سایت شما قرار می دهد .

برای دسترسی به ابزار Package Manager Console ، از منوی Tools نرم افزار ویژوال استودیو ، همانطور که در تصویر زیر نشان داده شده است ، گزینه NuGet Package Manager را باز نموده و آیتم Package Manager Console را انتخاب نمایید .

سپس پنجره این ابزار در محیط برنامه Visual Studio به صورت زیر باز می شود :

نکته مهم : برای استفاده از ابزار Package Manager Console و نصب پکیج های مورد نظرتان ، بایستی حتما به اینترنت متصل باشید .

برای نصب هر پکیج توسط ابزار Package Manager Console در ویژوال استودیو ، بایستی عبارت install-package و سپس نام پکیج مورد نظر را در خط فرمان تایپ نموده و دکمه Enter را بزنید .
برای نصب پکیج bootstrap نیز ، عبارت install-package bootstrap را همانند تصویر زیر ، در خط فرمان ابزار نوشته و دکمه Enter را بزنید .


سپس برنامه به صورت خودکار به منبع پکیج bootstrap متصل شده و فایل ها و سایر محتویات مربوط به آن را دانلود و به پروژه یا وب سایت شما اضافه می کند .
پس از نصب bootstrap ، پوشه های زیر ، همانطور که در تصویر نمایش داده شده است ، به وب سایت شما اضافه می شود :

پوشه content : این پوشه شامل فایل های CSS که محتوی کلاس های آماده bootstrap می باشد ، است .
پوشه fonts : این پوشه شامل font های مرتبط با bootstrap می باشد .
پوشه scripts : این پوشه نیز شامل فایل های اسکریپت bootstrap و jQuery است که امکان استفاده از ویجت ها و ابزار های bootstrap را فراهم می کنند .

پس از اینکه ، فایل های لازم برای به کارگیری bootstrap را در سایت ASP.Net خود دانلود کردید ، برای استفاده از کلاس های آن ، بایتسی در ابتدای هر صفحه ، لینک اتصال به فایل های CSS و یا اسکریپت های bootstrap را همانند کد زیر در بخش <head> صفحه قرار دهید . از آن پس ، کلاس ها و ابزار های bootstrap به صورت نامحدود در صفحات ASP.Net یا HTML و ... در دسترس شما هستند :

<head>
&nbootstrapp;&nbootstrapp;&nbootstrapp;&nbootstrapp; <title>عنوان صفحه </title>

&nbootstrapp;&nbootstrapp;&nbootstrapp; <link href="../../Content/bootstrap.css" rel="stylesheet" />
&nbootstrapp;&nbootstrapp;&nbootstrapp;&nbootstrapp; <link href="../../Content/bootstrap-theme.css" rel="stylesheet" />
&nbootstrapp;&nbootstrapp;&nbootstrapp;&nbootstrapp; <script src="../../Scripts/jquery-1.9.1.js"></script>
&nbootstrapp;&nbootstrapp;&nbootstrapp; &nbootstrapp;<script src="../../Scripts/bootstrap.js"></script>
</head>

راهنمایی : بنا بر نیاز و ضرورت استفاده می توانید لینک اتصال به هر یک از فایل های CSS و یا اسکریپت های فوق را اضافه و کم نمایید .

دنبال کردن این مطلب

طراحی اولین صفحه وب با اسنفاده از Bootstrap

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

1 . تگ <DOCTYPE!> را برای HTML 5 وارد کنید :

Bootstrap از المنت ها و خواص HTML و CSS برای طراحی صفحات وب استفاده می کند که نیاز به تگ <DOCTYPE!> در زبان HTML 5 دارد .
در ابتدای تمامی صفحات بایستی تگ <DOCTYPE!> و خواصی که زبان صفحه و نحوه کدینگ کاراکترهای آن را مشخص می کنند ، را همانند کد زیر تعیین نمایید :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-Bootstrap">
</head>
</html>

2 . Bootstrap بیشتر برای نمایش در صفحات موبایل طراحی شده است :

Bootstrap 3 به گونه ای طراحی شده تا یک نمایش واکنش گرا را در اکثر صفحات نمایش ، از جمله موبایل ها و تبلت داشته باشد .
برای اطمینان از رندر صحیح و Zoom مناسب آن ، حتما تگ <meta> را به صورت زیر در بخش <head> صفحه وارد کنید :

<meta   name =" viewport "   content = " width = device-width , initial-scale = 1 "  >

در تگ فوق دو خاصیت اصلی وجود دارد :

width=device-width : این خاصیت تعیین می کند تا عرض صفحه مطابق و متناظر با صفحه نمایش دهنده دستگاه و به صورت واکنش گرا باشد . یعنی با تغییر عرض آن ، کوچک یا بزرگ شود .
initial-scale = 1 : این خاصیت مقدار پبیش فرض Zoom صفحه را بر اندازه واقعی یعنی 1 تعیین می کند ( در واقع بدون Zoom ) .
3 . تعیین در بر گیرندها ( Containers ) :

Bootstrap شامل عنصر در برگیرنده اصلی ( Container ) است که محتویات کل صفحه را در خود جای می دهد . در Bootstrap دو نوع Container به شرح زیر داریم که می توانید هر یک را انتخاب نمایید :

کلاس container. : در این حالت عرض صفحه بر یک مبنای مشخص و معمولا با مقداری فضای خالی در اطراف آن تعیین می شود ( کل عرض صفحه را در بر نمی گیرد ) .
کلاس container-fluid. : در این حالت عرض صفحه معادل کل عرض صفحه نمایش دهنده آن شده و هیچ فضای خالی در اطراف باقی نمی ماند.
در ادامه یک صفحه را با دو نوع کلاس متفاوت Bootstrap طراحی کرده ایم :

 

دنبال کردن این مطلب

Bootstrap چیست و چه کاربردی دارد ؟

Bootstrap در حال حاضر ، محبوب ترین و پیشرو ترین چهارچوب کاری بر مبنای HTML ، CSS و جاوا اسکریپت برای طراحی صفحات وب واکنش گرا مخصوصا جهت موبایل ها و دستگاه های قابل حمل مثل تبلت است .
اما سوال این است که طراحی وب واکنش گرا چیست ؟

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

مهمترین ویژگی های Bootstrap عبارتند از :

Bootstrap یک چهار چوب کاری رایگان و اپن سورس برای طراحی سریع و آسان صفحات وب می باشد .
Bootstrap شامل تمپلیت های آماده ای از HTML ، CSS برای نمایش متون ، دکمه ها ، فرم ها ، جداول ، سیستم مسیر دهی سایت ، تصاویر و ... می باشد . این چهارچوب همچنین شامل Plu-in های آماده ای از زبان جاوا اسکریپت نیز می باشد .
Bootstrap به سادگی این امکان را برایتان فراهم نموده تا طراحی وب واکنش گرا را انجام دهید .

چرا از Bootstrap استفاده می کنیم ؟

استفاده آسان و راحت : هر طراح وب ، هر چند مبتدی که آشنایی کافی با HTML و CSS داشته باشد ، می تواند به راحتی با Bootstrap طراحی وب را به صورت واکنش گرا انجام دهد .
ویژگی های واکنش گرا : ویژگی های واکنش گرای Bootstrap باعث می شود تا بتوان برای هر نوع صفحه نمایش مثل لپ تاپ ، تبلت و یا موبایل طراحی صفحات وب انجام داد .
طراحی وب اختصاصی جهت موبایل : در Bootstrap 3 ، طراحی واکنش گرا برای دستگاه های موبایل به عنوان یک بخش اساسی مورد توجه قرار گرفته است .
سازگاری با انواع مرورگر ها : Bootstrap تقریبا با تمامی مرورگرهای مطرح مثل کروم ، فایر فاکس ، IE و ... سازگاری کامل دارد .

دو راه کلی برای استفاده از Bootstrap وجود دارد :

دانلود Bootstrap از سایت getbootstrap.com و سپس قرار دادن آن بر روی هاست سرور خود .
دریافت Bootstrap به صورت آنلاین از یک توزیع کننده تخت وب آن ( CDN ) .
نحوه دانلود Bootstrap :

1 . دانلود فایل های Bootstrap : برای دانلود کتابخانه و سایر فایل های Bootstrap و قرار دادن آنها بر روی هاست سایت تان می توانید به آدرس getbootstrap.com رفته و مراحل نصب را دنبال کنید ( در یک بخش جدا ، به آموزش این کار خواهیم پرداخت ) .
2 . استفاده از یک توزیع کننده آنلاین ( CDN ) : اگر نمی خواهید Bootstrap را دانلود کرده و آن را بر روی هاست سایت خود قرار دهید ، می توانید از یک توزیع کننده آنلاین ( CDN ) استفاده کنید .
MaxCDN یک توزیع کننده آنلاین معتبر برای Bootstrap بوده که به طور کامل از تمامی خواص و کلاس های CSS ، HTML و جاوا اسکریپت آن پشتیبانی می کند . برای این منظور بایستی کدهای زیر را در قسمت <head> صفحه خود قرار دهید :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

یک مزیت استفاده از CDN برای Bootstrap : بسیاری از کاربرانی که سایت شما را مشاهده می کنند ، قبلا از یک CDN آنلاین مثل MaxCDN فایل های Bootstrap را دانلود کرده و بنابراین هنگام درخواست یک صفحه جدید ، اطلاعات را از حافظه Cashe دریافت کرده که باعث افزایش سرعت لود صفحه خواهد شد . 

دنبال کردن این مطلب
ratingValue4.8 worstRating 1 bestRating 5 reviewCount 437