نظرات اشتراکها
اشتراکها
11 سبک مختلف تگ hr
اشتراکها
سیستم عامل Firefox
سلام.
آیا اینجا میتوان تمیزسازی HTML و مقابله با XSS را انجام داد؟
آیا اینجا میتوان تمیزسازی HTML و مقابله با XSS را انجام داد؟
پاسخ به بازخوردهای پروژهها
استفاده از اشیاء پیچیده در حالت StronglyTypedList
به مثال HTML cell template مراجعه کنید.
پس از نگاهی به مفاهیم مقدماتی OLTP درون حافظهای در SQL Server 2014، در ادامه به نحوهی انجام تنظیمات خاص جداول بهینه سازی شده برای حافظه خواهیم پرداخت.
ایجاد یک بانک اطلاعاتی با پشتیبانی از جداول بهینه سازی شده برای حافظه
برای ایجاد جداول بهینه سازی شده برای حافظه، ابتدا نیاز است تا تنظیمات خاصی را به بانک اطلاعاتی آن اعمال کنیم. برای اینکار میتوان یک بانک اطلاعاتی جدید را به همراه یک filestream filegroup ایجاد کرد که جهت جداول بهینه سازی شده برای حافظه، ضروری است؛ یا اینکه با تغییر یک بانک اطلاعاتی موجود و افزودن filegroup یاد شده نیز میتوان به این مقصود رسید.
در اینگونه جداول خاص، اطلاعات در حافظهی سیستم ذخیره میشوند و برخلاف جداول مبتنی بر دیسک سخت، صفحات اطلاعات وجود نداشته و نیازی نیست تا به کش بافر وارد شوند. برای مقاصد ذخیره سازی نهایی اطلاعات جداول بهینه سازی شده برای حافظه، موتور OLTP درون حافظهای آن، فایلهای خاصی را به نام checkpoint در یک filestream filegroup ایجاد میکند که از آنها جهت ردیابی اطلاعات استفاده خواهد کرد و نحوی ذخیره سازی اطلاعات در آنها از شیوهی با کارآیی بالایی به نام append only mode پیروی میکند.
با توجه به متفاوت بودن نحوهی ذخیره سازی نهایی اطلاعات اینگونه جداول و دسترسی به آنها از طریق استریمها، توصیه شدهاست که filestream filegroupهای تهیه شده را در یک SSD یا Solid State Drive قرار دهید.
پس از اینکه بانک اطلاعاتی خود را به روشهای معمول ایجاد کردید، به برگهی خواص آن در management studio مراجعه کنید. سپس صفحهی file groups را در آن انتخاب کرده و در پایین برگهی آن، در قسمت جدید memory optimized data، بر روی دکمهی Add کلیک کنید. سپس نام دلخواهی را وارد نمائید.
پس از ایجاد یک گروه فایل جدید، به صفحهی files خواص بانک اطلاعاتی مراجعه کرده و بر روی دکمهی Add کلیک کنید. سپس File type این ردیف اضافه شده را از نوع file stream data و file group آنرا همان گروه فایلی که پیشتر ایجاد کردیم، تنظیم کنید. در ادامه logical name دلخواهی را وارد کرده و در آخر بر روی دکمهی Ok کلیک کنید تا تنظیمات مورد نیاز جهت تعاریف جدول بهینه سازی شده برای حافظه به پایان برسد.
این مراحل را توسط دو دستور T-SQL ذیل نیز میتوان سریعتر انجام داد:
ساختار گروه فایل بهینه سازی شده برای حافظه
گروه فایل بهینه سازی شده برای حافظه، دارای چندین دربرگیرنده است که هر کدام چندین فایل را در خود جای خواهند داد:
- Root File که در برگیرندهی متادیتای اطلاعات است.
- Data File که شامل ردیفهای اطلاعات ثبت شده در جداول بهینه سازی شدهی برای حافظه هستند. این ردیفها همواره به انتهای data file اضافه میشوند و دسترسی به آنها ترتیبی است. کارآیی IO این روش نسبت به روش دسترسی اتفاقی به مراتب بالاتر است. حداکثر اندازه این فایل 128 مگابایت است و پس از آن یک فایل جدید ساخته میشود.
- Delta File شامل ردیفهایی است که حذف شدهاند. به ازای هر ردیف، حداقل اطلاعاتی از آن را در خود ذخیره خواهد کرد؛ شامل ID ردیف حذف شده و شماره تراکنش آن. همانطور که پیشتر نیز ذکر شد، این موتور جدید درون حافظهای، برای یافتن راه چارهای جهت به حداقل رسانی قفل گذاری بر روی اطلاعات، چندین نگارش از ردیفها را به همراه timestamp آنها در خود ذخیره میکند. به این ترتیب، هر به روز رسانی به همراه یک حذف و سپس ثبت جدید است. به این ترتیب دیگر بانک اطلاعاتی نیازی نخواهد داشت تا به دنبال رکورد موجود برگردد و سپس اطلاعات آنرا به روز نماید. این موتور جدید فقط اطلاعات به روز شده را در انتهای رکوردهای موجود با فرمت خود ثبت میکند.
ایجاد جداول بهینه سازی شده برای حافظه
پس از آماده سازی بانک اطلاعاتی خود و افزودن گروه فایل استریم جدیدی به آن برای ذخیره سازی اطلاعات جداول بهینه سازی شده برای حافظه، اکنون میتوانیم اینگونه جداول خاص را در کنار سایر جداول متداول موجود، تعریف و استفاده نمائیم:
در اینجا سه جدول را مشاهده میکنید که در بانک اطلاعاتی آماده شده در مرحلهی قبل، ایجاد خواهند شد. مورد اول یک جدول معمولی است که از آن برای مقایسه سرعت ثبت اطلاعات با سایر جداول ایجاد شده، استفاده خواهد شد.
همانطور که مشخص است، دو جدول بهینه سازی شده برای حافظه، همان سه ستون جدول معمولی مبتنی بر دیسک سخت را دارا هستند؛ اما با این تفاوتها:
- دارای ویژگی MEMORY_OPTIMIZED = ON میباشند. به این ترتیب اینگونه جداول نسبت به جداول متداول مبتنی به دیسک سخت متمایز خواهند شد.
- دارای ویژگی DURABILITY بوده و توسط مقدار SCHEMA_AND_DATA آن مشخص میکنیم که آیا قرار است اطلاعات و ساختار جدول، ذخیره شوند یا تنها قرار است ساختار جدول ذخیره گردد (حالت SCHEMA_ONLY).
- بر روی ستون Id آنها یک hash index ایجاد شدهاست که وجود آن ضروری است و در کل بیش از 8 ایندکس را نمیتوان تعریف کرد.
برخلاف ایندکسهای B-tree جداول مبتنی بر سخت دیسک، ایندکسهای جداول بهینه سازی شده برای حافظه، اطلاعات را تکرار نمیکنند. اینها صرفا اشارهگرهایی هستند به ردیفهای اصلی اطلاعات. به این معنا که این ایندکسها لاگ نشده و همچنین بر روی سخت دیسک ذخیره نمیشوند. کار بازسازی مجدد آنها در اولین بار بازیابی بانک اطلاعاتی و آغاز آن به صورت خودکار انجام میشود. به همین جهت مباحثی مانند index fragmentation و نگهداری ایندکسها دیگر در اینجا معنا پیدا نمیکنند.
دو نوع ایندکس را در اینجا میتوان تعریف کرد. اولین آنها hash index است و دومین آنها range index. هش ایندکسها برای حالاتی که در کوئریها از عملگر تساوی استفاده میشود بسیار مناسب هستند. برای عملگرهای مقایسهای از ایندکسهای بازهای استفاده میشود.
همچنین باید دقت داشت که پس از ایجاد ایندکسها، دیگر امکان تغییر آنها و یا تغییر ساختار جدول ایجاد شده نیست.
همچنین ایندکسهای تعریف شده در جداول بهینه سازی شده برای حافظه، تنها بر روی ستونهایی غیرنال پذیر از نوع BIN2 collation مانند int و datetime قابل تعریف هستند. برای مثال اگر سعی کنیم بر روی ستون Name ایندکسی را تعریف کنیم، به این خطا خواهیم رسید:
- در حین تعریف هش ایندکسها، مقدار BUCKET_COUNT نیز باید تنظیم شود. هر bucket توسط مقداری که حاصل هش کردن یک ستون است مشخص میشود. کلیدهای منحصربفرد دارای هشهای یکسان در bucketهای یکسانی ذخیره میشوند. به همین جهت توصیه شدهاست که حداقل مقدار bucket تعیین شده در اینجا مساوی یا بیشتر از مقدار تعداد کلیدهای منحصربفرد یک جدول باشد؛ مقدار پیش فرض 2 برابر توسط مایکروسافت توصیه شدهاست.
- نوعهای قابل تعریف ستونها نیز در اینجا به موارد ذیل محدود هستند و جمع طول آنها از 8060 نباید بیشتر شود:
همچنین در management studio، گزینهی جدید new -> memory optimized table نیز اضافه شدهاست و انتخاب آن سبب میشود تا قالب T-SQL ایی برای تهیه این نوع جداول، به صورت خودکار تولید گردد.
البته این گزینه تنها برای بانکهای اطلاعاتی که دارای گروه فایل استریم مخصوص جداول بهینه سازی شده برای حافظه هستند، فعال میباشد.
ثبت اطلاعات در جداول معمولی و بهینه سازی شده برای حافظه و مقایسه کارآیی آنها
در مثال زیر، 100 هزار رکورد را در سه جدولی که پیشتر ایجاد کردیم، ثبت کرده و سپس مدت زمان اجرای هر کدام از مجموعه عملیات را بر حسب میلی ثانیه بررسی میکنیم:
با این خروجی تقریبی که بر اساس توانمندیهای سخت افزاری سیستم میتواند متفاوت باشد:
و برای حالت select خواهیم داشت:
با این خروجی
تاثیر جداول بهینه سازی شده برای حافظه را در 350K inserts بهتر میتوان با نمونههای متداول مبتنی بر دیسک مقایسه کرد.
برای مطالعه بیشتر
Getting started with SQL Server 2014 In-Memory OLTP
Introduction to SQL Server 2014 CTP1 Memory-Optimized Tables
Overcoming storage speed limitations with Memory-Optimized Tables for SQL Server
Memory-optimized Table – Day 1 Test
Memory-Optimized Tables – Insert Test
Memory Optimized Table – Insert Test …Again
ایجاد یک بانک اطلاعاتی با پشتیبانی از جداول بهینه سازی شده برای حافظه
برای ایجاد جداول بهینه سازی شده برای حافظه، ابتدا نیاز است تا تنظیمات خاصی را به بانک اطلاعاتی آن اعمال کنیم. برای اینکار میتوان یک بانک اطلاعاتی جدید را به همراه یک filestream filegroup ایجاد کرد که جهت جداول بهینه سازی شده برای حافظه، ضروری است؛ یا اینکه با تغییر یک بانک اطلاعاتی موجود و افزودن filegroup یاد شده نیز میتوان به این مقصود رسید.
در اینگونه جداول خاص، اطلاعات در حافظهی سیستم ذخیره میشوند و برخلاف جداول مبتنی بر دیسک سخت، صفحات اطلاعات وجود نداشته و نیازی نیست تا به کش بافر وارد شوند. برای مقاصد ذخیره سازی نهایی اطلاعات جداول بهینه سازی شده برای حافظه، موتور OLTP درون حافظهای آن، فایلهای خاصی را به نام checkpoint در یک filestream filegroup ایجاد میکند که از آنها جهت ردیابی اطلاعات استفاده خواهد کرد و نحوی ذخیره سازی اطلاعات در آنها از شیوهی با کارآیی بالایی به نام append only mode پیروی میکند.
با توجه به متفاوت بودن نحوهی ذخیره سازی نهایی اطلاعات اینگونه جداول و دسترسی به آنها از طریق استریمها، توصیه شدهاست که filestream filegroupهای تهیه شده را در یک SSD یا Solid State Drive قرار دهید.
پس از اینکه بانک اطلاعاتی خود را به روشهای معمول ایجاد کردید، به برگهی خواص آن در management studio مراجعه کنید. سپس صفحهی file groups را در آن انتخاب کرده و در پایین برگهی آن، در قسمت جدید memory optimized data، بر روی دکمهی Add کلیک کنید. سپس نام دلخواهی را وارد نمائید.
پس از ایجاد یک گروه فایل جدید، به صفحهی files خواص بانک اطلاعاتی مراجعه کرده و بر روی دکمهی Add کلیک کنید. سپس File type این ردیف اضافه شده را از نوع file stream data و file group آنرا همان گروه فایلی که پیشتر ایجاد کردیم، تنظیم کنید. در ادامه logical name دلخواهی را وارد کرده و در آخر بر روی دکمهی Ok کلیک کنید تا تنظیمات مورد نیاز جهت تعاریف جدول بهینه سازی شده برای حافظه به پایان برسد.
این مراحل را توسط دو دستور T-SQL ذیل نیز میتوان سریعتر انجام داد:
USE [master] GO ALTER DATABASE [testdb2] ADD FILEGROUP [InMemory_InMemory] CONTAINS MEMORY_OPTIMIZED_DATA GO ALTER DATABASE [testdb2] ADD FILE ( NAME = N'InMemory_InMemory', FILENAME = N'D:\SQL_Data\MSSQL11.MSSQLSERVER\MSSQL\DATA\InMemory_InMemory' ) TO FILEGROUP [InMemory_InMemory] GO
ساختار گروه فایل بهینه سازی شده برای حافظه
گروه فایل بهینه سازی شده برای حافظه، دارای چندین دربرگیرنده است که هر کدام چندین فایل را در خود جای خواهند داد:
- Root File که در برگیرندهی متادیتای اطلاعات است.
- Data File که شامل ردیفهای اطلاعات ثبت شده در جداول بهینه سازی شدهی برای حافظه هستند. این ردیفها همواره به انتهای data file اضافه میشوند و دسترسی به آنها ترتیبی است. کارآیی IO این روش نسبت به روش دسترسی اتفاقی به مراتب بالاتر است. حداکثر اندازه این فایل 128 مگابایت است و پس از آن یک فایل جدید ساخته میشود.
- Delta File شامل ردیفهایی است که حذف شدهاند. به ازای هر ردیف، حداقل اطلاعاتی از آن را در خود ذخیره خواهد کرد؛ شامل ID ردیف حذف شده و شماره تراکنش آن. همانطور که پیشتر نیز ذکر شد، این موتور جدید درون حافظهای، برای یافتن راه چارهای جهت به حداقل رسانی قفل گذاری بر روی اطلاعات، چندین نگارش از ردیفها را به همراه timestamp آنها در خود ذخیره میکند. به این ترتیب، هر به روز رسانی به همراه یک حذف و سپس ثبت جدید است. به این ترتیب دیگر بانک اطلاعاتی نیازی نخواهد داشت تا به دنبال رکورد موجود برگردد و سپس اطلاعات آنرا به روز نماید. این موتور جدید فقط اطلاعات به روز شده را در انتهای رکوردهای موجود با فرمت خود ثبت میکند.
ایجاد جداول بهینه سازی شده برای حافظه
پس از آماده سازی بانک اطلاعاتی خود و افزودن گروه فایل استریم جدیدی به آن برای ذخیره سازی اطلاعات جداول بهینه سازی شده برای حافظه، اکنون میتوانیم اینگونه جداول خاص را در کنار سایر جداول متداول موجود، تعریف و استفاده نمائیم:
-- It is not a Memory Optimized CREATE TABLE tblNormal ( [CustomerID] int NOT NULL PRIMARY KEY NONCLUSTERED, [Name] nvarchar(250) NOT NULL, CustomerSince DATETIME not NULL INDEX [ICustomerSince] NONCLUSTERED ) -- DURABILITY = SCHEMA_AND_DATA CREATE TABLE tblMemoryOptimized_Schema_And_Data ( [CustomerID] INT NOT NULL PRIMARY KEY NONCLUSTERED HASH WITH (BUCKET_COUNT = 1000000), [Name] NVARCHAR(250) NOT NULL, [CustomerSince] DATETIME NOT NULL INDEX [ICustomerSince] NONCLUSTERED ) WITH (MEMORY_OPTIMIZED = ON, DURABILITY = SCHEMA_AND_DATA) -- DURABILITY = SCHEMA_ONLY CREATE TABLE tblMemoryOptimized_Schema_Only ( [CustomerID] INT NOT NULL PRIMARY KEY NONCLUSTERED HASH WITH (BUCKET_COUNT = 1000000), [Name] NVARCHAR(250) NOT NULL, [CustomerSince] DATETIME NOT NULL INDEX [ICustomerSince] NONCLUSTERED ) WITH (MEMORY_OPTIMIZED = ON, DURABILITY = SCHEMA_ONLY)
همانطور که مشخص است، دو جدول بهینه سازی شده برای حافظه، همان سه ستون جدول معمولی مبتنی بر دیسک سخت را دارا هستند؛ اما با این تفاوتها:
- دارای ویژگی MEMORY_OPTIMIZED = ON میباشند. به این ترتیب اینگونه جداول نسبت به جداول متداول مبتنی به دیسک سخت متمایز خواهند شد.
- دارای ویژگی DURABILITY بوده و توسط مقدار SCHEMA_AND_DATA آن مشخص میکنیم که آیا قرار است اطلاعات و ساختار جدول، ذخیره شوند یا تنها قرار است ساختار جدول ذخیره گردد (حالت SCHEMA_ONLY).
- بر روی ستون Id آنها یک hash index ایجاد شدهاست که وجود آن ضروری است و در کل بیش از 8 ایندکس را نمیتوان تعریف کرد.
برخلاف ایندکسهای B-tree جداول مبتنی بر سخت دیسک، ایندکسهای جداول بهینه سازی شده برای حافظه، اطلاعات را تکرار نمیکنند. اینها صرفا اشارهگرهایی هستند به ردیفهای اصلی اطلاعات. به این معنا که این ایندکسها لاگ نشده و همچنین بر روی سخت دیسک ذخیره نمیشوند. کار بازسازی مجدد آنها در اولین بار بازیابی بانک اطلاعاتی و آغاز آن به صورت خودکار انجام میشود. به همین جهت مباحثی مانند index fragmentation و نگهداری ایندکسها دیگر در اینجا معنا پیدا نمیکنند.
دو نوع ایندکس را در اینجا میتوان تعریف کرد. اولین آنها hash index است و دومین آنها range index. هش ایندکسها برای حالاتی که در کوئریها از عملگر تساوی استفاده میشود بسیار مناسب هستند. برای عملگرهای مقایسهای از ایندکسهای بازهای استفاده میشود.
همچنین باید دقت داشت که پس از ایجاد ایندکسها، دیگر امکان تغییر آنها و یا تغییر ساختار جدول ایجاد شده نیست.
همچنین ایندکسهای تعریف شده در جداول بهینه سازی شده برای حافظه، تنها بر روی ستونهایی غیرنال پذیر از نوع BIN2 collation مانند int و datetime قابل تعریف هستند. برای مثال اگر سعی کنیم بر روی ستون Name ایندکسی را تعریف کنیم، به این خطا خواهیم رسید:
Indexes on character columns that do not use a *_BIN2 collation are not supported with indexes on memory optimized tables.
- نوعهای قابل تعریف ستونها نیز در اینجا به موارد ذیل محدود هستند و جمع طول آنها از 8060 نباید بیشتر شود:
bit, tinyint, smallint, int, bigint, money, smallmoney, float, real, datetime, smalldatetime, datetime2, date, time, numberic, decimal, char(n), varchar(n) ,nchar(n), nvarchar(n), sysname, binary(n), varbinary(n), and Uniqueidentifier
همچنین در management studio، گزینهی جدید new -> memory optimized table نیز اضافه شدهاست و انتخاب آن سبب میشود تا قالب T-SQL ایی برای تهیه این نوع جداول، به صورت خودکار تولید گردد.
البته این گزینه تنها برای بانکهای اطلاعاتی که دارای گروه فایل استریم مخصوص جداول بهینه سازی شده برای حافظه هستند، فعال میباشد.
ثبت اطلاعات در جداول معمولی و بهینه سازی شده برای حافظه و مقایسه کارآیی آنها
در مثال زیر، 100 هزار رکورد را در سه جدولی که پیشتر ایجاد کردیم، ثبت کرده و سپس مدت زمان اجرای هر کدام از مجموعه عملیات را بر حسب میلی ثانیه بررسی میکنیم:
set statistics time off SET STATISTICS IO Off set nocount on go ----------------------------- Print 'insert into tblNormal' DECLARE @start datetime = getdate() declare @insertCount int = 100000 declare @startId int = 1 declare @customerID int = @startId while @customerID < @startId + @insertCount begin insert into tblNormal values (@customerID, 'Test', '2013-01-01T00:00:00') set @customerID +=1 end Print DATEDIFF(ms,@start,getdate()); go ----------------------------- Print 'insert into tblMemoryOptimized_Schema_And_Data' DECLARE @start datetime = getdate() declare @insertCount int = 100000 declare @startId int = 1 declare @customerID int = @startId while @customerID < @startId + @insertCount begin insert into tblMemoryOptimized_Schema_And_Data values (@customerID, 'Test', '2013-01-01T00:00:00') set @customerID +=1 end Print DATEDIFF(ms,@start,getdate()); Go ----------------------------- Print 'insert into tblMemoryOptimized_Schema_Only' DECLARE @start datetime = getdate() declare @insertCount int = 100000 declare @startId int = 1 declare @customerID int = @startId while @customerID < @startId + @insertCount begin insert into tblMemoryOptimized_Schema_Only values (@customerID, 'Test', '2013-01-01T00:00:00') set @customerID +=1 end Print DATEDIFF(ms,@start,getdate()); Go
insert into tblNormal 36423 insert into tblMemoryOptimized_Schema_And_Data 30516 insert into tblMemoryOptimized_Schema_Only 3176
set nocount on print 'tblNormal' set statistics time on select count(CustomerID) from tblNormal set statistics time off go print 'tblMemoryOptimized_Schema_And_Data' set statistics time on select count(CustomerID) from tblMemoryOptimized_Schema_And_Data set statistics time off go print 'tblMemoryOptimized_Schema_Only' set statistics time on select count(CustomerID) from tblMemoryOptimized_Schema_Only set statistics time off go
tblNormal SQL Server Execution Times: CPU time = 46 ms, elapsed time = 52 ms. tblMemoryOptimized_Schema_And_Data SQL Server Execution Times: CPU time = 32 ms, elapsed time = 33 ms. tblMemoryOptimized_Schema_Only SQL Server Execution Times: CPU time = 31 ms, elapsed time = 30 ms.
برای مطالعه بیشتر
Getting started with SQL Server 2014 In-Memory OLTP
Introduction to SQL Server 2014 CTP1 Memory-Optimized Tables
Overcoming storage speed limitations with Memory-Optimized Tables for SQL Server
Memory-optimized Table – Day 1 Test
Memory-Optimized Tables – Insert Test
Memory Optimized Table – Insert Test …Again
در این قسمت، شیوهنامههایی را بررسی میکنیم که به المانهای پر کاربردی مانند دکمهها، لیستها و نشانها اعمال میشوند.
شیوهنامههای کار با دکمهها در بوت استرپ 4
کلاس پایه ایجاد دکمههای بوت استرپی، کلاس btn است. البته آنرا میتوان با کلاسهای دیگری نیز ترکیب کرد:
- کلاس btn را میتوان بر روی المانهایی مانند anchor، button و input نیز اعمال کرد:
در این حالت تمام این المانها یکسان به نظر میرسند:
- برای تعیین رنگ اجباری دکمههای بوت استرپ، از فرمول زیر استفاده میشود؛ مانند btn-primary:
با این خروجی:
همانطور که ملاحظه میکنید، رنگ این دکمهها نیز نسبت به نگارش سوم آن، به روز رسانی شدهاست.
همچنین نگارش outline آنها نیز قابل تعریف است؛ مانند btn-outline-primary:
با این خروجی:
- کلاس btn-size که در اینجا size میتواند sm یا lg باشد و سبب ایجاد دکمههایی کوچک یا بزرگ میشوند.
- کلاس btn-block سبب میشود تا دکمهای کل عرض container را پر کند.
با این خروجی:
- امکان اعمال کلاسهای active و disabled نیز در اینجا میسر است:
با این خروجی:
تشکیل گروهی از دکمهها در بوت استرپ 4
برای تبدیل تعدادی از دکمهها به یک گروه، از کلاس btn-group استفاده میشود. همچنین امکان تشکیل گزینهی عمودی آن، با کلاس btn-group-vertical نیز وجود دارد. در این حالت دکمهها بجای نمایش افقی، به صورت یک ستون نمایش داده میشوند. کلاس btn-toolbar نیز برای تشکیل نوار ابزاری از دکمهها در نظر گرفته شدهاست. توسط کلاسهای btn-group-sm و یا btn-group-lg میتوان اندازهی این گروهها را تغییر داد.
با این خروجی:
در اینجا دو گروه از دکمهها تشکیل شدهاند که اینها را داخل یک btn-toolbar قرار دادهایم. همچنین تعریف aria-labelها به screen readers و معلولین کمک میکند.
به علاوه با استفاده از کلاسهای mb-2 و mr-2، سبب ایجاد margin بین این نوار ابزار با متن زیر آن و همچنین بین خود آنها شدهایم.
و حالت عمودی آن:
چنین شکلی را پیدا میکند:
کلاسهای جدید تشکیل Badges در بوت استرپ 4
برای تشکیل نشان/آرم از کلاس badge استفاده میشود و برای تغییر شکل آن میتوان از کلاس badge-pill کمک گرفت. برای تغییر رنگ آن نیز فرمول زیر وجود دارد:
یک مثال:
با این خروجی:
همانطور که مشاهده میکنید، یک badge همواره به اندازهی container آن در آمده و نمایش داده میشود.
ایجاد لیستی از آیتمها در بوت استرپ 4
بوت استرپ، کلاسهایی را برای ایجاد لیستهایی با ظاهر لیستهای اندرویدی به همراه دارد که در ادامه با مثالهایی آنها را بررسی خواهیم کرد.
با این خروجی:
این list-group را بر روی لینکها و دکمهها نیز میتوان همانند قبل اعمال کرد:
با این خروجی:
در اینجا از کلاسهایی مانند list-group-item-warning برای تغییر رنگ پس زمینهی هر آیتم میتوان کمک گرفت.
برای تعریف badge برای هر آیتم، میتوان به صورت زیر عمل کرد:
با این خروجی:
با اعمال کلاسهای badge، این نشان نمایش داده میشود؛ اما دقیقا در کنار متن Nutrition در اینجا. برای اینکه آنرا به سمت دیگر این ردیف منتقل و همچنین تراز عمودی آنرا نیز به میانهی صفحه تنظیم کنیم، میتوان از Flexbox کمک گرفت. با اعمال d-flex، این ردیف تبدیل به یک Flexbox container میشود و سپس میتوان کلاسهای مخصوص Flexbox مانند justify-content-between و align-items-center را به این ردیف اعمال کرد تا ترازهای عمودی و افقی آیتمهای قرار گرفتهی درون آن تغییر کنند.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_08.zip
شیوهنامههای کار با دکمهها در بوت استرپ 4
کلاس پایه ایجاد دکمههای بوت استرپی، کلاس btn است. البته آنرا میتوان با کلاسهای دیگری نیز ترکیب کرد:
- کلاس btn را میتوان بر روی المانهایی مانند anchor، button و input نیز اعمال کرد:
<a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="submit" value="Input">
- برای تعیین رنگ اجباری دکمههای بوت استرپ، از فرمول زیر استفاده میشود؛ مانند btn-primary:
<button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-info">Info</button> <button class="btn btn-light">Light</button> <button class="btn btn-dark">Dark</button>
همانطور که ملاحظه میکنید، رنگ این دکمهها نیز نسبت به نگارش سوم آن، به روز رسانی شدهاست.
همچنین نگارش outline آنها نیز قابل تعریف است؛ مانند btn-outline-primary:
<button class="btn btn-outline-primary">Primary</button> <button class="btn btn-outline-secondary">Secondary</button> <button class="btn btn-outline-success">Success</button> <button class="btn btn-outline-danger">Danger</button> <button class="btn btn-outline-warning">Warning</button> <button class="btn btn-outline-info">Info</button> <button class="btn btn-outline-light">Light</button> <button class="btn btn-outline-dark">Dark</button>
- کلاس btn-size که در اینجا size میتواند sm یا lg باشد و سبب ایجاد دکمههایی کوچک یا بزرگ میشوند.
- کلاس btn-block سبب میشود تا دکمهای کل عرض container را پر کند.
<button class="btn btn-primary">Default</button> <button class="btn btn-primary btn-lg">Large</button> <button class="btn btn-primary btn-sm">Small</button> <button class="btn btn-primary btn-block">Block</button>
- امکان اعمال کلاسهای active و disabled نیز در اینجا میسر است:
<h2>States</h2> <h3>Active</h3> <button class="btn btn-primary active">Active Button</button> <h3>Disabled</h3> <button class="btn btn-primary disabled">Disabled Button</button> <a class="btn btn-primary disabled" href="#">Disabled Link Button</a>
تشکیل گروهی از دکمهها در بوت استرپ 4
برای تبدیل تعدادی از دکمهها به یک گروه، از کلاس btn-group استفاده میشود. همچنین امکان تشکیل گزینهی عمودی آن، با کلاس btn-group-vertical نیز وجود دارد. در این حالت دکمهها بجای نمایش افقی، به صورت یک ستون نمایش داده میشوند. کلاس btn-toolbar نیز برای تشکیل نوار ابزاری از دکمهها در نظر گرفته شدهاست. توسط کلاسهای btn-group-sm و یا btn-group-lg میتوان اندازهی این گروهها را تغییر داد.
<div class="btn-toolbar" aria-label="All pets"> <div class="btn-group mb-2 mr-2" aria-label="Common pets"> <button type="button" class="btn btn-primary active">Cat</button> <button type="button" class="btn btn-primary">Dog</button> <button type="button" class="btn btn-primary">Fish</button> <button type="button" class="btn btn-primary">Bird</button> </div> <div class="btn-group mb-2" aria-label="Exotic pets"> <button type="button" class="btn btn-primary">Amphibian</button> <button type="button" class="btn btn-primary active">Reptile</button> <button type="button" class="btn btn-primary">Other</button> </div> </div>
در اینجا دو گروه از دکمهها تشکیل شدهاند که اینها را داخل یک btn-toolbar قرار دادهایم. همچنین تعریف aria-labelها به screen readers و معلولین کمک میکند.
به علاوه با استفاده از کلاسهای mb-2 و mr-2، سبب ایجاد margin بین این نوار ابزار با متن زیر آن و همچنین بین خود آنها شدهایم.
و حالت عمودی آن:
<div class="btn-group-vertical mb-2" aria-label="Exotic pets"> <button type="button" class="btn btn-primary">Amphibian</button> <button type="button" class="btn btn-primary active">Reptile</button> <button type="button" class="btn btn-primary">Other</button> </div>
کلاسهای جدید تشکیل Badges در بوت استرپ 4
برای تشکیل نشان/آرم از کلاس badge استفاده میشود و برای تغییر شکل آن میتوان از کلاس badge-pill کمک گرفت. برای تغییر رنگ آن نیز فرمول زیر وجود دارد:
یک مثال:
<div class="container"> <div class="row"> <section class="col-12"> <h1>Our Commitment <span class="badge badge-info">to you</span></h1> <h3>Grooming <span class="badge badge-danger badge-pill">new</span></h3> </section> </div><!-- row --> </div><!-- content container -->
همانطور که مشاهده میکنید، یک badge همواره به اندازهی container آن در آمده و نمایش داده میشود.
ایجاد لیستی از آیتمها در بوت استرپ 4
بوت استرپ، کلاسهایی را برای ایجاد لیستهایی با ظاهر لیستهای اندرویدی به همراه دارد که در ادامه با مثالهایی آنها را بررسی خواهیم کرد.
<ul class="list-group mb-3"> <li class="list-group-item active">Grooming</li> <li class="list-group-item list-group-item-action"> General Health </li> <li class="list-group-item list-group-item-action">Nutrition</li> <li class="list-group-item list-group-item-action"> Pest Control </li> <li class="list-group-item list-group-item-action">Vaccinations</li> </ul>
در اینجا برای تشکیل لیستی با ظاهری شکیلتر، میتوان ابتدا کلاس list-group را به ul انتساب داد و سپس به هر کدام از liهای آن کلاس list-group-item انتساب داده میشود. با افزودن کلاس active به اولین مورد، ظاهر آن با رنگی متمایز نمایان میشود. همچنین اگر علاقمند بودیم تا هر کدام از آیتمها با عبور ماوس بر روی آنها، با رنگ ملایمی مشخص شوند، میتوان از کلاس list-group-item-action استفاده کرد.
این list-group را بر روی لینکها و دکمهها نیز میتوان همانند قبل اعمال کرد:
<div class="list-group mb-3"> <a class="list-group-item active" href="#">Grooming</a> <a class="list-group-item list-group-item-action list-group-item-success" href="#">Nutrition</a> <a class="list-group-item list-group-item-action list-group-item-info" href="#"> Pest Control </a> <a class="list-group-item list-group-item-action list-group-item-warning" href="#">Vaccinations</a> </div>
در اینجا از کلاسهایی مانند list-group-item-warning برای تغییر رنگ پس زمینهی هر آیتم میتوان کمک گرفت.
برای تعریف badge برای هر آیتم، میتوان به صورت زیر عمل کرد:
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> Nutrition <span class="badge badge-info badge-pill">12</span> </li>
با اعمال کلاسهای badge، این نشان نمایش داده میشود؛ اما دقیقا در کنار متن Nutrition در اینجا. برای اینکه آنرا به سمت دیگر این ردیف منتقل و همچنین تراز عمودی آنرا نیز به میانهی صفحه تنظیم کنیم، میتوان از Flexbox کمک گرفت. با اعمال d-flex، این ردیف تبدیل به یک Flexbox container میشود و سپس میتوان کلاسهای مخصوص Flexbox مانند justify-content-between و align-items-center را به این ردیف اعمال کرد تا ترازهای عمودی و افقی آیتمهای قرار گرفتهی درون آن تغییر کنند.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_08.zip