https://virgool.ir/feed/@hosein.kh.77حسین خزائی دانشجوی سال دوم رشته کامپیوتر تهران، 1398fa2026-11-11 05:08:14https://files.virgool.ir/upload/users/3725/avatar/22V9Fs.pnghttps://virgool.ir/@hosein.kh.77https://virgool.ir/@hosein.kh.77/تصاویر-در-بوت-استرپ-v8vzcdqmgoppتصاویر در بوت استرپ(1)یکی از عناصر مهم در محتوای وب سایت که به جذابیت وب سایت‌ها کمک می‌کند تصاویر هستند.اگر محتوا وب سایت تصویر داشته باشد از دید موتورهای جستجو ارزش بالاتری دارند و می‌تواند رتبه‌ی وب سایت را بالا ببرد.یکی از مهم ترین ویژگی‌ها برای تصاویر وب سایت خاصیت واکنشگرا بودن آن‌هاست که با استفاده از آریا بوت استرپ می‌توان تصاویر وب سایت را واکشنگرا نمود.واکنشگرایی یا رسپانسیو بودن تصاویر به این معنا است که با اضافه کردن کلاسimg-responsive به تگ <img> تصاویر با تغییر سایز صفحه نمایش هماهنگ شده و سبک‌های (css) زیر به تصویر اعمال می‌شود:display: block;max-width: 100%;height: auto;مانند تگ زیر:<img src="flower.jpg" class="img-responsive" alt="flower" />در بوت استرپ می‌توان تصاویر را به 3 صورت دایره‌ای، گوشه گرد و بند انگشتی (thumbnail) نمایش داد که در ادامه کدهای هرکدام نوشته شده است.تصاویر دایره‌ایبرای دایره‌ای کردن تصاویر در بوت استرپ از اضافه کردن کلاس img-circle به تگ <img> استفاده می‌کنیم؛ مانند تگ زیر:<img src="flower.jpg" class="img-circle" alt="flower" />تصویر دایره ای در بوت استرپبرای دایره‌ای شدن تصویر باید عرض و ارتفاع عکس یکسان بوده در غیر این صورت تصویری بیضی شکل ایجاد می‌شود.تصاویر گوشه گردبرای گرد کردن گوشه‌های عکس در بوت استرپ کلاس img-rounded به تگ <img>اضافه می‌نماییم؛ مانند تگ زیر:<img src="flower.jpg" class="img-rounded" alt="flower" />تصویر گوشه گرد در بوت استرپتصاویر بند انگشتی (thumbnail)با استفاده از کلاس img-thumbnail می‌توان به تصاویر یک حاشیه (border) 0.25rem اضافه نمود؛ مانند تگ زیر:<img src="flower.jpg" class="img-thumbnail" alt="flower" />تصویر بند انگشتی (Thumbnail) در بوت استرپنکته : مرورگر IE8 از تصاویر دایره‌ای و گوشه گرد پشتیبانی نمی‌کند.با استفاده از کلاس thumbnail و قابلیت Grid در بوت استرپ می‌توانید گالری تصاویر ایجاد نمایید، برای این منظور می‌توانید از کدهای زیر استفاده کنید:<div class="row"> <div class="col-md-4"> <div class="thumbnail"> <a href="Sunset.jpg"> <img src="Sunset.jpg" alt="Sunset" style="width:100%"> <div class="caption"> <p>Lorem ipsum...</p> </div> </a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="Night.jpg"> <img src="Night.jpg" alt="Night" style="width:100%"> <div class="caption"> <p>Lorem ipsum...</p> </div> </a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="Flowers.jpg"> <img src="Flowers.jpg" alt="Flowers" style="width:100%"> <div class="caption"> <p>Lorem ipsum...</p> </div> </a> </div> </div> </div>گالری تصاویر با کلاس thumbnail و قابلیت Gridاگر تمایل دارید، آموزش‌های بیشتری در خصوص بوت استرپ و آریا بوت استرپ مطالعه نمایید، می‌توانید به وب سایت آریا بوت استرپ به آدرس زیر مراجعه فرمایید:http://abs.AryaBootstrap.comhttp://aryabootstrap.mlhosein.kh.77hosein.kh.77Sun, 13 Oct 2019 12:00:05 +0330https://virgool.ir/@hosein.kh.77/نوار-منو-در-آریا-بوت-استرپ-vlzngnqhwh8iنوار منو در آریا بوت استرپامروزه تقریبا اکثر وب سایت‌ها از یک یا چندین نوار منو استفاده می‌کنند.می‌توان با کامپوننت نوار منو در بوت استرپ 4، منوها را برای زمینه‌های مختلف طراحی نموده و طرح‌ها و جلوه‌های جذابی با استفاده از آن‌ها ایجاد نمود.در نسخه‌ی جدید آریا بوب استرپ (نسخه 1.2 بر پایه بوت استرپ 4.3.1) می‌توانیم منوهای راست چین مناسب وب‌سایت‌های فارسی زبان طراحی نمود، به صورتی که نوشته‌ها در سمت راست و آیکون‌هایی مانند جستجو ثبت نام و ... در سمت چپ منو قرار گیرند، مانند تصویر زیر:تصویر 1 - نمونه نوار منوی ساده و تیره در آریا بوت استرپیکی دیگر از امکانات منوها در بوت استرپ واکنشگرا بودن منوها نسبت به سایز دستگاه‌هایی است که با آن وب سایت به نمایش در می‌آید و واکشنگرا بودن منوها به این معنا است که برای صفحات کوچکتر از مانیتورهای رومیزی (تبلت‌ها، موبایل‌ها و...) تبدیل به یک دکمه شده و نوار منو قرار می‌گیرد، در صورت کلیک روی آن، گزینه‌های منو به صورت لیست نمایش داده می‌شود، همانند تصویر زیر:تصویر 2- نمایش دکمه منو در صفحه نمایش کوچکتر از مانیتورهای رومیزی (وضعیت بسته بودن منو)تصویر 3- نمایش گزینه‌های منو در صفحه نمایش کوچکتر از مانیتورهای رومیزی (وضعیت باز شدن منو)برای اضافه نمودن نوار منو راست چین و واکشنگرا بودن آن می‌توان از دستورات آریا بوت استرپ که در زیر آمده است استفاده نمود:<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">نوار منو</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="true" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse show" id="navbarColor02" style=""> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">صفحه نخست <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">ویژگی ها</a> </li> <li class="nav-item"> <a class="nav-link" href="#">قیمت</a> </li> <li class="nav-item"> <a class="nav-link" href="#">درباره</a> </li> </ul> <div class="form-inline my-2 my-lg-0"> <input class="form-control ml-sm-2" type="text" placeholder="گزاره برای جستجو"> <button class="btn btn-secondary my-2 my-sm-0" type="submit">جستجو</button> </div> </div> </nav>زیر منوها (DropDown)برای ایجاد زیر منو می‌توانید از دستورات زیر استفاده نماید:<nav class="navbar-dark bg-dark"> <!-- Content here --> ... <li class="nav-item dropdown"> <div class="dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false" href="#"> ویژگی ها </a> <div class="dropdown-menu" aria-labelledby="dropdown-menu"> <a class="dropdown-item " href="#">لینک 1</a> <a class="dropdown-item " href="#">لینک 2</a> <a class="dropdown-item " href="#">لینک 3</a> </div> </div> </li> </nav>تصویر 4- زیرمنو با مدل DropDown در نوار منونمایش عکس یا لوگو در نوار منوبرای نمایش عکس یا لوگو در نوار منو از دستورات زیر استفاده می‌کنیم:<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#"> <img src="aryabootstrap.jpg" alt="Logo" style="width:40px;"> </a> <!-- Content here --> … </nav>تصویر 5- نمایش عکس یا لوگو در نوار منوکلام آخردر این بخش از دوره های آموزش آریا بوت استرپ، شما را با نوار منو دربوت استرپ آشنا نمودیم و امیدواریم مطالب عنوان شده مورد استفاده قرار گیرد.(http://www.AryaVandidad.com) شرکت توسعه فناوری اریا وندیدادhosein.kh.77hosein.kh.77Wed, 18 Sep 2019 12:03:44 +0430https://virgool.ir/@hosein.kh.77/رنگها-در-بوت-استرپ-phfpjryiaso8دقت در رنگ‌بندی و انتخاب رنگ‌ها برای وب سایت و قالب از مهارت‌های یک طراح سایت است. در این اموزش به معرفی امکانات بوت استرپ برای استفاده از رنگ ها پرداخته شده است.رنگ ها در بوت استرپیکی از ویژگی‌های مهم که به جذابیت و زیبایی وب سایت‌ها و قالب‌ها می پردازد مبحث رنگ‌ها می باشد.دقت در رنگ‌بندی و انتخاب رنگ‌ها برای وب سایت و قالب از مهارت‌های یک طراح سایت است.رنگ‌ها در بوت استرپ برای استفاده به دو دسته ی اصلی تقسیم می شوند‌:رنگ متنرنگ پس زمینههر رنگ در بوت استرپ دارای عنوان خاصی است، که در ادامه به آن‌ها می پردازیم.رنگ متنکلاس رنگ‌ها برای متن وب سایت به صورت زیر می باشد:.text-primary.text-secondary.text-success.text-danger.text-warning.text-info.text-light.text-dark.text-muted.text-whiteبرای استفاده از رنگ‌های بالا از دستورات زیر استفاده می‌کنیم:<p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p>رنگ پس زمینهکلاس رنگ ها برای پس زمینه  وب سایت به صورت زیر می باشد:.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info.bg-light.bg-darkبرای استفاده از رنگ‌های پس زمینه بالا از دستورات زیر استفاده می‌کنیم:<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>نکته: برای متن لینک‌ها نیز می توان رنگ انتخاب نمود. رنگهای لینک نیز مانند رنگ های متن می باشد و برای استفاده از رنگ‌ها می توان از دستورات زیر استفاده نمود:<p><a href="#" class="text-primary">Primary link</a></p> <p><a href="#" class="text-secondary">Secondary link</a></p> <p><a href="#" class="text-success">Success link</a></p> <p><a href="#" class="text-danger">Danger link</a></p> <p><a href="#" class="text-warning">Warning link</a></p> <p><a href="#" class="text-info">Info link</a></p> <p><a href="#" class="text-light bg-dark">Light link</a></p> <p><a href="#" class="text-dark">Dark link</a></p> <p><a href="#" class="text-muted">Muted link</a></p> <p><a href="#" class="text-white bg-dark">White link</a></p>hosein.kh.77hosein.kh.77Tue, 03 Sep 2019 11:09:12 +0430