آموزش طراحی سایت|آموزش Canvas

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل با مفاهیم Canvas آشنا شدیم در قسمت سوم با ادامه canvas همراه من باشید

آموزش طراحی سایت

بوم نقاشی: تصویر

کشیدن خط یا اشکال ساده خسته کننده می باشد، اجازه بدهید چند تصویر طراحی کنیم.
در نمایش بالا فقط از کانتکست روش drawimage() استفاده کردم. به هرحال این روش می تواند 3، 5 و یا 9 استدلال داشته باشد. من سه عملکرد دارم که عبارتند از draw dragon (کشیدن اژدها)، draw smaller dragon (کشیدن اژدهای کوچکتر) و draw dragon head (کشیدن سر اژدها) و هرکدام از آنها 3،5 و 9 استدلال مربوطه را دنبال می کنند.

بوم نقاشی: تصویر

در اینجا کد نمایش اژدها را مشاهده می کنید.

‎<div>

<canvas id="c5" width="600" height="300" style="border:solid 1px #000000;"></canvas>

‎<div>

‎<button ="draw_dragon();return true;">Draw Dragon</button>

‎<button ="draw_smaller_dragon();return true;">Draw smaller dragon</button>

‎<button ="draw_dragon_head();return true;">Draw Dragon Head</button>

‎<button ="Clear_image();return true;">Erase Everything</button>

</div>

‎</div>

var c5 = document.getElementById("c5");

var c5_context = c5.getContext("2d");

‎ var dragon = new Image();

dragon.src = 'images/chinese_dragon.png';

‎ function draw_dragon() {

c5_context.drawImage(dragon, 100, 5);

‎}

‎ function draw_smaller_dragon() {

c5_context.drawImage(dragon, 10, 5, 58, 100);

‎}

‎ function draw_dragon_head() {

c5_context.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);

‎}

‎ function Clear_image() {

c5_context.clearRect(1, 1, 600, 300);

‎}

‎‎

آموزش کن وس Text در HTML:

بوم نقاشی: متن

چگونه متن را در بوم نقاشی اجرا کنیم؟
کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle، Strokestyle، Font، TextBaseline و در انتها filltext و stroketext.

<div>

<canvas id="c6" width="600" height="200" style="border:solid 1px #000000;"></canvas>

<div>

<button ="showFillText();return true;">Fill Text</button>

<button ="showStrokeText();return true;">Stroke Text</button>

<button ="Clear_text();return true;">Erase Everything</button>

</div>

</div>

‎

var c6 = document.getElementById("c6");

var c6_context = c6.getContext("2d");

function showFillText() {

c6_context.fillStyle = '#f00';

c6_context.font = 'italic bold 30px sans-serif';

c6_context.textBaseline = 'bottom';

c6_context.fillText('HTML5 is cool!', 50, 100);

‎}

‎ function showStrokeText() {

c6_context.strokeStyle = "#003300";

c6_context.font = '40px san-serif';

c6_context.textBaseline = 'bottom';

c6_context.strokeText('HTML5 is cool?', 300, 100);

‎}

‎ function Clear_text() {

c6_context.clearRect(1, 1, 600, 300);

‎}

‎

بوم نقاشی: متن

تصویری را که می بینید از WHATWG اقتباس کرده ام که توضیح کامل برای انواع خطوط پایه ی کتن می باشد. آنچه را که باید مشاهده کنید این است که چگونه یک متن در ارتباط با آن خطوط پایه قرار می گیرد.

در اینجا یک خط خاکستری در y=100 کشیده ام و قصد دارم هر لغت را در y=100 قرار دهم، اما با استفاده از textbaseline متفاوت.
در مورد نگارش، فایرفاکس هیچگونه پشتیبانی روی خط پایه ی hanging ندارد.

c7_context.textBaseline = "top";

c7_context.fillText('Top', 5, 100);

‎ c7_context.textBaseline = "bottom";

c7_context.fillText('Bottom', 80, 100);

‎ c7_context.textBaseline = "middle";

c7_context.fillText('Middle', 200, 100);

‎ c7_context.textBaseline = "alphabetic";

c7_context.fillText('Alphabetic', 300, 100);

‎ c7_context.textBaseline = "hanging";

c7_context.fillText('Hanging', 400, 100);

اگر قصد دارید چیزی را در بوم نقاشی گسترش دهید و تمایل به پشتیبانی یوزرهایی داشتید که از IE8 یا پایین تر استفاده می کنند، می توانید از یک جاوا اسکریپت با منبع آزاد به نام ExplorerCanvas استفاده کنید. اما در جریان باشید که وجود مسایل غیریکنواختی ممکن است باعث عصبانیت شما بشوند.
باز هم این معرفی مختصری از بوم نقاشی HTML5 بود. هنوز ویژگی های جالب دیگری در مورد این بوم نقاشی وجود دارد که باید در مورد آنها بیشتر بدانید.

آموزش رابط Canvas در HTML

کن واس Canvas یک تگ HTML (< canvas >) است که از طریق آن می‌توانیم با استفاده از Canvas API به طراحی و نقاشی بپردازیم.

ایجاد Canvas

انجام این کار بسیار ساده است و تنها کافی است که < canvas >< /canvas > را داخل یک فایل HTML خالی بی اندازید.

در حال حاضر در این صفحه چیزی نمی‌بینید، چرا که این canvas یک عنصر نامرئی است. مقداری حاشیه به آن اضافه کنید.

آموزش طراحی سایت

کروم به‌صورت خودکار به عنصر body یک حاشیه‌ی 8 پیکسلی اضافه می‌کند. به همین خاطر است که حاشیه‌ی ما شبیه به یک کادر شده است. با تنظیمات زیر می‌توانید حاشیه‌ی کروم را حذف کنید.

body {

margin: 0;

}

فعلاً کاری به تنظیمات پیش‌فرض نداریم.
حالا می‌توانیم از طریق جاوا اسکریپت و با استفاده از DOM Selectors API به canvas خود دسترسی پیدا کنیم. بنابراین می‌توانیم از ()document.querySelector استفاده کنیم.

const canvas = document.querySelector('canvas')

تغییر رنگ پس‌زمینه‌ی canvas

این کار در CSS انجام می‌شود:

canvas {

border: 1px solid black;

width: 100%;

height: 100%;

}

و از این طریق canvas تا حدی بزرگ می‌شود که کل اندازه‌ی عنصر خارجی را پر کند.

آموزش React native-قسمت ششم

سلام در بخش پنجم آموزش React Native مفاهیم مدیریت ورودی های متنی , بالا و پایین رفتن در لیست ها، swipe کردن، و pinch-to-zoom,استفاده از ScrollView,استفاده از List View در React Native را یاد گرفتیم . حال با بخش ششم با ما همراه باشید:

ارتباطات تحت شبکه در React Native Apps:

اغلب application های موبایل منابع خود را از شبکه load می کنند. ممکن است بخواهید یک POST request به یک REST API بزنید، یا محتوایی ثابت از یک سرور بگیرید.

آموزش React Native

استفاده از Fetch:

ری اکت React Native، Fetch API را برای کارهای تحت شبکه در اختیار می گذارد. اگر از XMLHttpRequest یا API های دیگر استفاده کرده باشید با fetch آشنایید. می توانید برای مطالعه ی بیشتر به راهنمای MDN درمورد نحوه استفاده از Fetch مراجعه کنید.

Request

برای دریافت محتوا از یک آدرس فرضی، کافی است آدرس را به fetch() بدهید:

fetch('https://mywebsite.com/mydata.json');

همچنین fetch یک آرگومان دیگر هم می تواند بگیرد و به شما امکان کنترل بیشتری روی HTTP request بدهد. ممکن است بخواهید header اضافه کنید، یا یک request POST بزنید:

fetch('https://mywebsite.com/endpoint/', {

method: 'POST',

headers: {

Accept: 'application/json',

'Content-Type': 'application/json',

},

body: JSON.stringify({

firstParam: 'yourValue',

secondParam: 'yourOtherValue',

}),

});

برای لیست کامل property ها سری به مستندات Fetch Request بزنید.

مدیریت Response ها

مثال بالا نحوه ارسال یک request را نشان می دهد. در بسیاری موارد ممکن است بخواهید روی response سرور کاری انجام دهید.

ارتباطات در شبکه ذاتا async هستند. متد Fetch یک Promise برمی گرداند که نوشتن کد برای سناریوهای async را آسان می کند:

function getMoviesFromApiAsync() {

return fetch('https://facebook.github.io/react-native/movies.json')

.then((response) => response.json())

.then((responseJson) => {

return responseJson.movies;

})

.catch((error) => {

console.error(error);

});

}

میتوان از دستور async/await در ES2017 نیز در یک application React Native استفاده کرد:

async function getMoviesFromApi() {

try {

let response = await fetch(

'https://facebook.github.io/react-native/movies.json',

);

let responseJson = await response.json();

return responseJson.movies;

} catch (error) {

console.error(error);

}

}

فراموش نکنید که خطاهای ممکن هنگام کار با fetch را catch کنید، در غیر این صورت هیچ هشداری نخواهد بود.

import React from 'react';

import { FlatList, ActivityIndicator, Text, View } from 'react-native';

export default class FetchExample extends React.Component {

constructor(props){

super(props);

this.state ={ isLoading: true}

}

componentDidMount(){

return fetch('https://facebook.github.io/react-native/movies.json')

.then((response) => response.json())

.then((responseJson) => {

this.setState({

isLoading: false,

dataSource: responseJson.movies,

}, function(){

});

})

.catch((error) =>{

console.error(error);

});

}

render(){

if(this.state.isLoading){

return(

<View style={{flex: 1, padding: 20}}>

<ActivityIndicator/>

</View>

)

}

return(

<View style={{flex: 1, paddingTop:20}}>

<FlatList

data={this.state.dataSource}

renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}

keyExtractor={({id}, index) => id}

/>

</View>

);

}

}

به طور پیش فرض iOS تمام request هایی را که encryp نشده اند و از SSL استفاده نمی کنند block می کند. اگر می خواهید از آدرسی بدون SSL، دیتا بگیرید ابتدا باید یک App Transport Security exception اضافه کنید. اگر از قبل می دانید که کدام دامنه ها استفاده می شوند، بهتر است فقط برای آن دامنه ها exception اضافه کنید. اگر دامنه ها تا زمان اجرا مشخص نیستند می توانید ATS را کامل غیرفعال کنید. البته از ابتدای 2017، برای غیرفعال کردن ATS به دلیلی موجه احتیاج دارد. مستندات Apple را برای اطلاعات بیشتر ببینید.

استفاده از کتابخانه های دیگر

ایکس ام ال XMLHttpRequest API در React Native هست، به این معنا که شما می توانید از کتابخانه های فرعی مثل frisbee یا Axios که براساس آن نوشته شده اند استفاده کنید، یا خود XMLHttpRequest API را مستقیما استفاده کنید.

var request = new XMLHttpRequest();

request. = (e) => {

if (request.readyState !== 4) {

return;

}

if (request.status === 200) {

console.log('success', request.responseText);

} else {

console.warn('error');

}

};

request.open('GET', 'https://mywebsite.com/endpoint/');

request.send();

امنیت برای XMLHttpRequest در application ها متفاوت از web است، چرا که مفهوم CORS در application معنا ندارد.

آموزش React Native

پشتیبانی از Web Socket

React Native از Web Socket نیز پشتیبانی می کند، پروتکلی که کانال های دوطرفه ارتباطی را روی یک ارتباط TCP فراهم می کند:

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {

// connection opened

ws.send('something'); // send a message

};

ws. = (e) => {

// a message was received

console.log(e.data);

};

ws. = (e) => {

// an error occurred

console.log(e.message);

};

ws. = (e) => {

// connection closed

console.log(e.code, e.reason);

};

مشکلات رایج در رابطه با fetch و احراز هویت مبتنی بر کوکی ها (cookie based authentication)

استفاده از موارد زیر هنگام کار با fetch، فعلا ممکن نیست:

· استفاده از redirect:manual

· استفاده از credentials:omit

· داشتن header های با نام یکسان در android. یک راه حل موقت در این لینک قابل پیاده سازی است.

· احراز هویت مبتنی بر Cookie فعلا ناپایدار است. می توانید issue های مشابه را در اینجا ببینید.

· در iOS وقتی خطای 302 اتفاق می افتد، اگر در کوکی Set-Cookie وجود داشته باشد، Cookie به درستی set نمی شود. از آنجا که redirect نمی تواند دستی انجام شود، اگر redirect حاصل یک session expired باشد، ممکن است request ها درون یک infinite loop بیفتد.

13. منابع دیگر در حوزه React Native

تا اینجای کار را با ما همراه بودید، اکنون می توانید یک application React Native برای خودتان بنویسید. اما React Native فقط یک محصول نیست، بلکه جامعه ای از توسعه دهندگان است. اگر به React Native علاقه مند هستید، مواردی هست که ممکن است بخواهید سری به آن بزنید:

کتابخانه های معروف

اگر از React Native استفاده می کنید، احتمالا با React آشنا هستید. اگر درمورد React چیزی نمی دانید، React بهترین راه برای ساخت یک وب سایت مدرن است. حتما کار با آن را تجربه کنید.

یکی از سوالات رایج این است که چطور "state" application React Native خود را کنترل کنیم. معروف ترین کتابخانه برای این کار Redux است. Redux کتابخانه ای ساده است و فیلم های آموزشی آن نیز موجود است.

اگر دنبال کتابخانه ای برای کاری خاص می گردید، Awesome React Native را چک کنید. لیستی از component ها با پیش نمایش و مقالات مرتبط و... در دسترس خواهد بود.

مثال ها

اگر به دنبال قابلیت های application های React Native هستید، Showcase را ببینید. همچنین، مثال هایی در Github موجود هستند. می توانید این application ها را در شبیه ساز یا device خود ببینید، و میتوانید source code ها را استفاده کنید.

سازندگان applicationبرای Facebook&#x27;s F8 کد آن را متن باز در اختیار عموم گذاشته اند و سری آموزش های خوبی برای آن هست. اگر دنبال مثال های واقعی تر و عمیق تری هستید، سری به آن بزنید.

توسعه ی React Native

توسعه دهندگان ماژول های React Native خود را می سازند و در npm منتشر می کنند و کد آن را در Github به اشتراک می گذارند.

ساخت ماژول به اکوسیستم React Native کمک می کند. شما هم این کار را انجام دهید.

راهنما های مربوط به ماژول های native(برای iOS و android)، و component های native برای UI (برای iOS و android) را بخوانید. (لینک ها درون همین آموزش)

اگر دنبال component های آماده می گردید سری به JS.coach یا Native Directory بزنید.

ابزارهای توسعه

در ری اکت Nuclide یک IDE است که Facebook برای توسعه ی جاوااسکریپت از آن استفاده می کند که قابلیت فوق العاده ای در debug دارد. VS Code هم IDE دیگری است که بین توسعه دهندگان جاوااسکریپت معروف است.

در ری اکت Ignite یک package خوب برای شروع است که از Redux و کتابخانه های حاوی component های UI دیگر استفاده می کند. همچنین، برای تولید application، component و container، میتوان از CLI آن استفاده کرد.

در ری اکت App Center سرویسی از Microsoft است که deploy بروزرسانی های لحظه ای application را آسان می کند. اگر نمی خواهید برای deploy درگیر پروسه App Store ها شوید و نمی خواهید backend خودتان را داشته باشید، آن را امتحان کنید.

در ری اکت Expo یک محیط توسعه است که به شما امکان ساخت application های React Native بدون نیاز به xcode یا Android Studio را می دهد.

در ری اکت Yoga ابزاری برای ساخت layout است که امکان ساخت انواع layout برای پلتفرم های مختلف را می دهد.

در ری اکت Bugsnag، Microsoft App Center و Sentry، همه سرویس های خوبی برای نظارت به نحوه کار application های React Native ارائه می دهند. این سرویس ها به شما امکان مانیتورcrash ها و مشکلات app به صورت real time را می دهد و می توانید سریعا آن را رفع کنید.

ابزار React Developer Tools برای debug اپلیکیشن های React و React Native عالی است.

14. تنظیماتی برای بهبود عملکرد Flatlist در React Native

اصطلاحات

در ری اکت VirtualizedList: component پایه ی FlatList (پیاده سازی React Native از مفهوم virtual List)

در ری اکت Memory consumption: میزان اطلاعات از لیست که در حافظه نگه داری می شود، که ممکن است منجر به توقف ناگهانی application شود.

در ری اکت Responsiveness: توانایی application برای پاسخ به تعاملات کاربر. پایین بودن سرعت پاسخگویی، مثلا هنگامی که یک component را touch می کنید و باید کمی صبر کنید تا پاسخ بگیرید، قابل مشاهده است.

در ری اکت Blank areas: وقتی VirtualizedList نمی تواند آیتم ها را با سرعت کافی render کند، ممکن است بخشی از لیست به جای آیتم ها، فضایی سفید به کاربر نشان داده شود.

در ری اکت Viewport: فضای قابل رویت از محتوا، حاوی pixel های render شده

در ری اکت Window: فضایی که آیتم ها باید در آن load شوند، که عمدتا از Viewport بزرگتر است.

در ری اکت Props

در اینجا لیستی از props ها را می بینید که می توانید از آن ها برای بهبود عملکرد FlatList استفاده کنید:

RemoveClippedSubviews

TYPE

DEFAULT

Boolean

False

اگر مقدار آن true باشد، viewهای بیرون از viewport را حذف می کند.

مزایا: این کار زمان صرف شده روی thread اصلی را کم می کند، و در نتیجه با حذف viewهای خارج از viewport احتمال drop شدن frame ها را کم می کند.

معایب: این پیاده سازی ممکن است bug داشته باشد. مثلا محتوایی از دست برود (بیشتر در iOS مشاهده شده)، به خصوص زمانی که کارهای پیچیده ای با transforms ها یا absolute positioning انجام می دهید. برای صرفه جویی در مصرف memory هم چندان کاربرد ندارد، چرا که viewها فقط detach می شوند.

MaxToRenderPerBatch

MaxToRenderPerBatch

این یک prop مختص VirtualizedList است که می تواند توسط FlatList مقداردهی شود. مقدار آیتم های render شده در هر scroll را تعیین می کند.

مزایا: تعیین یک عدد بزرگتر به معنای کم شدن فضای خالی هنگام scroll کردن خواهد بود.

معایب: آیتم بیشتر به ازای هر scroll زمان بیشتری برای اجرای کد جاوااسکریپت می گیرد و احتمال block شدن پردازش eventهای دیگر هست و سرعت پاسخگویی را کم می کند.

UpdateCellsBatchingPeriod

UpdateCellsBatchingPeriod

مقدار این property تعیین کننده ی تاخیر به میلی ثانیه بین render کردن دیتا در هر scroll است.

مزایا: استفاده از این property در کنار maxToRenderPerBatchبرای مثال این امکان را می دهد که آیتم های بیشتر با scrollکمتر، یا آیتم های کمتر در scroll های بیشتر، داشته باشیم.

معایب: تاخیر بین render شدن دیتا در هر scroll ممکن است باعث ایجاد فضای خالی شود، تاخیر کمتر ممکن است موجب کاهش سرعت پاسخگویی applicationشود.

InitialNumToRender

InitialNumToRender

دوره آموزش React Native

مقدار اولیه آیتم ها برای render شدن را معین می کند.

مزایا: تعداد آیتم های load شده را در صفحه تمام device ها معین می کند. این ممکن است بشدت روی بهبود عملکرد application هنگام render شدن برای اولین بار، تاثیر بگذارد.

معایب: در نظر گرفتن مقدار کمی برای initialNumToRender ممکن است باعث بوجود آمدن فضای خالی شود، به ویژه اگر عدد به قدری کم باشد که viewport را در هنگام render شدن اولیه، پر نکند.

windowSize

windowSize

این عدد یک واحد اندازه گیری است، که در آن 1 معادل height viewport شماست. مقدار پیش فرض آن 21 است (10 برابر viewport از بالا، 10 برابر آن از پایین و یکی برای وسط).

مزایا: مقدار بزرگتر برای windowSize احتمال دیدن فضای خالی هنگام scroll را کم می کند. درمقابل، مقدار کمتر در مصرف memory صرفه جویی می کند، چرا که تعداد آیتم هایی که همزمان load می شوند، کم می شود.

معایب: بزرگ شدن windowSize به مصرف بیشتر memory منتج می شود و کوچکتر شدن آن احتمال دیدن فضای خالی را بیشتر می کند.

LegacyImplementation

LegacyImplementation

این property، FlatList را مجبور می کند از پیاده سازی قدیمی و منسوخ شده ی ListView به جای VirtualizedList استفاده کند.

مزایا: مشکل فضای خالی و bug های VirtualizedList نخواهید داشت.

معایب: مصرف memory بیشتر و احتمال توقف ناگهانی application هنگام استفاده از لیست های بزرگ با آیتم های پیچیده بیشتر می شود. از قابلیت های زیادی پشتیبانی نمی شود و ممکن است به دلیل منسوخ شدنش، bug های بیشتر هم داشته باشد.

لیست List item ها

در این بخش نکاتی درمورد component های list item مطرح شده است. List item ها هسته اصلی لیست ها هستند، و عملکردشان اهمیت زیادی دارد.

از component های ساده استفاده کنید.

هرچه component هایتان پیچیده تر باشد، سرعت render کمتری دارند. از روال های منطقی پیچیده و آیتم های تودرتو در لیست استفاده نکنید. اگر از لیست در قسمت های مختلف application استفاده می کنید، یک component برای لیست بزرگتان درست کنید و تاحد ممکن منطق و تودرتویی را در آن به حداقل برسانید.

از component های سبک استفاده کنید

هرچه component هایتان سنگین تر باشند، سرعت render شدنشان پایین می آید. از عکس های سنگین استفاده نکنید (از thumbnail عکس یا نسخه crop شده آن استفاده کنید). تا جایی که ممکن است effect ها و تعاملات و اطلاعات درون لیست را کم کنید. آیتم ها را بعدا می توانید با هرمقدار جزئیات که می خواهید به طور مستقل نمایش دهید.

از shouldComponentUpdate استفاده کنید

در React، PureComponent خودش یک تابع shouldComponentUpdate با پیاده سازی ساده ای درحد یک مقایسه، دارد. این تابع هزینه بر است چرا که همه ی props ها را چک می کند. اگر تابعی با عملکرد بهتر می خواهید، طوری آن را پیاده سازی کنید که فقط props هایی که احتمالا تغییر کرده اند را، چک کند. اگر لیست ساده پیاده سازی شده باشد حتی می توانید از قطعه کدی مثل کد زیر استفاده کنید:

shouldComponentUpdate() {

return false

}

از عکس های بهینه شده cache شده استفاده کنید

برای بهبود عملکرد برنامه حین کار با عکس ها، می توانید از package هایی مثل react-native-fast-image که توسط DylanVann@ توسعه داده شده، استفاده کنید. هر عکس در لیست یک instance از new Image() است. هرچه سریعتر عکس به loaded hook برسد، Thread جاوااسکریپت مختص آن سریعتر آزاد می شود.

از getItemLayout استفاده کنید

اگر تمام component های مربوط به آیتم های درون لیست height یکسانی دارند، (یا width یکسان برای لیست های افقی) استفاده از این prop، FlatList را از قید محاسبه های async مربوط به layout، آزاد کند.

این روش خوبی برای بهبود عملکرد است.

اگر component ها سایز متفاوت دارند و باز هم می خواهید performance خوبی داشته باشید، طراحی خود را تغییر دهید.

از keyExtractor یا key استفاده کنید

برای FlatList خود از keyExtractor استفاده کنید. این prop برای caching استفاده می شود و به عنوان نوعی کلید برای نگه داری ترتیب آیتم ها استفاده می شود. همچین می توانید از یکprop key درون آیتم ها استفاده کنید.

از anonymous function در renderItem استفاده نکنید

تابع renderItem را بیرون تابع render بگذارید، به این شیوه از بازسازی اش در هربار render شدن جلوگیری کرده اید.

renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>);

render(){

// ...

<FlatList

data={items}

renderItem={renderItem}

/>

// ...

}

15. Component ها و API ها در React Native

آموزش React Native

با ادامه آموزش هفتم همراه با باشید

آموزش Bootstrap 4-آموزش طراحی سایت

آموزش Bootstrap 4

سلام با بخش دوم آموزش Bootstrap 4 همراه ما باشید . در بخش اول با مفهوم Bootstrap آشنا شدیم و فرق Bootstrap 4 و Bootstrap 3 را متوجه شدیم و در بخش اول چند مثال را دیدیم و به جواب سوال (چرا بایستی از Bootstrap استفاده کنیم؟ ) رسیدیم .در ادامه :

آموزش طراحی سایت

آموزش سیستم گرید بندی (Grid System) در Bootstrap 4:

سیستم گرید بندی Bootstrap Bootstrap 4 مبتنی بر Flexbox ساخته شده و به شما امکان می دهد تا 12 ستون (Column) را در هر سطر (Row) داشته باشید.
اگر نمی خواهید در هر سطر (Row) از هر 12 ستون (Column) استفاده نمایید می توانید آن ها را 2 یا چندتایی با هم یک گروه کرده و ستون هایی عریض تر ایجاد نمایید.
شکل زیر، ایده کلی سیستم گریدبندی در Bootstrap 4 را نشان می دهد. همانطور که مشاهده می کنید می توانید ستون هایی با عرض 1 از 12 واحد یا 2، 3 و ... از 12 واحد را ایجاد نمایید:

آموزش سیستم گرید بندی (Grid System) در Bootstrap 4:

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

آموزش کلاس های گرید (Grid Class) در سیستم گریدبندی Bootstrap 4:

آموزش طراحی سایت

سیستم گریدبندی بوت استرپ (Bootstrap 4 Grid System) دارای کلاس مختلف برای ستون ها به شرح زیر است :

• کلاس col. : مخصوص دستگاه بسیار کوچک (extra Small devices) که عرض صفحه نمایش آن ها معادل 575 پیکسل یا کمتر است.
• کلاس .col-sm-: مخصوص دستگاه هایی با صفحه نمایش کوچک (small devices) که عرض صفحه نمایش آن ها 576 پیکسل یا بیشتر است.
• کلاس .col-md-: مخصوص دستگاه هایی با صفحه نمایش متوسط (medium devices) که عرض صفحه نمایش آن ها 768 پیکسل یا بیشتر باشد.
• کلاس .col-lg-: مخصوص دستگاه هایی با صفحه نمایش بزرگ (large devices) که عرض صفحه نمایش آن ها 992 پیکسل یا بیشتر باشد.
• کلاس .col-xl: مخصوص دستگاه هایی با صفحه نمایش بسیار بزرگ (xlarge devices) که عرض صفحه نمایش آن ها از 1200 پیکسل بیشتر است.

نکته :

کلاس های فوق را می توانید به صورت ترکیبی و همزمان نیز در یک عنصر به کار برده و صفحاتی کاملا واکنش گرا (Responsive) و انعطاف پذیر (flexible) ایجاد نمایید.

تذکر

تأثیر کلاس های فوق و اولویت اهمیت آن ها در اجرا، از اندازه کوچک به بالا است. یعنی قاعده کلاس های کوچکتر به کلاس های بزرگ تر اولویت داشته و تعمیم داده می شود.

بنابراین مثلا اگر می خواهید عرض یکسانی را برای کلاس های sm و md تعیین کنید، کافی است مقدار sm را تنظیم کرده و خودکار به کلاس بالاتر ارث داده می شود.

آشنایی با ساختار پایه سیستم گریدبندی Bootstrap 4:

در 2 کد مثال عملی زیر، ساختار پایه تعریف و استفاده از سیستم گریدبندی Bootstrap 4 را نشان داده ایم. کد مثال ها را مطالعه نمایید. در ادامه به تشریح هرکدام خواهیم پرداخت :

دوره آموزش طراحی سایت

<!-- Control the column width, and how they should appear on different devices -->

<div class="row">

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

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

</div>

<div class="row">

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

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

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

</div>

<!-- Or let Bootstrap automatically handle the layout -->

<div class="row">

<div class="col"></div>

<div class="col"></div>

<div class="col"></div>

</div>

توضیح مثال اول : ابتدا یک سطر (کد div class=”row”) ایجاد نمایید. سپس به تعداد دلخواه و مورد نظرتان ستون (Column) را با کلاس .col-*-* در هر سطر اضافه نمایید. * اول در کلاس فوق، تعیین کننده صفحه نمایش هدف برای عرض ستون است (مقادیر sm، md، lg یا xl). در حالی که * دوم یک عدد بیانگر اندازه ستون از 12 واحد کل در هر سطر است (مثلا 4 از 12).

توضیح مثال 2: همانند مثال قبل یک سطر (row) مادر ایجاد می کنید. این بار به جای تعیین عدد برای هر .col اجازه دهید Bootstrap قالب سایت را مدیریت کرده و ستون های میانی ایجاد نماید.
برای مثال اگر 2 ستون با کلاس .col تعیین کنید، عرض هرکدام، 50درصد خواهد بود. برای 3 ستون عرض هر ستون 32% و در حالت 4 ستون 25% می شود. همچنین می توانید از مقادیر sm، md، lg یا xl نیز استفاده کرده تا نحوه نمایش را در هر اندازه صفحه نمایش، دقیق کنترل نمایید.

در ادامه چند مثال عملی با سورس کد را ارائه کرده ایم تا سناریوهای مختلف قالب بندی گرید ها در Bootstrap 4 را در عمل نشان دهیم.

آموزش ایجاد 3 ستون مساوی در Bootstrap 4:

در کد مثال عملی زیر، 3 ستون با کلاس col در سطر تعریف کرده ایم که همواره هر ستون 33% عرض را در هر صفحه نمایش و دستگاهی خواهند داشت.

مثال 1

<div class="row">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

</div>

آموزش ایجاد 4 ستون مساوی واکنش گرا در Bootstrap 4:

در کد مثال زیر، 4 ستون با عرض مساوی 3 واحد از 12 واحد تعریف کرده ایم که دارای کلاس sm است. ستون ها در تمامی صفحات از موبایل تا کامپیوترهای بزرگ، همواره 25% عرض سطر را اشغال خواهند کرد.
نکته مهم : در دستگاه هایی با عرض صفحه نمایش کمتر از 576 پیکسل، ستون ها به صورت اتوماتیک بر روی هم قرار گرفته و هر ستون، عرض کل صفحه را اشغال می کند :

مثال 2

<div class="row">

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

</div>

آموزش ایجاد 2 ستون غیر هم اندازه Responsive در Bootstrap 4:

دوره آموزش طراحی سایت

در کد مثال عملی زیر، دو ستون غیر هم اندازه (یکی 4 واحد از 12 و یکی 8 واحد از 12 واحد ستون) ایجاد کرده ایم.
با تعیین پارامتر sm، مشخص کرده ایم اولویت اجرای گرید در موبایل های کوچک است و به طور خودکار به تمامی دستگاه ها با عرض بیشتر نیز انتقال می یابد.

مثال 3

<div class="row">

<div class="col-sm-4">.col-sm-4</div>

<div class="col-sm-8">.col-sm-8</div>

</div>

در بخش آموزش کامل سیستم گرید بندی Bootstrap 4، به توضیح جامع Grid System خواهیم پرداخت.

آموزش کار با متن (Text) و فن چاپ Bootstrapt 4

تنظیمات اولیه Bootstrap 4 برای نمایش متن:

چهارچوب کاری بوت استرپ Bootstrap 4 از سایز نوشته پیش فرض (font-size) با مقدار 16px و ارتفاع خط (line-height) به بلندی 1.5 استفاده می کند.
فونت یا قلم (font-family) پیش فرض در Bootstrap 4 نیز به ترتیب فونت های “Helvetica Neue”، “Helvetica”، “Arial” و “sans-serif” هستند.
علاوه بر این ها در بوت استرپ 4 ، تمامی تگ های <p> یا پاراگراف به طور پیش فرص دارای حاشیه بالا (margin-tap) برابر صفر و حاشیه پایین (margin-bottem) معادل 1rem یا 16px هستند.

آموزش کار با تگ های عنوان <h1> تا <h6> در بوت استرپ 4:

بوت استرپ Bootstrap 4 از ضخامت قلم (font-weight)، ضخیم تر و کمی سایز نوشته (font size) بزرگتر نسبت به Bootstrap 3 در تگ های عنوان یا <h1> تا <h6> استفاده می کند.
در کد مثال عملی زیر، نحوه کاربرد تگ های عنوان در بوت استرپ 4 و خروجی آن ها را نشان داده ایم :

مثال 1

<div class="container">

<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>

<h2>h2 Bootstrap heading (2rem = 32px)</h2>

<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>

<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>

<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>

<h6>h6 Bootstrap heading (1rem = 16px)</h6>

</div>

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

آموزش کار با عنوان ها (Headings) در بوت استرپ 4:

عنوان های مخصوص بوت استرپ 4 با کلاس display کمی متفاوت تر از تگ های عنوان HTML با تگ <h1> تا <h6> هستند. این عنوان ها، دارای سایز نوشته بزرگتر (font-size) ولی پهنای قلم (font-weight) کمتر نسبت به تگ های <h> هستند.
برای این عنوان ها، چهار کلاس displsy-1، display-2، display-3 و display-4 در بوت استرپ 4 ، تعریف شده اند که می توانید یکی از آن ها را انتخاب نمایید.
در کد مثال عملی زیر، نحوه استفاده از کلاس های جدید Heading در بوت استرپ 4 و خروجی آن ها نشان داده شده اند :

مثال 2

<div class="container">

<h1>Display Headings</h1>

<p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>

</div>

آموزش کاربرد تگ <small> در بوت استرپ 4:

از تگ <small> در Bootstrap 4 برای ایجاد یک متن کوچکتر و غیر اصلی در عنوان ها استفاده می شود.

راهنمایی :

برای کارکرد صحیح تگ <small< ، این تگ بایستی درون تگ های <h1< تا <h6< و یا تگ های نوشته با کلاس .display.* قرار بگیرد.

در کد مثال عملی زیر، نحوه استفاده از تگ <small> و نتیجه آن را در خروجی نشان داده ایم:

مثال 3

<div class="container">

<h1>Lighter, Secondary Text</h1>

<p>The small element is used to create a lighter, secondary text in any heading:</p>

<h1>h1 heading <small>secondary text</small></h1>

<h2>h2 heading <small>secondary text</small></h2>

<h3>h3 heading <small>secondary text</small></h3>

<h4>h4 heading <small>secondary text</small></h4>

<h5>h5 heading <small>secondary text</small></h5>

<h6>h6 heading <small>secondary text</small></h6>

</div>

آموزش کاربرد تگ <mark> در Bootstrap 4:

در صورت قرار دادن یک متن درون تگ <mark> ، بوت استرپ 4، آن متن را برای پس زمینه زرد و کمی حاشیه درونی (padding) نمایش خواهد داد.
در کد مثال عملی زیر، نحوه استفاده از تگ <mark> و خروجی آن را نشان داده ایم:

مثال 4

<div class="container">

<h1>Highlight Text</h1>

<p>Use the mark element to <mark>highlight</mark> text.</p>

</div>

آموزش کاربرد تگ <abbr> در بوت استرپ 4:

در صورت قرار دادن متن درون تگ <abbr> ، چهارچوب کاری بوت استرپ 4، آن متن را با یک حاشیه زیرین خط چین و نقطه نقطه نمایش می دهد.
در کد مثال عملی زیر، نحوه استفاده از تگ <abbr> را در عمل نشان داده ایم:

مثال 5

<div class="container">

<h1>Abbreviations</h1>

<p>The abbr element is used to mark up an abbreviation or acronym:</p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</div>

آموزش کاربرد تگ <blockquote> در Bootstrap 4:

آموزش طراحی وب

با اضافه کردن کلاس .blockquote به تگ <blockquote> در بوت استرپ 4، می توانید یک متن را به صورت درج زیرنویس (مثلا اشاره به مرجع مطلب در نوشته ها) در زیر یک متن اصلی نمایش دهید. همانند کد مثال عملی زیر:

مثال 6

<div class="container">

<h1>Blockquotes</h1>

<p>The blockquote element is used to present content from another source:</p>

<blockquote>

<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>

<p>From WWF's website</p>

</blockquote>

</div>

آموزش کار با تگ <dl> در Bootstrap 4:

بوت استرپ 4، تگ <dl> را با زیر لیست های آن ( تگ های <dt> و <dd> ) به صورت زیر نشان می دهد:

مثال 7

<div class="container">

<h1>Description Lists</h1>

<p>The dl element indicates a description list:</p>

<p>Coffee</p>

<p>- black hot drink</p>

<p>Milk</p>

<p>- white cold drink</p>

</div>

آموزش کار با تگ <kbd> در Bootstrap 4:

بوت استرپ 4، متن درون تگ <kbd> را با پس زمینه تمام مشکی و رنگ نوشته سفید نمایش می دهد. در کد مثال عملی زیر، نحوه استفاده از تگ <kbd> و خروجی آن را نشان داده ایم:

مثال 8

<div class="container">

<h1>Keyboard Inputs</h1>

<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>

<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

</div>

پایان بخش دوم آموزش بوت استرپ 4

به زودی با بخش سوم آموزش Bootstrap 4 بر می گردم

آموزش Bootstrap

سلام با بخش اول آموزش Bootstrap 4 ( از دوره آموزش طراحی سایت ) در خدمت شما هستیم

بوت استرپ Bootstrap

بوت استرپ Bootstrap یک چهارچوب کاری رایگان طراحی سمت کاربر یا فرانت اند (front end) است که به منظور طراحی سریع تر و ساده تر برنامه ها و وب سایت های اینترنتی ایجاد شده است.

• بوت استرپ (Bootstrap) شامل تمپلیت های آماده مبتنی بر HTML و CSS برای کار با فرم ها (Forms)، دکمه ها (Buttons)، جدول ها (Tables)، نوار پیمایش مسیر (Navigation)، تصاویر (Images)، کادرهای محاوره ای (Models)، اسلایدها، کار با متن (Typography) و ابزارهای بسیار دیگری است. چهارچوب کاری Bootstrap حاوی افزونه (plug-in) های آماده بسیاری مبتنی بر جاوا اسکریپت، جهت پویا نمایی سایت ها نیز می باشد.
• آموزش طراحی سایت
• چهارچوب کاری بوت استرپ (Bootstrap)، به سادگی امکان طراحی وب واکنش گرا و انعطاف پذیر (Responsive Design) جهت نمایش وب سایت ها در انواع و سایزهای مختلف نمایشگر را فراهم کرده است.

راهنمایی : طراحی وب واکنش گرا (Responsive Web Design) چیست؟

طراحی وب واکنش گرا یا Responsive Design به روش طراحی سایت ای گفته می شود که در آن صفحات وب، به صورت اتوماتیک و هوشمند، اندازه و نحوه چیدمان اجزای خود را بر حسب ابعاد دستگاه نمایش دهنده صفحه، از موبایل های کوچک گرفته تا مانیتورهای بزرگ، تنظیم کرده تا بهترین حالت نمایش را داشته باشند.

یک مثال ساده طراحی وب سایت با Bootstrap 4:

در کد مثال عملی زیر، یک صفحه وب معمولی را با استفاده از چهارچوب کاری Bootstrap 4 ، طراحی کرده ایم.
این صفحه دارای یک هدر و سه ستون متنی است که به صورت اتوماتیک و برحسب اندازه صفحه نمایش دهنده سایت، چیدمان و عرض اجزای آن تنظیم می شود .

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

مثال 1:

<div class="container">

<div class="row">

<div class="col-sm-4">

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<div class="col-sm-4">

<h3>Column 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<div class="col-sm-4">

<h3>Column 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

</div>

</div>

مقایسه Bootstrap 4 با Bootstrap 3:

بوت استرپ Bootstrap 4 (بوت استرپ) ورژن جدیدتر بوت استرپ است که با کامپوننت های جدید، Stylesheet سریع تر و قابلیت واکنش گرا بودن بیشتر و بهتر.

بوت استرپ Bootstrap 4 از تمامی پلتفرم ها و آخرین نسخه های مرورگرهای اصلی، پشتیبانی می کند ولی از مرورگرهای 9IE و پایین تر، پشتیبانی نمی کند.

راهنمایی 1 :

اگر می خواهید Bootstrap را در مرورگرهای IE8و IE9 به کار ببرید، بایستی از Bootstrap ورژن 3، استفاده کنید. ورژن 3 ، پایدارترین نسخه Bootstrap است و همچنان توسط سیستم Bootstrap، جهت برطرف کردن باگ های خطرناک و ارائه مستندات آموزشی، پشتیبانی می شود.

آموزش طراحی سایت

راهنمایی 2 - عدم پشتیبانی از برخی از آیکون ها :

بوت استرپ Bootstrap 4 از آیکون های BS3 Glyphicons، پشتیبانی نمی کند. در Bootstrap 4 از Font Awesome و سایر کتابخانه های آماده آیکون، استفاده نمایید.

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

مزایای استفاده از Bootstrap عبارتند از :

• راحتی در استفاده : هر کاربری حتی با دانش کمی از HTML و CSS می تواند به راحتی شروع به استفاده از Bootstrap 4 نماید.
• قابلیت واکنش گرایی بیشتر: در نسخه Bootstrap 4، قابلیت طراحی وب واکنش گرا یا Responsive Design به وسیله CSS بهتر شده و برای انواع موبایل ها، تبلت ها و کامپیوترهای رومیزی تنظیم گشته است.
• راهکار طراحی اولیه جهت موبایل (Mobile First Design): در نسخه جدید بوت استرپ 4، استایل های طراحی جهت موبایل (دستگاه با صفحات کوچک)، به عنوان هسته اصلی چهارچوب کاری Bootstrap 4 تعریف شده است.
• سازگار بودن با انواع مرورگر : بوت استرپ 4 با تمامی مرورگرهای اصلی از جمله کروم، فایرفاکس، IE10، Edge، سافاری و اپرا کاملا سازگار است.

بوت استرپ Bootstrap 4 را از کجا دریافت کنیم؟

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

• خواندن آنلاین فایل های Bootstrap 4 از طریق یک توزیع کننده آنلاین وب یا CDN.
• دانلود فایل های Bootstrap 4 از سایت getbootstrap.com و اضافه کردن آن ها در هاست سایت مورد نظر.
• آموزش طراحی سایت

آموزش کار با توزیع کننده های آنلاین Bootstrap یا CDN:

اگر نمی خواهید فایل های بوت استرپ 4 را دانلود کرده و آن ها را به صورت فیزیکی بر روی هاست سایت خود قرار دهید، می توانید آن ها را از یک فراهم کننده آنلاین محتوا یا CDN به صفحه اضافه کنید.
یکی از توزیع کننده های آنلاین فایل های Bootstrap، MaxCDN است که از فایل های CSS و جاوا اسکریپت لازم، پشتیبانی می کند.
برای الحاق آنلاین فایل های Bootstrap به وب سایت هدف، از طریق MaxCDN، بایستی کد زیر را در صفحه قرار دهید. توجه داشته باشید Bootstrap برای اجرا به jQuery نیاز داشته و بایستی لینک آن ها هم اضافه شود :

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

<!-- Popper JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

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

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

راهنمایی 2 : چرا بایستی jQuery یا Propper را همراه Bootstrap اضافه کنیم؟

بوت استرپ Bootstrap 4 از کتابخانه های آماده jQuery یا Propper برای اجرای افزونه یا کامپوننت های جاوا اسکریپتی مثل کادرهای محاوره ای (Models)، پیام ها tooltip، منوهای پاپ آپ و ... استفاده می کند، بنابراین بایستی این فایل ها هم اضافه شوند.
اما اگر فقط از بخش CSS Bootstrap استفاده می کنید، نیازی به اضافه کردن لینک jQuery یا Propper وجود ندارد.

آموزش طراحی وب

آموزش دانلود فایل های Bootstrap 4:

اگر می خواهید فایل های Bootstrap 4 را دانلود کرده و در هاست سایت خود قرار دهید، می توانید به آدرس getbootstrap.com رفته و مراحل لازم را انجام دهید.

آموزش طراحی اولین صفحه وب با Bootstrap 4:

مرحله 1 - اضافه کردن تگ اصلی HTML 5 Doctype:

بوت استرپ Bootstrap 4 از تگ های HTML و خواص CSS استفاده می کند، که لازم است تگ اصلی HTML5 یا doctype به صفحات وب اضافه شود.
همواره همانند کد زیر، تگ HTML 5 doctype را در ابتدای صفحات اضافه کرده و خواص lang(زبان) و سیستم کدینگ (charset) مناسب را تعیین نمایید :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

</head>

</html>

مرحله 2 - Bootstrap 4 پیش فرض نمایش در موبایل است (Mobile First Design) :

بوت استرپ Bootstrap 4 به گونه ای طراحی شده است تا بهترین نمایش را در درجه اول درون صفحات موبایل ها داشته باشد و فایل های stylesheet مخصوص صفحه نمایش های کوچک، هسته اصلی چهارچوب کاری Bootstrap است. برای اطمینان از نمایش صحیح و zoom صحیح و لمسی، تگ <meta> زیر را درون بخش <head> صفحه قرار دهید :

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

در کد فوق، خاصیت width=device-width باعث می شود همواره عرض صفحه معادل عرض صفحه نمایش دهنده آن باشد که البته در دستگاه های مختلف، متفاوت خواهد بود.
همچنین خاصیت initial-scale=1، تعیین می کند زوم اولیه جهت نمایش صفحه 1 یا 100 درصد بوده که به معنای عدم زوم اولیه است.

مرحله 3 - تعیین عنصر دربرگیرنده اصلی محتویات صفحه (Containers):
بوت استرپ 4 برای دربرگرفتن کلیه اجرای صفحه به یک عنصر مادر یا Container نیاز دارد. در چهارچوب Bootstrap 4 دو نوع Container تعریف شده که می توانید از هر کدام استفاده نمایید :

• کلاس container. : یک عنصر دربرگیرنده با قابلیت طراحی واکنش گرا ایجاد می کند که عرض آن معمولا کمی کمتر از عرض کل صفحه نمایش است.
• کلاس container-fluid. : یک دربرگیرنده با عرض کامل (full width container) ایجاد می کند که تمامی عرض صفحه نمایش را در بر می گیرد.

در شکل کد مثال عملی زیر، هر دو نوع container Bootstrap را نشان داده ایم:

container Bootstrap

آموزش دو مثال عملی طراحی صفحه در Bootstrap 4:

مثال1: در کد مثال عملی زیر، یک صفحه ساده با Bootstrap 4 ایجاد کرده ایم که از عنصر دربرگیرنده با کلاس container. استفاده می کند. همانطور که در خروجی مشاهده می کنید، عرض صفحه کمی کمتر از عرض صفحه نمایش است و همواره حاشیه ثابت دارد.

مثال 2

<p>Bootstrap 4 Example</p>

<div class="container">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

مثال2: در کد مثال زیر، کد قبل را بازنویسی کرده و این بار از یک عنصر دربرگیرنده با کلاس container-fluid استفاده کرده ایم. همانطور که در خروجی مشاهده می کنید، محتویات کل عرض صفحه را گرفته در هر اندازه ای حالت تمام صفحه دارند :

مثال 3:

<div class="container-fluid">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

با ادامه بخش دوم آموزش Bootstrap 4 همراه ما باشید