devices running on Intel 8th generation processors and AMD Zen 2 as well as Qualcomm 7 and 8 Series will meet our principles around security and reliability and minimum system requirements for Windows 11
Here’s a summary of what’s new in this preview release:
- Improved ASP.NET Core debugging experience
- Servers & middleware
-
IHttpSysRequestTimingFeature - SNI hostname in
ITlsHandshakeFeature -
IExceptionHandler
-
- Blazor
- New Blazor Web App project template
- Blazor router integration with endpoint routing
- Enable interactivity for individual components with Blazor Server
- Improved packaging of Webcil files
- Blazor Content Security Policy (CSP) compatibility
- API authoring
- Support for generic attributes
- SignalR
- SignalR seamless reconnect
- Native AOT
- Support for
AsParametersand automatic metadata generation in compile-timed generated minimal APIs
- Support for
- Authentication and authorization
- Authentication updates in ASP.NET Core SPA templates
- New analyzer for recommended
AuthorizationBuilderusage
the top 20 constitutes a cast of familiar characters:
- JavaScript
- Java
- Python
- PHP
- C++
- C#
- CSS
- Ruby
- C
- TypeScript
- Swift
- Objective-C
- Scala
- Shell
- R
- Go
- PowerShell
- Perl
- Haskell
- Kotlin
سلام. من کدهای زیر رو نوشتم اما دیلیت خطی ( ردیفی) برام کار نمی‌کنه و اررو 500 میده:
$("#JQGrid1").jqGrid({
url: "/manager/Products/OnProductDataRequested",
editurl: '/manager/Products/EditProductData',
mtype: "GET",
datatype: "json",
page: 1,
sortname: 'Priority',
sortorder: "desc",
viewrecords: true,
jsonReader: { id: "Id" },
prmNames: { id: "Id" },
colNames: ["Id","خلاصه","توضیح خلاصه","قیمت","قیمت با تخفیف","درصد کارمزد سایت","آستانه هشدار موجودی","محتوا", "عنوان","فروشگاه","گروه","تعداد موجودی", "اولویت","محصولات مکمل","تصاویر","مقادیر مشخصه محصول","قیمت","نظرات", "فعال","ویژه","موجود","برند","عملیات درجا","عملیات کامل"],
colModel: [
{ key: true, width: 50, name: "Id", hidden: true, search: false },
{
editable: true, width: 10, name: "Abstract", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "AbstractDescription", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "Value", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "Discount", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "SiteWagePercentage", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "InventoryAlertLimit", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "Context", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 150, name: "Title", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
name: "shopTitle", align: 'center', viewable: true, editrules: { edithidden: true },
search: true,
editable: true, stype: 'select',
edittype: 'select',
searchoptions: {
sopt: ["eq", "ne"],
dataUrl: "/manager/Products/Getshop/", buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.shId + '">' + this.shTitle + '</option>';
});
}
return s + '</select>';
},
},
editoptions: {
dataUrl: "/manager/Products/Getshop",
buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.shId + '">' + this.shTitle + '</option>';
});
}
return s + '</select>';
},
}
},
{
editable: true, name: "groupTitle", search: true, stype: "select"
, editrules: { edithidden: true },
search: true,
edittype: 'select',
editoptions: {
dataUrl: "/manager/Products/GetGroups",
buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.grpId + '">' + this.grpTitle + '</option>';
});
}
return s + '</select>';
},
}
},
{
editable: true, width: 70, name: "AvailableCount", search: true, stype: "number",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: true, width: 50, name: "Priority", search: true, stype: "number",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 80, name: "ComplementProducts", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 70, name: "Images", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 100, name: "ProductProperty", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 80, name: "Price", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 80, name: "Comments", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: true, width: 50, name: "Active", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" }
, formatoptions: { disabled: false}
},
{
editable: true, width: 80, name: "AmazingOffer", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" }
, formatoptions: { disabled: false}
},
{
editable: true, width: 80, name: "Available", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" },
searchoptions: { "sopt": ["bw", "eq"] }, formatoptions: { disabled: false }
},
{
name: 'BrandId', align: 'center', hidden: true, viewable: true, editrules: { edithidden: true },
editable: true, stype: 'select',
edittype: 'select',
editoptions: {
dataUrl: "/manager/Products/GetBrands",
buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.brandId + '">' + this.brandTitle + '</option>';
});
}
return s + '</select>';
},
}
},
{
name: "myac", width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions',
formatoptions: { keys: true }
},
{
editable: false, width: 70, name: "FullEdit", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
// BLAH, BLAH, BLAH
],
gridComplete: function () {
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
ComplementProducts = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/ComplementProducts/Index/" + cl + " }) + '><span class=\"fa fa-shopping-cart\" style='color: white;'></span></a></div>";
Images = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Images/Index/" + cl + " }) + '><span class=\"fa fa-picture-o\" style='color: white;'></span></a></div>";
ProductProperty = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/ProductPropertyItems/Index/" + cl + " }) + '><span class=\"fa fa-braille\" style='color: white;'></span></a></div>";
Price = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/pricesppitems/Index/" + cl + " }) + '><span class=\"fa fa-line-chart\" style='color: white;'></span></a></div>";
Comments = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Products/Comments/" + cl + " }) + '><span class=\"fa fa-comments\" style='color: white;'></span></a></div>";
FullEdit = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Products/Edit/" + cl + " }) + '><span class=\"fa fa-edit\" style='color: white;'></span></a><a class='btn btn-primary' href=/manager/Products/Details/" + cl + " }) + '><span class=\"fa fa-exclamation-circle\" style='color: white;'></span></a></div>";
jQuery("#JQGrid1").jqGrid('setRowData', ids[i], { ComplementProducts: ComplementProducts, Images: Images, ProductProperty: ProductProperty, Price: Price, Comments: Comments, FullEdit: FullEdit});
}
}, loadComplete: function () {
var activeButton = getColumnIndexByName('Active');
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
$("tbody > tr.jqgrow > td:nth-child(" + (activeButton + 1) + ") > input",
this).click(function (e) {
var rowId = $(e.target).closest("tr").attr("id");
// alert("active clicked " + rowId);
$.ajax({
type: "POST",
url: "/manager/Products/Activate",
data: {
id: rowId
},
dataType: "json"
});
});
var amazingOfferButton = getColumnIndexByName('AmazingOffer');
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
$("tbody > tr.jqgrow > td:nth-child(" + (amazingOfferButton + 1) + ") > input",
this).click(function (e) {
var rowId = $(e.target).closest("tr").attr("id");
$.ajax({
type: "POST",
url: "/manager/Products/ShowInAmazingOffer",
data: {
id: rowId
},
dataType: "json"
});
$('#JQGrid1').trigger('reloadGrid');
});
var availableButton = getColumnIndexByName('Available');
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
$("tbody > tr.jqgrow > td:nth-child(" + (availableButton + 1) + ") > input",
this).click(function (e) {
var rowId = $(e.target).closest("tr").attr("id");
$.ajax({
type: "POST",
url: "/manager/Products/Available",
data: {
id: rowId
},
dataType: "json"
});
$('#JQGrid1').trigger('reloadGrid');
});
},
height: "auto",
caption: "",
viewrecords: true,
rowNum: 20,
direction: "rtl",
pager: jQuery('#JQGrid1_pager'),
rowList: [10, 20, 30, 40],
toppager: true,
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
}).jqGrid('navGrid', '#JQGrid1_pager',
// the buttons to appear on the toolbar of the grid
{ edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: true,searchtext:"جستجو" },
// options for the Edit Dialog
{
width: 450,
editCaption: "ویرایش محصول",
recreateForm: true,
closeAfterEdit: true,
viewPagerButtons: false,
//afterShowForm: populateGroups,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// Add options
{ url: '/TabMaster/Create', closeAfterAdd: true },
// Delete options
{ url: '/manager/Products/Remove' },
{
zIndex: 100,
caption: "جستجوی محصول",
sopt: ['cn']
}
); 
Build Real App in Angular 10 and ASP.Net Web API
These are 2 of the hottest frameworks right now for the ‘back-end’ (Microsoft’s ASP.NET Core) and the ‘front-end’ (Google’s Angular) and are well worth spending the time to learn.
This course starts from scratch, you neither need to know Angular 1 nor Angular 2
We will start from nothing and incrementally build this property dealing application front-end using Angular 10.
And then we will connect our front-end with the Web-API until we have a fully functional Web Application that we will publish to Firebase and then on IIS.
Jeff and his guests Jon Galloway, Julie Lerman, and Shayne Boyer walk you through the setup and configuration of an ASP.NET Core application.
قسمت‌های اصلاح نشده
در ادامه‌ی مطالب قسمت قبل، به برخی دیگر از معایب طراحی در جاوااسکریپت که در CoffeeScript نیز اصلاح نشده‌اند می‌پردازیم.استفاده از parseInt
تابع ()parseInt در جاوااسکریپت، در صورتیکه یک مقدار رشته‌ای را به آن ارسال کنید و پایه‌ی مناسب آن را تعیین نکنید، نتایج غیره منتظره‌ای (unexpected) را باز می‌گرداند . برای مثال:
# Returns 8, not 10!
parseInt('010') is 8 # Use base 10 for the correct result
parseInt('010', 10) is 10 Strict mode
Strict mode یکی از قابلیت‌های ECMAScript 5 است که به شما اجازه می‌دهد تا یک برنامه یا تابع جاوااسکریپت را در محیطی محدود اجرا کنید. این محدودیت موجب نمایش بیشتر خطاها و هشدارها نسبت به حالت نرمال می‌شود و به توسعه دهندگان این امکان را می‌دهد تا از نوشتن کدهای غیر قابل بهینه سازی برای اشتباهات رایج جلوگیری کنند.
به عبارت دیگر Strict mode باعث کاهش اشکالات، افزایش امنیت، بهبود عملکرد و حذف برخی از سختی‌های استفاده از ویژگی‌های زبان می‌شود.
در حال حاضر Strict mode، در مرورگرهای زیر پشتیبانی می‌شود:
- Chrome >= 13.0
- Safari >= 5.0
- Opera >= 12.0
- Firefox >= 4.0
- IE >= 10.0
با این حال، Strict mode به طور کامل با مرورگرهای قدیمی سازگار است.
تغییرات Strict mode
- خطا در پروپرتی‌ها و نام آرگومان‌های تابع تکراری
- خطا در عدم استفاده‌ی صحیح از delete
- خطا در زمان دسترسی به arguments.caller و arguments.callee (به دلایل عملکرد)
- استفاده از عمگر with سبب بروز خطای نحوی می‌شود
- متغیرهای خاص مانند undefined که قابل نوشتن نیستند
- معرفی کلمات کلیدی رزرو شده مانند implements, interface, let, package, private, protected, public, static و yield.
با این حال، برخی از رفتارهای زمان اجرای Strict mode نیز تغییر کرده است:
- متغییرهای سراسری به صورت صریح و روشن هستند (کلمه کلیدی var نیاز است). مقدار سراسری this نیز به صورت undefined است.
- eval نمی‌تواند متغیر جدیدی را در حوزه‌ی محلی خود تعریف کند.
- بدنه‌ی هر تابع باید قبل از استفاده تعریف شده باشد (قبلا گفتم که در جاوااسکریپت شما می‌توانید قبل از تعریف تابع آن را فراخوانی کنید).
- آرگومان‌ها تغییر ناپذیر هستند.
CoffeeScript در حال حاضر بسیاری از الزامات Strict mode را پیاده سازی کرده‌است مانند: همیشه از کلمه کلیدی var برای تعریف متغیر استفاده می‌کند؛ اما فعال کردن Strict mode در برنامه‌های CoffeeScript نیز بسیار مفید خواهد بود. در واقع CoffeeScript بر روی انطباق برنامه‌ها با Strict mode در زمان کامپایل را، در برنامه‌های آینده خود دارد.
استفاده از Strict mode
برای فعال کردن بررسی محدودیت، کد و توابع خود را با این رشته شروع کنید:-> "use strict" # ... your code ...
do -> "use strict" console.log(arguments.callee)
Strict mode دسترسی به arguments.callee و arguments.caller، که تاثیر بدی را بر روی عملکرد کد شما دارند، حذف می‌کند و استفاده‌ی از آنها سبب بروز خطا می‌شود.
در مثال زیر در حالت strict mode سبب بروز خطای TypeError می‌شود، اما در حالت نرمال به خوبی اجرا شده و یک متغیر سراسری را ایجاد می‌کند.
do -> "use strict" class @Spine
do -> "use strict" class window.Spine
شما می‌توانید در زمان توسعه برنامه جاوااسکریپت خود Strict mode را فعال کنید و در زمان انتشار، بدون Strict mode برنامه‌ی خود را منتشر کنید.
JavaScript Lint
JavaScript Lint یک ابزار بررسی کیفیت کدهای جاوااسکریپت است و اجرای برنامه‌ی شما از طریق این راه عالی باعث بهبود کیفیت و بهترین شیوه‌ی کد نویسی می‌شود. این پروژه براساس ابزار JSLint است. شما می‌توانید چک لیست سایت JSLint را که شامل موضوعاتی است که باید آنها در نظر داشته باشید، مانند متغیرهای سراسری، فراموش کردن نوشتن سمی کالن، کیفیت ضعیف عمل مقایسه را نام برد.
خبر خوب این است که CoffeeScript تمام موارد گفته شده‌ی در چک لیست را انجام می‌دهد. بنابراین کد تولیدی CoffeeScript با JavaScript Lint کاملا سازگار است. در واقع ابزار coffee از lint ،option پشتیبانی می‌کند.
coffee --lint index.coffee index.coffee: 0 error(s), 0 warning(s)
With just some knowledge of IoC, DI, and Unit Testing, begin using FakeItEasy to mock dependencies while unit testing. Author Mike McCarthy will guide readers—from novices to experts—to getting the most out of mocking frameworks with FakeItEasy Succinctly.
بوت استرپ، به همراه کامپوننت‌هایی برای پیاده سازی اعمال متداول طرحبندی صفحات است؛ مانند jumbotron ،media ،table و card.
کامپوننت jumbotron
از Jumbotron برای نمایش متنی مشخص در بالای یک صفحه، استفاده می‌شود. دو روش استفاده‌ی از آن در بوت استرپ 4 وجود دارند:
- داخل container:
با این خروجی:
در اینجا با اعمال کلاس jumbotron، متن header، داخل یک قاب با گوشه‌های گرد قرار می‌گیرد و مشخص‌تر نمایش داده خواهد شد. همچنین با mt-4، فاصله‌ای را بین آن و بالای صفحه ایجاد کرده‌ایم.
- خارج از container:
با این خروجی:
اگر می‌خواهیم این قاب، تمام عرض صفحه را پر کند و همچمنین لبه‌های گرد آن نیز حذف شوند، می‌توان از کلاس jumbotron-fluid استفاده کرد و آن‌را خارج از container قرار داد. سپس برای اینکه متن داخل آن با container زیر آن تراز شود، می‌توان یک container را در اینجا داخل jumbotron تعریف کرد.
کنترل ظاهر جداول، در بوت استرپ 4
بوت استرپ 4 به همراه تعدادی کلاس ویژه است که برای بهبود ظاهر المان استاندارد جدول، ارائه شده‌اند. آنها را در طی مثال‌هایی بررسی خواهیم کرد.
برای رسیدن به چنین تصویری، تغییرات زیر را بر روی یک جدول استاندارد HTML اعمال کرده‌ایم:
- کلاس table، کلاس پایه اعمال شیوه‌نامه‌های بوت استرپ 4 به المان جدول است که سبب خواهد شد آیتم‌های آن با فاصله‌ی بهتری نسبت به یکدیگر ظاهر شوند. با استفاده از کلاس table-dark می‌توان یک قالب مشکی را به جدول اعمال کرد.
- کلاس table-striped سبب می‌شود تا ردیف‌ها، یک در میان با رنگی متمایز نمایش داده شوند.
- با افزودن table-hover، رنگ ردیف‌های جدول با عبور اشاره‌گر ماوس از روی آنها تغییر می‌کند.
- کلاس table-bordered کار نمایش قاب جدول را انجام می‌دهد.
- کلاس table-responsive سبب می‌شود تا در اندازه‌های کوچک صفحه، یک اسکرول بار افقی برای نمایش آیتم‌های جدول ظاهر شود و یا می‌توان از کلاس table-sm نیز استفاده کرد تا padding تعریف شده‌ی در جدول، کاهش یابند. این کلاس، قابلیت پذیرش break-pointها را نیز دارد؛ مانند table-responsive-md.
- کلاس‌های thead-light و یا thead-dark که بر روی تگ thead قرار می‌گیرند، رنگ پس زمینه‌ی هدر جدول را مشخص می‌کنند.
- برای تغییر رنگ پس زمینه و متن یک ردیف می‌توان از کلاس‌های bg-color و text-color استفاده کرد:
- برای تغییر رنگ سلول‌های جدول از کلاس‌های table-color استفاده می‌کنیم:
فرمول‌های رنگ‌های قابل اعمال به ردیف‌ها، سلول‌ها و متون جداول بوت استرپ 4 را در تصویر ذیل مشاهده می‌کنید:
کامپوننت جدید card در بوت استرپ 4
پنل‌های بوت استرپ 3 حذف و بجای آن کامپوننت جدیدی به نام card در نگارش 4 آن ارائه شده‌است که با افزودن کلاس آن به یک div، بلافاصله قابی با گوشه‌های گرد به آن اضافه می‌شود.
- برای اینکه عناصر داخل card با فاصله‌ی مناسبی از لبه‌های آن قرار گیرند و همچنین شیوه‌نامه‌های قسمت‌های مختلف آن به درستی اعمال شوند، نیاز است محتوای section ای که با کلاس card مشخص شده (تعیین container)، داخل یک div با کلاس card-body قرار گیرد. در اینجا امکان تعریف card-header و card-footer نیز وجود دارد.
- سپس یک card می‌تواند دارای تصویری واکنشگرا باشد که عرض card را پوشش می‌دهد. این تصویر با کلاس card-img مشخص می‌شود.
در اینجا امکان تعریف card-img-top و card-img-bottom نیز وجود دارند. این موارد تصویر card را در بالا و یا پایین آن، بدون padding، نمایش می‌دهند. اگر می‌خواهید متنی را بر روی این تصویر نمایش دهید، از کلاس card-img-overlay استفاده کنید. در این حالت‌ها باید تصویر را خارج از card-body قرار دهید.
- عنوان و زیرعنوان یک card، توسط کلاس‌های card-title و card-subtitle تعیین می‌شوند.
- متن داخل آن‌را با کلاس card-text مشخص می‌کنیم.
- لینک‌های ذیل آن نیز توسط کلاس card-link در طی یک ردیف نمایش داده می‌شوند.
امکان تعیین رنگ پس زمینه، حاشیه و متن یک card نیز وجود دارند:
با این خروجی:
و فرمول کلی رنگ‌های آن نیز به صورت زیر می‌باشد:
می‌توان برای یک card، هدر و فوتر نیز تعریف کرد:
در اینجا همان card قبلی را مشاهده می‌کنید که عناوین آن به card-header و لینک‌های ذیل آن به card-footer منتقل شده‌اند:
برای تعریف یک list-group در داخل یک card، به صورت زیر عمل می‌کنیم:
ابتدا list-group را به خارج از card-body منتقل می‌کنیم. سپس برای حذف حاشیه‌ی آن و همچنین گوشه‌های گرد آن، جهت یکی شدن با قاب card، کلاس list-group-flush را به آن اضافه می‌کنیم:
تعیین نحوه‌ی چیدمان cards در بوت استرپ 4
اگر چندین card در یک صفحه تعریف شده‌اند، برای تعیین نحوه‌ی قرارگیری آنها در کنار یکدیگر می‌توان یا از سیستم طرحبندی متداول بوت استرپ استفاده کرده و یا امکان تعریف گروهی از آنها نیز وجود دارد. برای اینکار کافی است یک div با کلاس card-group را تعریف و سپس تمام cards را داخل آن قرار دهیم:
که سبب خواهد شد تمام cards در کنار یکدیگر بدون فاصله‌ای نمایش داده شوند. اگر بجای آن از کلاس card-deck استفاده شود، فاصله‌ای بین cards قرار می‌گیرد.
اگر از کلاس card-columns استفاده کنیم، تمام cards را به صورت خودکار در ستون‌ها و ردیف‌ها، قرار می‌دهد که بعضی از آنها بلندتر و بعضی دیگر کوتاه‌تر هستند (نوعی نمایش کاشی‌کاری شده‌است):
ولی در کل اگر نیاز به کنترل بیشتری دارید، از همان روش متداول تعریف ردیف‌ها و ستون‌های سیستم طرحبندی بوت استرپ استفاده کنید.
المان media در بوت استرپ 4
برای نمایش متداول متن و تصویر که قرار است تصویر، در یک ستون و متن، در ستونی دیگر باشد، بوت استرپ 4 به همراه کلاس media است که بر اساس Flexbox بازنویسی شده‌است.
با این خروجی:
ابتدا توسط کلاس media یک container را تعریف می‌کنیم. سپس تصویر، یک ستون و media-body ستون دیگر را تشکیل می‌دهد.
با استفاده از d-flex، المان تصویر را به یک Flexbox container تبدیل کرده و با استفاده از کلاس align-self-center، آن‌را در میانه‌ی ستون قرار می‌دهیم. همچنین در اینجا توسط mr-3، فاصله‌ی آن‌را با متن ستون کناری تنظیم کرده‌ایم.
کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: Bootstrap4_09.zip
کامپوننت jumbotron
از Jumbotron برای نمایش متنی مشخص در بالای یک صفحه، استفاده می‌شود. دو روش استفاده‌ی از آن در بوت استرپ 4 وجود دارند:
- داخل container:
<div class="container">
<header class="jumbotron mt-4">
<div class="display-2 mb-4">Our Mission</div>
<p class="lead">Wisdom Pet Medicine strives to blend the best in
traditional and alternative medicine in the diagnosis and
treatment of companion animals including dogs, cats, birds,
reptiles, rodents, and fish. We apply the wisdom garnered in
the centuries old tradition of veterinary medicine, to find the
safest treatments and cures.</p>
</header> 
در اینجا با اعمال کلاس jumbotron، متن header، داخل یک قاب با گوشه‌های گرد قرار می‌گیرد و مشخص‌تر نمایش داده خواهد شد. همچنین با mt-4، فاصله‌ای را بین آن و بالای صفحه ایجاد کرده‌ایم.
- خارج از container:
<header class="jumbotron jumbotron-fluid">
<div class="container">
<div class="display-2 mb-4">Our Mission</div>
<p class="lead">Wisdom Pet Medicine strives to blend the best in
traditional and alternative medicine in the diagnosis and
treatment of companion animals including dogs, cats, birds,
reptiles, rodents, and fish. We apply the wisdom garnered in
the centuries old tradition of veterinary medicine, to find the
safest treatments and cures.</p>
</div>
</header> 
اگر می‌خواهیم این قاب، تمام عرض صفحه را پر کند و همچمنین لبه‌های گرد آن نیز حذف شوند، می‌توان از کلاس jumbotron-fluid استفاده کرد و آن‌را خارج از container قرار داد. سپس برای اینکه متن داخل آن با container زیر آن تراز شود، می‌توان یک container را در اینجا داخل jumbotron تعریف کرد.
کنترل ظاهر جداول، در بوت استرپ 4
بوت استرپ 4 به همراه تعدادی کلاس ویژه است که برای بهبود ظاهر المان استاندارد جدول، ارائه شده‌اند. آنها را در طی مثال‌هایی بررسی خواهیم کرد.
برای رسیدن به چنین تصویری، تغییرات زیر را بر روی یک جدول استاندارد HTML اعمال کرده‌ایم:
<table class="table table-striped table-hover table-bordered table-responsive"> <thead class="thead-light">
- کلاس table-striped سبب می‌شود تا ردیف‌ها، یک در میان با رنگی متمایز نمایش داده شوند.
- با افزودن table-hover، رنگ ردیف‌های جدول با عبور اشاره‌گر ماوس از روی آنها تغییر می‌کند.
- کلاس table-bordered کار نمایش قاب جدول را انجام می‌دهد.
- کلاس table-responsive سبب می‌شود تا در اندازه‌های کوچک صفحه، یک اسکرول بار افقی برای نمایش آیتم‌های جدول ظاهر شود و یا می‌توان از کلاس table-sm نیز استفاده کرد تا padding تعریف شده‌ی در جدول، کاهش یابند. این کلاس، قابلیت پذیرش break-pointها را نیز دارد؛ مانند table-responsive-md.
- کلاس‌های thead-light و یا thead-dark که بر روی تگ thead قرار می‌گیرند، رنگ پس زمینه‌ی هدر جدول را مشخص می‌کنند.
- برای تغییر رنگ پس زمینه و متن یک ردیف می‌توان از کلاس‌های bg-color و text-color استفاده کرد:
<tr class="bg-danger text-light">
<td class="table-success">$100.00 </td>
کامپوننت جدید card در بوت استرپ 4
پنل‌های بوت استرپ 3 حذف و بجای آن کامپوننت جدیدی به نام card در نگارش 4 آن ارائه شده‌است که با افزودن کلاس آن به یک div، بلافاصله قابی با گوشه‌های گرد به آن اضافه می‌شود.
<section class="card mb-5" id="drwinthrop">
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Winthrop Photo">
<h2 class="card-title">Dr. Stanley Winthrop</h2>
<h5 class="card-subtitle">Behaviorist</h5>
<p class="card-text">Dr. Winthrop is the guardian of Missy, a
three-year old Llaso mix, who he adopted at the shelter.
Dr. Winthrop is passionate about spay and neuter and pet
adoption, and works tireless hours outside the clinic,
performing free spay and neuter surgeries for the shelter.</p>
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section> - سپس یک card می‌تواند دارای تصویری واکنشگرا باشد که عرض card را پوشش می‌دهد. این تصویر با کلاس card-img مشخص می‌شود.
در اینجا امکان تعریف card-img-top و card-img-bottom نیز وجود دارند. این موارد تصویر card را در بالا و یا پایین آن، بدون padding، نمایش می‌دهند. اگر می‌خواهید متنی را بر روی این تصویر نمایش دهید، از کلاس card-img-overlay استفاده کنید. در این حالت‌ها باید تصویر را خارج از card-body قرار دهید.
- عنوان و زیرعنوان یک card، توسط کلاس‌های card-title و card-subtitle تعیین می‌شوند.
- متن داخل آن‌را با کلاس card-text مشخص می‌کنیم.
- لینک‌های ذیل آن نیز توسط کلاس card-link در طی یک ردیف نمایش داده می‌شوند.
امکان تعیین رنگ پس زمینه، حاشیه و متن یک card نیز وجود دارند:
<section class="card mb-5 bg-primary text-light border-warning" id="drchase">
و فرمول کلی رنگ‌های آن نیز به صورت زیر می‌باشد:
می‌توان برای یک card، هدر و فوتر نیز تعریف کرد:
<section class="card mb-5" id="drsanders">
<div class="card-header">
<h2 class="card-title">Dr. Kenneth Sanders</h2>
<h5 class="card-subtitle">Nutritionist</h5>
</div>
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Sanders Photo">
<p class="card-text">Leroy walked into Dr. Sanders front door
when she was moving into a new house. After searching for
weeks for Leroy's guardians, she decided to make Leroy a
part of her pet family, and now has three cats.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section> 
برای تعریف یک list-group در داخل یک card، به صورت زیر عمل می‌کنیم:
<section class="card mb-5" id="drwong">
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Wong Photo">
<h2 class="card-title">Dr. Olivia Wong</h2>
<h5 class="card-subtitle">Preventive Care</h5>
<p class="card-text">Dr. Wong is a cancer survivor who was
fortunate enough to get to spend time with a therapy dog
during her recovery. She became passionate about therapy
animals, and has started her own foundation to train and
provide education to patients in recovery. Now she gets her
own dose of daily therapy from her husky, Lilla.</p>
</div>
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">
Client Slideshow
</a>
</div>
</section> 
تعیین نحوه‌ی چیدمان cards در بوت استرپ 4
اگر چندین card در یک صفحه تعریف شده‌اند، برای تعیین نحوه‌ی قرارگیری آنها در کنار یکدیگر می‌توان یا از سیستم طرحبندی متداول بوت استرپ استفاده کرده و یا امکان تعریف گروهی از آنها نیز وجود دارد. برای اینکار کافی است یک div با کلاس card-group را تعریف و سپس تمام cards را داخل آن قرار دهیم:
<div class="container">
<div class="card-group"> 
اگر از کلاس card-columns استفاده کنیم، تمام cards را به صورت خودکار در ستون‌ها و ردیف‌ها، قرار می‌دهد که بعضی از آنها بلندتر و بعضی دیگر کوتاه‌تر هستند (نوعی نمایش کاشی‌کاری شده‌است):
ولی در کل اگر نیاز به کنترل بیشتری دارید، از همان روش متداول تعریف ردیف‌ها و ستون‌های سیستم طرحبندی بوت استرپ استفاده کنید.
المان media در بوت استرپ 4
برای نمایش متداول متن و تصویر که قرار است تصویر، در یک ستون و متن، در ستونی دیگر باشد، بوت استرپ 4 به همراه کلاس media است که بر اساس Flexbox بازنویسی شده‌است.
<body>
<div class="container">
<section class="media mb-5" id="drwinthrop">
<img class="d-flex align-self-center img-fluid rounded mr-3" style="width:30%"
src="images/testimonial-mcphersons.jpg" alt="Doctor Winthrop Photo">
<div class="media-body">
<h2>Dr. Stanley Winthrop</h2>
<h5>Behaviorist</h5>
<p>Dr. Winthrop is the guardian of Missy,
a three-year old Llaso mix, who he adopted at the
shelter. Dr. Winthrop is passionate about spay and neuter
and pet adoption, and works tireless hours outside the
clinic, performing free spay and neuter surgeries for the
shelter.</p>
</section>
</div>
</body> 
ابتدا توسط کلاس media یک container را تعریف می‌کنیم. سپس تصویر، یک ستون و media-body ستون دیگر را تشکیل می‌دهد.
با استفاده از d-flex، المان تصویر را به یک Flexbox container تبدیل کرده و با استفاده از کلاس align-self-center، آن‌را در میانه‌ی ستون قرار می‌دهیم. همچنین در اینجا توسط mr-3، فاصله‌ی آن‌را با متن ستون کناری تنظیم کرده‌ایم.
کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: Bootstrap4_09.zip