Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد.
بزرگترین مشکل طراحان وب و کدنویسان قدیمی، ایجاد ظاهری زیبا و مناسب است! بله دقیقا مشکل اساسی اینجاست. اصول کدنویسی و ایجاد زیربنا و ساختار مناسب برای یک سایت بسیار مهم و پیچیده است ولی نمایش صحیح خروجی کار و ایجاد یک فضای کاربرپسند نیز اهمیت بسیار بالایی خواهد داشت.
Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع javascript مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید.
در این دوره قصد دارم شما را از مبتدی تا پیشرفته با بوت استرپ آشنا کنم و با ایجاد یک پروژه اونو به شما بصورت کامل آموزش بدم.
دوره های پیشنهادی، بعد از گذراندن این دوره :
پیش نیاز های این دوره فوق العاده کاربردی:
برای ارسال نظر ابتدا باید وارد سایت شوید
سلام‌و عرض ادب
ممنون از دوره ی شما ماشالله خیلی مسلط و خبره هستید خدا حفظتان کند
سعی می کنم تمام دوره های شما را ببینم عالی هستید.
یه سوال آیا برای اورراید کردن فایل بوت استرپ کار زیر رو باید انجام‌بدهیم ؟
@import bootsttap.scss
@import customStyls.scss
@import bootdtrap.scss
ممنون بابت زحماتتون
خیلی عالی و جامع توضیح داده شده♥
سلام وقت بخیر.
ممنون از شما و حمایتتون
خداروشکر دوره براتون مفید بوده
سلام وقت شریفتون بخیر. خیلی ممنون بابت آموزش خوبتون.
یه سوال، فرق کتابخونه‌ها و چارچوب‌ها چیه؟ یه چیزهایی می‌دونم و تو گوگل هم میشه جستجو کرد اما الان من درک نکردم که بالاخره مثلا بوت‌استرپ کتابخونه حساب میشه یا فریمورک. همچنین React JS از کدوم دسته‌است؟
سلام وقت بخیر.
ببینید همان تعریف های که توی گوگل دیدی هست. حالا شما وارد داکیومنت هر کدوم بشید خودشون را معرفی کردند مثله ری اکت میگه من کتابخانه ای js هستم.
اصلا اروری وجود نداره و وقتی فایل همین کد رو با مرورگر های خودم باز میکنم فقط سه تا نوشته column کنار هم میاره . از نظر سایز و اینکه هر کدوم ۴ قسمت رو گرفتن کاملا درسته ولی border و ... روش اعمال نمیشه که عجیبه. حالا در form و قسمت layout همون مثال های موجود با کلاس های مشابه grid , کاملا با استایل درست اعمال میشه . در هر صورت خیلی متشکرم بابت وقتی که گذاشتید و پاسخ دادید ?
ممنون میشم زیر کامنت مربوطه کامنت کنید.
برای border که کلاس های دیگه هست!!! این کلاس ها، استایلشون به این شکل هست. حتما یکبار کامل دوره را تا انتها مشاهده کنید.
با تشکر از توضیحات ولی من مشکل رو هنوز متوجه نشدم که از کجاست. نمونه کد زیر رو وارد میکنم و حین اجرا استایلی نمیگیره:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html> سلام وقت بخیر.
تکه کدی که ارسال کردید داره کار میکنه و استایل های بوت استرپ اعمال میشه
لطف کنید توی کامنت ها، کدها و یا متن های ارور را بین سه عدد بک تیک قرار و ارسال کنید.
سلام و تشکر بابت این دوره آموزشی مفید. در حال حاضر که نسخه بوت استرپ 5.3 هست ، بنده فایل های cdn رو داخل پروژه خودم قرار میدم و همه کد ها رو درست اعمال میکنم ولی زمان استفاده از کلاس col متاسفانه استایل ها اعمال نمیشن انگار که اصلا استایلی برای این کلاس در نظر گرفته نشده. در حالیکه بقیه موارد درست هست و سایر استایل ها مشکلی ندارند ولی در استفاده از grid ، ستون ها صرفا کنار هم بدون هیچ بردر و استایلی نمایش داده میشن! مثال خود سایت بوت استرپ رو کپی پیست میکنم تمام قسمت ها درست مثل سایت نمایش داده میشه غیر از grid. ممنون میشم راهنمایی بفرمایید
سلام وقت بخیر.
ممنو ن از شما، اگه فایل css بوت استرپ باشه و بعدش هیچ فایل css دیگه ای نباشه و مثال از خوده داکیومنت بوت استرپ کپی و قرار داده باشید، باید به درستی نمایش بده
یکبار دیگه مواردی که گفته شده را انجام و چک و کنید.
سلام
خیلی ممنون از اینکه دوره ها رو رایگان در اختیار ما گذاشتید
میخواستم بدونم بوت استرپ هم باز تولید میشه مجدد ؟ هم چنین بوت استرپ دنیای واقعی
سلام وقت بخیر.
ممنون از شما و حمایتتون?
خیر، دوره هاش بر اساس آخرین ورژن بوت استرپ یعنی ۵ هست.
فایل هایی که تو آموزش در موردشون توضیح می دین با فایل هایی که برای دانلود گذاشتید فرق داره ، ظاهرا فایل های دانلودی رو با ورژن جدید بوت استرپ آپدیت کردید...الان فایل های قدیمی رو از کجا باید بیاریم؟ تشکر
سلام وقت بخیر.
ما یه دوره بوت استرپ 4 داریم و یکی هم ورژن 5 که آخرین ورژن هست و شما احتمالا ویدیو های ورژن چهار را دارید میبنید ولی فایل های تمرینی ورژن 5 را دارید دانلود میکنید.
دوره بوت استرپ 5 را کامل مشاهده و تمرین کنید.
سلام ؛ bootstarp فقط از فلکس باکس استفاده میکنه یا از سیستم گرید استفاده میکنه؟ گرید رو هم باید بلد باشیم؟
سلام وقت بخیر.
یکسری کلاس براش قرار داده
اما بصورت کلی، طبیعتا شما هر چقد با css آشنا باشید و کار کرده باشید. بهتر میتونید با فریمورک هاش کار کنید.
سلام وقت بخیر.
دوره ی بی نظیری بود.
خدا خیرتون بده.
ممنونم ازتون
سلام وقت بخیر.
ممنون از شما و حمایتتون?
خداروشکر دوره براتون مفید بوده
سلام خسته نباشید دوره بسیار کامل بود و تشکر از شما.
فقط یک سوال اینکه در حالت استاندارد در هر سایت باید تا چه اندازه از bootstrap استفاده بشه؟
سلام وقت بخیر.
ببینید هیچ تفاوتی بین کلاس بوت استرپ و کلاسی که شما مینویسید نیست پس میتوانید از تمام امکانات بوت استرپ استفاده کنید.
حتما اول پیش نیاز های دوره را مشاهده کنید.
با سلام و احترام ، از آموزش های خوبتون سپاسگزارم.امیدوارم همیشه سالم باشید.
سلام وقت بخیر.
ممنون از شما و حمایتتون?
خداروشکر دوره براتون مفید بوده
سلام وقت بخیر استاد تو سایت یه بخش جدید به اسم
css grid اضافه شده
که خیلی پیچیده نیست ولی مشکل اینجاس که هیچ کدوم از تکه کدا اجرا نمیشه
سلام وقت بخیر.
دقت کنید که دقیقا ار ورژن بوت استرپی که توی داکیومنت هست استفاده کنید که این قابلیت ها را داشته باشه
سلام وقتتون بخیر . با تشکر از ویدیو های آموزشی. بنظرم یکی از کامل ترین مسیر های آموزشی رو دارید
یک سوالی داشتم:
اینکه بین bootStrap , materialize , کدوم بهتر هست و اینکه دوره ی رو قرار نمیدید؟
سوال بعدی این هست که من flutter کار میکنم و میخوام از طریق یادگیری webDevelping و بعد vue در نهایت به pwa یا همون اپلیکیشن های تحت وب برسم ... بااینکه با flutter میشه خروجی های زیادی گرفت اما vue بهینه تر هست.
خواستم نظر شمارو در مورد این مسیر بدونم اگر پیشنهاد و یا تجربه ایی در مورد این موضوع دارید خوشحال میشم به اشتراک بگذارید ?❤️
سلام وقت بخیر.
ممنون از شما، در مورد سوال اولتون، تفاوت توی طراحی این دو فریمورک هست و شما هر کدوم که دوست داشته باشید میتوانید استفاده کنید.
در مورد سوال دومتون، من flutter کار نکردم ولی فک میکنم نسخه ای وب کمی مشکل و باگ داره و میتوانید برای نسخه های موبایل ازش استفاده کنید و برای وب از vue و nuxt
ممنون بابت آموزش خوبتون
فقط سوالی داشتم که در صفحه کلید شورت کات ایجاد کلاس در ویژال استادیو چه بود؟
سلام وقت بخیر.
منظورت از ایجاد کلاس را متوحه نمیشم. اما در کل میتوانید از اکستنشن های موجود در vscode استفاده کنید.
منظورم اینه آیا در visual stadio شورت کاتی برای ایجاد یک کلاس وجود داره؟؟
</div class="row"> <div> فک میکنم منطور شما استفاده از emmet هست.
در این خصوص دوره ای رایگان برای emmet توی سایت هست که میتوانید مشاهده کنید.
سلام آقای شیخ. وقتتون بخیر و ممنون بابت آموزشهاتون.
سوالی که داشتم اینه که چه تفاوتی بین استفاده از گرید با row های تودرتو با row-cols وجود داره؟ (به غیر از کمی کوتاهتر شدن کد). به این مثال دقت کنید:
<div class="row-cols-3">
<div class="row">
<div class="column-border col">col1</div>
<div class="column-border col">col2</div>
<div class="column-border col">col3</div>
<div class="column-border col">col4</div>
</div>
</div> <div class="row">
<div class="col-4">
<div class="row">
<div class="column-border col">Hamid</div>
<div class="column-border col">Hamid</div>
<div class="column-border col">Hamid</div>
<div class="column-border col">Hamid</div>
</div>
</div>
</div> سلام وقت بخیر.
ممنون از شما، همانطور که فرمودید برای کوتاه تر شده هست. همچنین مثال یم را میتوان به این شکل نوشت
<div class="row row-cols-3">
<div class="column-border col">col1</div>
<div class="column-border col">col2</div>
<div class="column-border col">col3</div>
<div class="column-border col">col4</div>
</div> سلام آقای شیخ خسته نباشید
من میخوام تازه دوره شما رو شروع کنم آیا تو دوره به ریسپانسیو صفحه پرداخته شده؟؟؟
سلام وقت بخیر.
بله، اما لطف کنید اول پیش نیاز های دوره را مشاهده، کار و تمرین کنید بعد وارد دوره بشید.
اقای شیخ بهترین اموزش ها رو میدید بهترین. بیانتون عالیه . من کاملا تونستم خیلی چیز ها رو یاد بگیرم. ازتون ممنونم خیلی زیاد . تصمیم گرفتم بقیه دوره ها هم که رایگان نیست و مفید هست رو خریداری کنم
سلام وقت بخیر.
ممنون از شما و حمایتتون، خداروشکر دوره براتون مفید بوده
هفت میلیون پول کلاس دادم رفتم مجتمع فنی تهران . اینقدر بد درس داد که هیچی یاد نگرفتم . اتفاقی با سایت اموزش های اقای علی شیخ اشنا شدم . بهتریننننننننننن بهترینننننننننن اموزش رو دارید اونم رایگان . از خدا می خوام بهترین ها رو بهتون بده. اموزش ها و قدرت بیانتون عالیهههههههههههههههههه
سلام وقت بخیر.
ممنون از شما و حمایتتون، خداروشکر دوره براتون مفید بوده
اره واقعاااا انشالله همیشه تو زندگیشون موفق و موید باشن
ممنون از شما و حمایتتون?
azizazam
سلام خدمت استاد عزیزم و هزاران بار تشکر و شکر از وجود با ارزشتان و آرزوی سلامتی و طول عمر برای شما
من دوره هایhtml5-css , Emmet ,Responsive, flex-box ,grid-layout ,sassرا از طریق سایت شما گذرانده ام و اکنون هم دارم دوره بوت استرپ را میگذرانم و به همه ی علاقمندان شدیدا توصیه می کنم.
علی شیخ
3 روز پیش
سلام وقت بخیر.
ممنون از شما و حمایتتون
خداروشکر دوره ها براتون مفید بوده