سومین قسمت از دوره آموزشی بوت استرپ را تقدیمتان میکنم ، برای دانلود ویدئوی این قسمت میتوانید از باکس زیر اقدام کنید :
| لینک دانلود | 52 مگابایت |
در این قسمت در مورد جداول و فرم ها با بوت استرپ آشنا میشید. در زیر مجموعه کلاس هایی که میتوان برای تگ <table> تعیین کرد را مثال میزنم ، اولین کلاس table است که با اضافه کردن این کلاس جدول بوت استرپی خود را می سازیم:
|
1 2 3 |
<table class="table"> ... </table> |
اگر کلاس table-striped را به تگ <table> اضافه کنیم سطر های جدول یکی در میان خاکستری میشن تا بهتر قابل تشخیص باشند:
|
1 2 3 |
<table class="table table-striped"> ... </table> |
برای اضافه کردن خط دور به خانه های جدول از کلاس table-bordered استفاده میشه :
|
1 2 3 |
<table class="table table-bordered"> ... </table> |
با اضافه کردن کلاس table-hover وقتی موس روس هر سطر از جدول میره اون سطر تیره تر میشه :
|
1 2 3 |
<table class="table table-hover"> ... </table> |
کلاس table-condensed خاصیت padding جدول را کاهش میده و باعث میشه جدول کوچیکتر بشه :
|
1 2 3 |
<table class="table table-condensed"> ... </table> |
اگر میخواهید جدول شما در رزولوشن های کوچک تنظیم و رسپانسیو باشند تگ <table> را درون کلاس table-responsive قرار دهید :
|
1 2 3 4 5 |
<div class="table-responsive"> <table class="table"> ... </table> </div> |
هر یک از کلاس های active , success , info , warning و danger را میتوان به هر سطر در جدول <tr> یا هر خانه <td> نسبت داد و رنگ خاصی را برای هر کدام برگزید :
خب بخش جدول تمامه و میریم سراغ فرم ها ؛ در فرم های بوت استرپی تگ های <input> , <textarea> و <select> را باید درون کلاس form-group قرار داد :
|
1 2 3 4 5 6 7 8 9 10 |
<form> <div class="form-group"> <label>name</label> <input type="text" placeholder="Enter Name"> </div> <div class="form-group"> <label>family</label> <input type="text" placeholder="Enter family"> </div> <form> |
این کلاس هر کدام از آبجکت ها را در یک سطر قرار داده و کمی حاشیه نیز برای آنان در نظر میگیرد . سپس به هر کدام از تک های مذکور (<input> – <textarea> – <select>) کلاس form-control را اضافه میکنیم :
|
1 2 3 4 5 6 7 8 9 10 |
<form> <div class="form-group"> <label>name</label> <input type="text" class="form-control" placeholder="Enter Name"> </div> <div class="form-group"> <label>family</label> <input type="text" class="form-control" placeholder="Enter family"> </div> <form> |
با اضافه کردن کلاس های بالا فرم های معمولی استایل فرم های بوت استرپ را به خود میگیرند و عرض هر کدام برابر 100% خواهد شد:
اما اگر نیاز بود که آبجکت های یک فرم همگی در یک سطر و افقی باشند باید کلاس form-inline را به تگ <form> نسبت دهیم:
|
1 2 3 4 5 6 7 8 9 10 11 |
<form class="form-inline"> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" placeholder="Jane Doe"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" placeholder="jane.doe@example.com"> </div> <button type="submit">Send invitation</button> </form> |
کلاس دیگری با نام form-horizontal که دقیقا بر عکس form-inline عمل میکند و فرم ما را عمودی نشان میدهد.
اما برای چک باکس ها بجای کلاس form-group از checkbox استفاده میشود :
|
1 2 3 4 5 6 7 8 |
<form> <div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this </label> </div> </form> |
همچنین برای رادیو باتن نیز از کلاس radio استفاده میشود :
|
1 2 3 4 5 6 7 8 |
<form> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something </label> </div> </form> |
برای غیر فعال نمودن رادیو باتن و چک باکس میتوان کلاس disabled را بهشان اضافه کرد.
با اضافه کردن هر کدام از کلاس های has-success ، has-warning و has-error میتوان رنگ های هر آبجکت را تغییر داد و استایل پیشفرض فرم را عوض کرد :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> <input type="text" class="form-control" id="inputWarning1"> </div> <div class="has-success"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxSuccess" value="option1"> Checkbox with success </label> </div> </div> |
برای بزرگتر کردن هر آبجکت میتوان کلاس input-lg و برای کوچکتر کردنش میتوان کلاس input-sm را استفاده کرد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form> <div class="form-group"> <label class="control-label">Input is larg</label> <input class="form-control input-lg" type="text" placeholder=".input-lg"> </div> <div class="form-group"> <label class="control-label">Input is normal</label> <input type="text" class="form-control" placeholder="normal"> </div> <div class="form-group"> <label class="control-label">Input is smal</label> <input class="form-control input-sm" type="text" placeholder=".input-sm"> </div> </form> |
ما در اینستاگرام ...
سلام
بسیار عالی
فک کنم تمام ویدئو هایی رو که قرار دادید دانلود کردم
بسیار عالی
انشاا… با قدرت ادامه بدید و دل سرد نشید
سلام
خیلی متشکرم
والا بنده بنا به استقبال کاربران سایت را بروز میکنم و اگر استقبال زیاد باشه آموزش ها سریعتر بروز خواهد شد
با سلام.بسیار متشکرم بابت این آموزش های عالی و مطمئنم همه کاربران از این آموزش ها و این سایت عالی استقبال می کنند.یه سوالم دارم.وقتی یک می سازیم و یه div با کلاس col درونش مگه نباید این div دوم بیفته درون div اول مثل css یا اصلا کلا تو بوت استرپ قضیش فرق میکنه یعنی div دوم تو div اول هست ولی چون هر کدوم از div ها شامل 12 قسمت می شوند div دوم به div اول می چسبد؟
سلام و خواهش
به جان خودم نفهمیدم منظورتون چیه !
اگر صبر کنید چند تا قالب را بصورت نمونه آموزش میدم
منظورم اینه که دو تا div داریم که دومی داخل اولی است پس محتویات دومی شامل اولی هم می شود شبیه به css.سوال اینجاست که وقتی div با کلاس row را می سازیم و div با کلاس col را درون آن قرا می دهیم یا مثلا این دو را داخل div با کلاس container قرار می دهیم جرا دومی درون اولی نمی افتد و به آن می چسبد؟
شما قسمت دوم را دیدن؟ از کلاس col برای ایجاد ستون استفاده میشه و ستون ها در کنار یکدیگر قرار میگیرند !
اگر مورد قابل توجیح نبود از گزینه افزودن کد در دیدگاه استفاده کن و مثال بزن تا بهتر راهنماییت کنم
همیشه تکی!
درخواست زیاده بروز کن!خخ
تشکر
سلام بازم نشد کدها نمایش داده نمیشن.کاش رو سایت بخش پیوست رو اضافه کنی.من روی این آدرس آپلودش کردم uplod.ir/2ax8ers9ijsv/_strap.zip.htm
باید صبر کنی در آینده چند تا قالب آزمایشی رو با هم دیگه طراحی خواهیم کرد
سلام دادا خیلی مردی دست درد نکنه چشم منتظر میمونم تا ویدئوهای بعدی
عشقی مستر پروگرامر
سلام مهندس
خسته نباشی..مثل همیشه عاااااالی هستی.
مرسی
سلام آقا مهران
مرسی
سلام
تشکر از آموزشه های مفیدتون
متاسفانه آموزش سری اول و سوم دانلود نمیشه و پیغام عدم ارتباط با سرور رو میده،میشه چک کنید.آخه من سری دوم رو دانلود کردم اما اون دوتا رو نتونستم
اگر میشه این سری اموزش رو سریعتر نسبت به آموزشهای دیگه اتون تمام کنید
آقای شفیعیان این تشنه های طراحی سایت رو زود به زود سیراب کن بخصوص در مورد این آموزش
😀
سلام
بنده همین الان تست کردم مشکلی نداره و دانلود میشه ، ممکنه ISP تون مشکل داشته باشه با قند شکن تست کنید. برای دانلود هم میتونید از برنامه ی FlareGet استفاده کنید.
بله سایر دوستان هم درخواست مکرر بروز رسانی این بخش رو دارند و حتما ادامه خواهد داشت
خسته نباشید اقای شفیعیان…
آقای شفیعیان سوالی ک واسم پیش اومزه اینه ک بوت استرپ قابلیت z-index رو هم داره…؟برای مثال من میخوام ی قالب طراحی کنم ک بک گراندش کامل اسلایدشو باشه و روی اون مطالب سایت…با بوت استرپ میشه؟اگه میشهی راهنمایی کوچولو کوچولو گوچولو:)))) کنید چون واقعا خیلی زور بهش نیازدارم…
تشکر و مرسی
سلامت باشی علی جان
من نمی دونم شما دوستان چرا اینقد عجله دارین ، صبر کنید گام به گام میریم جلو
بله به همون خاصیت Z-index میشه
آقا لینک خرابه!
مرسی از هشدار شما ، مشکل حل شد !
ممنون از پاسخ گوییتون ولی بازم خرابه که!
سرور را عوض کردیم و سیستم شما کش سرور قبلی را نگه داشته ، مدتی صبر و مجدا تست کنید
ممنون از اطلاع رسانیتون دانلود کردم
میگم ببخشید سوال بی ازتباط به مطلب این میپرسم میشه بگید چجوری قسمت عضویت برای کاربران سایت ایجاد کنم؟(وردپرسیم)
ترجیحا مثل مال خودتون هم باشه خوبه
پیشاپیش ممنون!
سلام
فوق العاده بود مثل جلسات قبل
ممنون
مرسی تشکر
با سلام وتشکر.من دو تا مشکل دارم یکی اینکه وقتی یه div تعریف می کنم که کلاسشو برابر با container-fliud قرار می دهم و به div داخل آن که مثلا header یا nav است کلاس row را می دهم صفحه overflow-x پیدا میکنه بدون اینکه یه خط کد css نوشته باشم یا شامل محتوا باشه.یه مشکل دیگه هم اینکه من وقتی div با کلاس container-fliud تعریف میکنم و یه سری div دیگه درونش،در رزولوشن های پایین از عرض صد در صد کمتر میشه و وقتی div های داخلش رو پاک میکنم درست میشه البته من هر جا width در نظر گرفته بودم پاک کردم تا خود بوت استرپ برای div ها و دیگر المنت ها width تعیین کنه.
نمونه کدی که نوشتید قرار بدید برسی بشه
سلام.چون می خواستم فایل پیوست کنم ایمیلش کردم.
سلام داداش از طریق ایمیل جواب ندادی برای همین آپلودش کردم در این آدرس uplod.ir/ex4eh65ec3xo/_strap-test.zip.htm
خیلی ممنون.
داداشم نمونه صفحه html را قرار بده برسی کنم
سلام
منتظر اموزش جدید هستیم
طیق وعده امروز منتظریم
سلام
متاسفانه وقت نکردم قسمت بعدی را ضبط کنم ، انشالله هفته آینده
آقا حسین دوباره که سایت راکد شد !
شرمنده کمال جان
درود
خسته شدم از بس اومدم تو سایت و خوابیده بود؟
کی مطلب جدید میذاری ؟
سلام
آیا برای برنامه نویس شدن باید اگثر زبان های برنامه نویسی را بلد بود ؟ یا مهم این است که یکی بلد باش و حرفه ای باش ؟
سلام ،خیر
بهتره یک زبان را شروع و تخصصی کار کرد و در همون زبان فعالیت کنید
درود
وب سایت خیلی جالبی دارید .
میخواستم بپرسم من فقط تو کار برنامه نویسی وب هستم
الان دارم php یاد میگیرم بعدشم باید asp.net را یاد بگیرم
آیا لازم به جاوا هم هست ؟ من فقط میخوام تو حوزه وب فعالیت کنم
ممنون
درود
مرسی تشکر ، شما php را کامل و تخصصی کار کنید و نیازی به asp.net و java نیست
من تحقیقات زیادی کردم
مشخص شده برای کسانی که تنها کار میکنند و سفارش سایت میگیرند php بخاطر کامپوننت های آماده ای که داره و هم چنین قابلیت استفاده از وردپرس بسیار راحت تر است چون دیگر نمیخواهیم از صفر برنامه نویسی کنیم
ولی در شرکت ها بخاطر اینکه ویژوال استودیو محیط قدرتمندی داره بیشتر asp.net محبوب است
پس برای پیشرفت باید هر دوی این زبان ها را یاد گرفت
شما مو میبینید و من پیچش مو
این صحبت من نتیجه 4 سال سابقه کاری تخصصی من بوده و انتظار نداشته باش در عرض 1 روز متوجه این قضیه بشی
موفق باشی
سلام استاد!!!!!
بخش php سایتتون خیلی جالبه آموزش هاش حیف مدت هاست آپدیت نمیشه! پایه های php رو از خودتون یاد گرفتم اودمدم هم یه تشکری کنم بابتشون هم مشکلم رو مطرح کنم لطفا بهم جواب بدید کارم گیره
دارم یه سیستم آزمون میسازم قسمت ثبت نام و لاگین رو با PDO و.. تکمیل کردم حالا رسیدم به صفحه خود آزمون میخوام آزمون زمان داشته باشه و بعد از پایان زمان آزمون به طور خودکار تا جایی که به سوالات جواب داده در دستابیس ذخیره بشه بعدش به طور اتوماتیک کاربر که در حال دادن آزمونه به صفحه دیگه انتقال پیدا کنه من موندم که چجوری بعد از پایان به طور اتوماتیک تاجایی که پاسخ داده رو ذخیره کنم و بطور خودکار انتقال بدم اگه راهی هست لطفا راهنمایی کنید خیلی کارم گیره
پیشاپیش تشکر!
سلام
سوال ؟
من هم در اینترنت خیلی گشت زدم همه میگن درآمد Asp.net بهتره
و میگن اگه برای کار شخصی میخوایید php یاد بگیرید و اگه برا پول درآوردن میخوایید Asp.net
از طرفی هم میگن که php محبوب ترین زبان برنامه نویسی دنیاست
چرا Asp.net درآمدش بیشتره ؟
من از خیلی پرسیدم گفتن هر دو عملکرد یکسانی دارند و نسبت به هم برتری ندارند
این رو گفنم چون در یوتیوب هم که سرچ کردم انیمشن انگلیسی بود که میگفت اگه بازار کار بهتر میخواهید asp.net و اگر برای کار شخصی میخواهید php را انتخاب کنید
درود دوست عزیز
من خودم php کارم و اینو بدون
تو یوتوب و هرجای دیگه که میخوان بگن بگن
تو تو هر رشته ای که حرفه ای باشی پول درمیآری
حالا چه Asp.net چه php
ولی نظر من صد در صد بر php است چون خیلی شیرین تره و کار باهاش باحال تر
و ایضا اگر بخوای از وردپرس و غیره استفاده کنی فقط php بدرت میخوره
اگه asp بخوای باید حتما بری یه زبون دات نت یادبگیری ولی برای php نیازی نیست
اگه از من میشنوی برو php یادبگیر
دستت تو این زبان خیلی باز تره
امیدوارم سودمند بوده باشه
سلام اقا رضا اگه از اي اس پي استفاده كني امنيت پاييني داره ولي راحت تر ميتوني چيزي در ست كني و نيازبه سخت افزار بالايي داره چون من خيلي با اي اس پي كار كردم ولي پي اچ پي چون از سي و سي پلاس مشتق شده قوي تره وامنيت بالاتري داره چون خودم تست كردم و فرق بين اين دو تا رو ديدم من با اينكه پي اچ پي بلد نبودم وبا كمك اقاي برنامه نويس پي اچ پي كار شدم و فهميدم پي اچ پي خيلي بهتره و قدرت اون بالاست
با سلام و خسته نباشید
خیلی وقت بود دنبال آموزش روان و در عین حال خوب و کاربردی می گشتم.ازینکه این سایتو پیدا کردم خوشحالم
دستتون درد نکنه و خسته نباشید حسابی میگم بهتون
فقط یه خواهش زودتر آپ کنید و زود به زود آموزشارو ادامه بدید الان من هر 3تا رو دیدم
بازم تشکر
سلام و سلامت باشید
خیلی متشکرم از بازتاب خوبتون
در مورد بروز رسانی باید بگم مدتیه گرفتارم و فعلا امکانش نیست اما سعی میکنم حداقل دوره بوت استرپ را زود ضبط و منتشر کنم
موفق باشید
سلام اقای برنامه نویس واقعا خسته نبتشی.
قسمت های بعدی این آموزش کی آماده میشه تابتونیم استفاده کنیم؟
ممنون
سلام و سلامت باشی
سعی میکنم قسمت بعدی را در تعطیلات عید ضبط و منتشر کنم
سلام حسين اقا خوبي عيدتون مبارك
لطفا يه دو تا فيلم بوت استرپ بذار من به شدت لازم دارم به اين اموزش ها
سلام سید جان
چشم سعی میکنم قسمت های بعدی را سریعتر ضبط و منتشر کنم
سلام حسين جان خوبي
بعضي سايت ها هستند از طريق اينترنت اس ام اس ميفرستن ميخواستم بدونم چجوري ومن ميتونم همچين سايتي راه اندازي كنم
سلام
از طریق درگاه پیامک انجام میشه ، باید یه پنل پیامک بگیری
سلام حسين جان
اگه من بخوام ميزبان باشم وپنل پيامك بفروشم بايد چيكار كنم
یه سری شرکت هایی هستن نمایندگی فروش پنل پیامک میپذیرند که متاسفانه بنده سراغ ندارم
سلام حسين جان
ببخشيد اينقد سوال مي كنم اون شركتا با اپراتور ها قرارداد مي بندن يانه از يه راه ديگهاقدام مي كنن
بنده بی اطلاعم سید جان
سلام حسين جان وقتت بخير
از اموزش ها خبري نشد
سلام ، کمی درگیرم سید جان
هیچکدوم فایل ها دانلود نمشوند..!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
چرا
سرور دانلود را عوض کردیم ، مدتی صبر و مجددا تست کنید
سلام دوست خوب سال نو مبارک سال خوبی داشته باشی
از مطالبتون ممنونم
سلام حسين جان
بهترين كتاب اموزش كالي لينوكس كه از صفر تا صدشو اموزش بده سراغ داري
سلام بسیار متشکرم بابت آموزش عالیتون فقط قسمت بعدی رو کی می گذارید در سایت
سلام و خواهش
قول صد در صد نمیدم چون مشغله کاری دارم اما قصد دارم قسمتی از وقتم را در طول روز برای ضبط ویدئو بزارم
سلام وخسته نباشی حسین جان
یک کتاب اموزش کالی لینوکس معرفی کن لطفا
سلام و سلامت باشید
شما ابتدا باید به سیستم عامل های معمولی گنو / لینوکس کارکنید تا حرفه ای بشید بعد برید سراغ کالی
سلام حسین جان من با لینوکس کار کردم با بک ترک هم کار کردم ولی کالی فک کنم فرق کنه
سلام.
آموزش هاتون عالیه فقط یکم زودتر آپدیت کنید
سلام
قسمت بعدی رو ضبط کردم ، فردا منتشر میشه 😉
اقای شفیعیان خیییییییییییییلی گلی
تشکر
اقا دمت گرم واقعا عالیه کارت.تا حالا 3تاشو دانلود کردم حرف نداشت.اگه میشه اموزشهای دیگه هم بزار مثلا فریم ورکهای php.تو اینترنت زیاد ریخته.اما چیزی که تو داری طرز بیان جالبته و اینکه انگار میدونی مخاطبت چی میخواد.بازم دستت درد نکنه عالی بود
مرسی از شما , لطف دارین دوست عزیز
عالی!
بسیار عالی. مثل بقیه آموزشا!!!!!!
این قالب http://rust.zentexgaming.ir/ با بوتسترپ طراحی شده ؟ ؟؟
یه کم درباره این قالب توضیح بدید چیا توش به کار رفته
اکثر اجزا این قالی اختصاصی اند و فقط از گرید بندی های بوت استرپ استفاده شده
آقاق حسین ممنون برای وقتی که گذاشتید و قالب رو نگاه کردید شما فرمودید فقط رسپانسیو کردنش با بوتسترپ بوده
من میخوام چنین قالبی طراحی کنم . اگه به button هاش دقت کنید انگار بوتسترپه
میشه بیشتر توضیح بدید با چه کدنویسی و چه برنامه ایجاد شده
ممنون برای پاسخگوییتون
بسیار عالی
محشرید شما هم مطالب و هم فیلم ها عالیه. مرسی
واقعا سایتتون عالیه. خدا قوت. خیلی ممنون که علمتون رو در اختیار بقیه هم میذارید.
سلام
وظیفه خودم دونستم تا از زحماتتون تشکر کنم ، واقعا ممنون ، آموزش هاتون بسیار عالیه واقعا ، امیدوارم همینطور قدرتمند به کار ارزشمندتون ادامه بدید و ما هم بتوانیم از توانایی های شما بهرهمند بشیم ، براتون آرزوی بهترین ها رو دارم . هر جا هستید همیشه شاد ، سلامت و پیوز باشید . من منتظر آموزش تبدیل قالب های طراحی شده با بوت استرپ به قالب وردپرس هستم . باز هم ممنون !!!!
سپاس از توجهتون
سلام اقای شفیعیان اموزشاتون عالیه حرف نداره ممنون از زحماتتون
سلام
از مطالب مفید و کاربردی که آموزش میدین سپاسگزارم.
موفق باشید
سلام
خاهش میکنم ، خوشحالم که مفید واقع شده
سلام و سپاس
توضیحات کاملی بود؛
سوال اینکه
اگر بخوایم جدولی درست کنیم
که نیاز به اسکرول افقی نداشته باشه باید چیکار کنیم؟
مثلا در حالت عادی 10 سلول نمایش بده
وقتی عرض صفحه کمتر بود؛ سلول های غیر ضروری انتخابی توسط ما حذف بشه و برای کاربر نمایش داده نشه؛ در عوض با کلیک روی سطر مورد نظر ؛ یه دراپ داون (drop down list) باز شه و کاربر بتونه چنتا گزینه رو مشاهده و انتخاب کنه؟
سپاس
صادق علوی
hisharj.com
درود
میتونید با جی کوئری پیادش بکنید
یا تو سی اس اس بهش اسکرول بدین
سلام خسته نباشید واقعا طرز بیانت عالیه دمت گرم خیلی خوبه اموزشات برای html و css کلی هزینه کردم و فیلم اموزشی گرفتم ولی واقعا طرز بیانشون خوب نبود و مجبور شدم همرو خودم بخونم ولی این اموزشا عالیه خیلی خوب میشد اگه اموزش های php و فریم ورک هاش مثل لاراول هم اموزش میدادین در هر صورت سپاسگذارم…
سلام
مرسی لطف دارین
یه سری برنامه دارم برای ادامه آموزش ها که انشالله اگه وقت کنم انجام میدم
موفق و پیروز باشید
عــــالــــی من تازه اینجارو پیدا کردم:)
ممنون آقای شفیعیان بابت توضیحات کاملتون
آقای شفیعیان من فایل npm.js رو حذف کردم اگه میشه تو سایت قرار بدین دانلود کنم
میتونید از این صفحه دریافت کنید :
getbootstrap.com/docs/3.3