کتابخانه responsive-multi-menu
ادغام قالب admin در reactjs
Integrate Admin Template in ReactJS is today’s leading topic. If you are working on Web Application then admin panel template is neccessary for any application. You need to download the ADMINLTE template from its original website: AdminLTE
تولید تگ های SEO در ASP.NET Core با کتابخانه SeoTags
- روش JSON-LD
- روش Microdata
- روش RDFa
extra small, small, medium, large, extra large
در این نگارش، break-point از نوع extra small، نسبت به نگارش سوم بوت استرپ، جدید است.
به این ترتیب این گرید به شدت انعطاف پذیر شده و میتوان برای اندازههای مختلف صفحه، طرحبندیهای متفاوتی را ارائه داد.
دربرگیرندهها و ردیفهای گرید بوت استرپ
گرید طرحبندی بوت استرپ 4، 12 ستونه است و از فناوری خاصی به نام Flexbox استفاده میکند. برای کار با آن نیاز است با دو عنصر اصلی زیر آشنا بود:
- Containers: هدف آنها تنظیم طرحبندی، مطابق با break-point (های) خاصی میباشد.
- ردیفها و ستونها: طرحبندی اصلی را تشکیل میدهند و ردیفها، تعریف ستونها را میسر میکنند.
بررسی Grid Containers
در بوت استرپ 4، دو نوع Container با کلاسهای زیر وجود دارند:
- container: یک دربرگیرندهی متداول است و طرحبندی را در میانهی صفحه و بر اساس break-point (های) خاصی نمایش میدهد. این دربرگیرنده، در اطرف آن یک padding با اندازهی 15px را نیز به همراه دارد و با break-pointهای زیر خودش را تطبیق میدهد:
extra small: کمتر از 576px
small: بیشتر از 576px
medium: بیشتر از 768px
large: بیشتر از 992px
extra-large: بیشتر از 1200px
- container-fluid: این دربرگیرنده، کل عرض نمایشی صفحه را پوشش میدهد.
یک مثال: تعریف container، row و columns
<head> <style> img { width: 100px; display: block; } </style> </head> <body> <header class="clearfix" style="height: 50vh; background: url(images/background.jpg) no-repeat center center; background-size: cover; margin-bottom: 20px;"> <div class="container"> <img src="images/wisdompetlogo.svg" alt="Wisdom Pet Logo"> </div> </header> <div class="container"> <section id="services"> <div class="row"> <article class="col"> <img class="mx-auto" src="images/icon-exoticpets.svg" alt="Icon"> <h3>Exotic Pets</h3> <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-grooming.svg" alt="Icon"> <h3>Grooming</h3> <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-health.svg" alt="Icon"> <h3>General Health</h3> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-nutrition.svg" alt="Icon"> <h3>Nutrition</h3> <p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-pestcontrol.svg" alt="Icon"> <h3>Pest Control</h3> <p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-vaccinations.svg" alt="Icon"> <h3>Vaccinations</h3> <p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p> </article> </div> </section> </div> </body>
توضیحات:
- برای آزمایش این مثال، ابتدا کلاس container آنرا حذف کنید:
<div class="container">
اما چون میخواهیم محل قرارگیری لوگوی داخل این هدر، با حاشیهی سمت چپ container ذیل آن یکی باشد، این logo را داخل container قرار دادهایم.
- از این جهت که تصاویر استفاده شده از نوع svg هستند و بسیار بزرگ میباشند، با style تعریف شدهی در ابتدای head، اندازهی آنها را کاهش دادهایم و همچنین نوع نمایشی آنها را نیز به block تنظیم کردهایم. در این حالت برای اینکه تصاویر در میانهی این block قرار گیرند، از کلاس mx-auto استفاده شدهاست.
- در مرحلهی بعد، کار تعریف سطرها و ستونها انجام شدهاست:
<div class="container"> <section id="services"> <div class="row"> <article class="col">
برای مثال اگر عرض صفحه را کاهش دهیم، فقط به اندازهی سه آیتم، فضا برای نمایش وجود خواهد داشت و اگر عرض صفحه را بیشتر کنیم، امکان نمایش هر 6 آیتم تعریف شده را مانند تصویر قبلی، میسر میکند.
انواع ستونهای طرحبندی در بوت استرپ 4
همانطور که عنوان شد، گرید بوت استرپ 4، دارای 12 ستون است. البته در اینجا یک ستون میتواند عرض چندین ستون را نیز به خود اختصاص دهد.
در این تصویر، فرمول تعریف کلاسهای ستونها را در بوت استرپ 4 مشاهده میکنید. هر قسمتی از این فرمول که داخل پرانتز قرار گرفتهاست، یعنی ذکر آن اختیاری میباشد؛ به همین جهت در مثال قبلی، ذکر صرفا col نیز کار کرد. در این حالت اگر دو ستون را تعریف کنید، هر کدام 50 درصد عرض container را به خود اختصاص میدهند و اگر سه ستون تعریف شود، هر کدام 33 درصد عرض را اشغال میکنند.
در این فرمول BP به معنای break-point است و یکی از مقادیر ذکر شدهی مقابل آنرا میتواند داشته باشد. برای مثال اگر col-sm را تعریف کردیم، یعنی این ستون تا زمانیکه اندازهی صفحه تا 576px باشد، کل عرض صفحه را پر میکند.
COL در اینجا به معنای تعداد ستونی است که این محتوا قرار است به خود اختصاص دهد. برای مثال col-md-6 یعنی این ستون تا رسیدن به break-point از نوع md، کل عرض صفحه را به خود اختصاص میدهد؛ پس از آن (اندازهی صفحهی بیشتر از 768px) این ستون، 6 واحد از 12 واحد ممکن را به خود اختصاص خواهد داد.
ذکر BP نیز اختیاری است. یعنی اگر تنها col-6 را تعریف کردیم، این ستون در تمام break-pointها و در تمام اندازههای ممکن صفحه، همواره 6 واحد از 12 واحد موجود را به خود اختصاص میدهد.
مثال: بررسی فرمول تعریف ستونها در بوت استرپ 4
<head> <style> img { width: 100%; height: 200px; max-height: 200px; } </style> </head> <body> <div class="container"> <div id="services"> <div class="row"> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Exotic Pets</h4> <p>We offer <strong>specialized</strong> care for <em>reptiles, rodents, birds,</em> and other exotic pets.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Grooming</h4> <p>Our therapeutic <span class="font-weight-bold">grooming</span> treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>General Health</h4> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p> </section> <section class="col"> <img class="img-fluid" src="images/image.png" alt="sample image"> <h4>Nutrition</h4> <p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Pest Control</h4> <p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Vaccinations</h4> <p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p> </section> </div> </div> </div> </body>
- سپس کل محتوا را داخل یک ردیف تعریف کردهایم.
- در ادامه هر المان section تعریف شده را به صورت یک col در آوردهایم. به این ترتیب بوت استرپ سعی میکند تا کل عرض را با ستونهای تعریف شده تا جائیکه ممکن است پر کند:
و اگر عرض صفحه را کوچکتر کنیم، باز هم تاجائیکه ممکن است تعدادی را در سطر اول و مابقی را در سطرهای بعدی جا خواهد داد:
در ادامه میخواهیم مشخص کنیم، ستونهای خاصی، همیشه عرض مشخصی را به خود اختصاص دهند:
<div class="container"> <div id="services"> <div class="row"> <section class="col-6">
در این حالت، اولین ستون تعریف شده، تحت هر حالتی و با هر اندازهی صفحهای، همیشه نصف عرض (6 واحد از 12 واحد) را به خود اختصاص خواهد داد.
مرحلهی بعد این است که مشخص کنیم یک ستون در چه اندازهای از صفحه شروع کند به اختصاص دادن عرضی خاص به خود. برای این منظور هر 6 عنصر section تعریف شده را به صورت زیر ویرایش میکنیم:
<section class="col-sm">
و اگر صفحه را بزرگتر کنیم، مجددا همان حالت تعریف col خالی تکرار میشود و بوت استرپ سعی میکند در هر سطر، تا جائیکه میتواند، تعداد آیتم بیشتری را جا دهد. اگر بخواهیم این تعداد جا دادنها را نیز کنترل کنیم، میتوان به صورت زیر عمل کرد:
<section class="col-sm-6">
امکان تعریف بیش از یک break-point برای هر ستون در بوت استرپ 4
در این جدول انواع break-pointهای قابل تعریف توسط بوت استرپ 4 را ملاحظه میکنید. تا اینجا تاثیر اعمال تنها یکی از اینها را بر روی یک ستون بررسی کردیم؛ اما میتوان چندین break-point را بر روی یک ستون نیز اعمال کرد. برای مثال اگر به تمام sectionهای مثال این قسمت ترکیب زیر را اضافه کنیم:
<section class="col-sm-6 col-md-4">
امکان تغییر موقعیت شروع ستونها در بوت استرپ 4
در تصویر فوق، فرمول تغییر موقعیت شروع ستونها در بوت استرپ 4 را مشاهده میکنید. برای مثال اگر offset-sm-1 را به اولین section اضافه کنیم:
<section class="col-sm-6 col-md-4 offset-sm-1">
برای نمونه این قابلیت، پیشتر یکی از روشهای در مرکز صفحه قرار دادن ستونها بود؛ اما چون بوت استرپ 4 از Flexbox استفاده میکند، روشهای بهتری نیز برای آن وجود دارند که آنها را در قسمتهای بعد بررسی میکنیم.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_04.zip
NET Core 1.1.1. منتشر شد.
.NET Core 1.1.1
was released today. Both releases include reliability updates to
improve the quality of .NET Core. You can download the .NET Core Runtime
releases via our .NET Core Runtimes download page. If you are looking for the .NET Core SDK, to get the latest tools, try the .NET Core SDK download page.
کتابخانه uilang
<code>
element. uilang's logic relies on manipulating classes on HTML elements and using these classes in CSS to show, hide, animate and transform elements when a click occurs. This simple logic lets designers create most of the typical user interface behaviours: tabs, popovers, overlays, sliding menus, etc. Demo Entity Signal allows you to connect to Entity Framework through SignalR and get updates on subscribed data in real time. This lowers the number of refreshes done by the user and ultimatly allows you to do more with fewer servers. It is also requires minimal changes, so you can make realtime apps about as easily as you can make standard apps.
Rider EAP 17 منتشر شد .
What’s in this build? Significant performance improvements were made, shared projects are now supported, code inspection severity can be configured, settings for our unit test runner can be edited, various updates to the NuGet tool window UI, and more. Check out the list of fixes in this build if you feel like digging into details.
استفاده از default و check در SQL
SQL is unusual is that data is not passively stored. Instead you use declarative SQL to specify the rules that underlie the data and its integrity. When used properly, constraints can avoid having to provide a lot of logic elsewhere. CHECK() and DEFAULT can do a lot to ensure that your data is correct