Table of Contents
[สรุป 5 นาที] Bootstrap 4 คืออะไร & มีอะไรใหม่บ้าง
สำหรับท่านที่กำลังเริ่มหัดทำเว็บไซต์ด้วย Bootstrap 4 หรือย้ายมาจาก Bootstrap 3 ในวีดิโอนี้เราจะมาดูกันว่า Bootstrap เวอร์ชั่นใหม่มีอะไรให้เราบ้าง
[ลด 10%] คอร์ส Basic HTML5 & CSS3: https://goo.gl/1aHmcwคู่มือการใช้ Bootstrap 4 [ภาษาไทย]: https://goo.gl/9j5aMf
Facebook Page: https://fb.com/webdesignil
BootStrap 5 มีอะไรใหม่ ?
Follow & Contacts
👓 FB : https://www.facebook.com/patiphanphengpao
🕶 FB (Fanpage) : https://www.facebook.com/patiphannn/
📷 IG : https://www.instagram.com/ohmilerr/
📧 Business : [email protected]
RukCom จดโดเมนเช่าโฮสต์ ราคาประหยัด
🔗 https://bit.ly/2yrLUgQ
Course Online คอร์สเรียนออนไลน์
🔗 https://milerdev.teachable.com/courses
Website
🏠 https://milerdev.com/
Donate & Supporting me
🙏🏻 KBANK กสิกร : 0093555821 ปฏิภาณ เพ็งเภา
🙏🏻 Paypal : [email protected]
PatiphanPhengpao MilerDev PatiPhan
Bootstrap 4.5.0 มีอะไรใหม่บ้าง ?
แนะนำสิ่งใหม่ใน Bootstrap 4.5.0 ก่อนเข้าสู่ V.5 ในเร็ววัน
โดย อ.สามิตร จากไอทีจีเนีส
บริษัท ไอทีจีเนียส เอ็นจิเนียริ่ง จำกัด
บริการอบรมพัฒนาเว็บไซต์ และรับทำเว็บไซต์ งานกราฟฟิก
สอน Bootstrap 5 เบื้องต้น [2021] ตอนที่ 1 รู้จักกับ Bootstrap 5
สนับสนุนช่องด้วยการสมัครสมาชิก (Membership):
https://www.youtube.com/channel/UCQ1r_4xPfETLIU4pqf98w/join
ดาวน์โหลด Bootstrap 5 :
https://getbootstrap.com/
ดาวน์โหลด Visual Studio Code :
https://code.visualstudio.com/
เนื้อหา Bootstrap 5 เบื้องต้น :
https://www.youtube.com/playlist?list=PLltVQYLz1BMDNdxqTqiOmD2CN3J2PFF
โค้ดประกอบเนื้อหา :
https://github.com/kongruksiamza/Bootstrap5Basic
รวมเนื้อหา HTML CSS Javascript :
https://www.youtube.com/channel/UCQ1r_4xPfETLIU4pqf98w/playlists?view=50&sort=dd&shelf_id=3
สร้างเว็บด้วย Bootstrap5 KongRuksiam
ติดตามข่าวสารของเราได้ที่แฟนเพจ :
https://www.facebook.com/pg/KongRuksiamTutorial/
ถ้าเกิดไม่ใช้ Bootstrap เราจะใช้อะไรออกแบบเว็บไซต์ดี ?
สำหรับสายทำเว็บหลาย ๆ คน อาจจะเบื่อหรือรู้สึกจำเจกับการใช้งาน Bootstrap เพื่อออกแบบเว็บไซต์ แต่จะให้ไปหาเครื่องมืออื่นก็ไม่รู้จะไปใช้อะไร ?
ในวันนี้เราเลยเอาเครื่องมือเด็ดสำหรับออกแบบเว็บไซต์มาฝากทุกคนกัน ว่าแต่จะมีอะไรบ้าง ไปดูกันเลย!
▲ ติดตามช่องของเราได้ที่ : http://bit.ly/borntoDevSubScribe…
▲ Facebook : https://www.facebook.com/borntodev…
▲ Website : http://www.borntodev.com
🦖BorntoDev Channel คือ ช่องยูทูปที่เน้นสาระด้านเทคโนโลยี การพัฒนาโปรแกรม ไปพร้อมกับความสนุกสนาน และ รอยยิ้มเข้าไว้ด้วยกันทั้งในรูปแบบบทเรียน และ vlog
เพื่อการเปลี่ยนรูปแบบการเรียนรู้ด้านการพัฒนาโปรแกรม และ เทคโนโลยีแบบเดิม ๆ ที่เป็นเรื่องเฉพาะกลุ่มให้เข้าถึง เข้าใจได้ง่ายยิ่งขึ้น โดยพัฒนาเน้นไปที่รูปแบบการนำเสนอใหม่ ๆ ที่เป็นมิตรกับทุกคน
▲ กิจกรรมใน Channel BorntoDev เป็นส่วนหนึ่งในการดำเนินงานของ บริษัท บอร์นทูเดฟ จำกัด ที่เปิดรับ Partners ที่สนใจร่วมเปลี่ยนแปลงให้สังคมไทยเป็นสังคมด้านวิทยาศาสตร์ และ เทคโนโลยีมากยิ่งขึ้น หากคุณสนใจสนับสนุน และ ก้าวไปพร้อมกัน สามารถติดต่อร่วมงานได้แล้ววันนี้
▲ ติดต่อโฆษณา สนับสนุน และ ร่วมงานได้ที่: [email protected]
ความแตกต่างระหว่าง Bootstrap3 และ Bootstrap4
Bootstrap3 และ Bootstrap4 ควรเลือกเรียนอะไรดี
สุขสันต์วันปีใหม่กันนะครับทุกคน ^^
………………………………………………………..
คอร์สเรียนทั้งหมดของเรา
sClass1 Full Course สอนเขียนเว็บไซต์ด้วยตัวเอง ตั้งแต่ 0 100 PHP MySQLi & Bootstrap4
https://course.appzstory.dev/p/sclass1upgradephpmysqlibootstrap4
MiniCourse 1PLUS สอนเขียนระบบจัดการสมาชิก (หน้าบ้าน + หลังบ้าน) PHP MySQLi & Bootstrap4
https://course.appzstory.dev/p/minicourse1plususermanagementsystem
MiniCourse 2 Laravel Web Service Upgrade Course
https://course.appzstory.dev/p/minicourse2laravelwebservice
FreeCourse Login & Register Bootstrap PHP MySQLi
สอนเขียนระบบ Login & Register อย่างง่ายๆ มือใหม่เรียนรู้ได้สบายๆ
https://course.appzstory.dev/p/freecourseloginregisterbootstrapphpmysqli
ช่องทางการติดต่อ (แอดมินจะอยู่ช่วยเหลือตลอดทั้งวัน)
เว็บไซต์หลักของเรา
🏠 https://appzstory.dev
ติดต่อผ่าน Line
📲 @appzstory https://lin.ee/djGJw9L
Facebook Page
🏠 https://www.facebook.com/WebAppzStory/
กลุ่ม Facebook
🏠 http://bit.ly/GroupAppzStory
Youtube Subscribe
🎥 https://bit.ly/youtube_appzstory
คอร์สเรียนAppzStory
Bootstrap 5 | สำหรับผู้เริ่มต้น [2021] [FULL COUSE]
👉 สนับสนุนช่องด้วยการสมัครสมาชิก (Membership):
https://www.youtube.com/channel/UCQ1r_4xPfETLIU4pqf98w/join
🛒 ซื้อสินค้าใน Shopee
คลิกที่ลิงค์นี้เลย 👉 https://bit.ly/3i2Qvje
📌ดาวน์โหลด Visual Studio Code :
https://code.visualstudio.com/
🎬 ประกอบด้วยเนื้อหา :
0:00 รู้จักกับ Bootstrap 5
14:48 Container
20:55 จัดการข้อความ
34:11 สีและพื้นหลัง
44:23 Alignment & Display
50:35 Float & Fixed Position
01:00:38 Margin
01:14:29 Padding
01:23:21 กำหนดขนาด (Size)
01:28:34 กำหนดเส้นขอบ (Border)
01:40:50 ปุ่ม (Button)
02:02:54 Navbar
02:34:06 Bootstrap List
02:43:17 BreadCrumb & Badges
02:52:44 Alert
03:00:32 Progressbar
03:12:28 ตาราง (Table)
03:24:10 หมายเลขหน้า (Pagination)
03:33:45 ตกแต่งแบบฟอร์ม (Form)
03:51:45 Input Group
04:01:55 Card
04:26:10 รู้จัก Grid System
04:37:01 การใช้งาน Grid System
04:55:30 Grid System Responsive
05:10:10 Grid Vertical Alignment
05:18:00 Grid Horizontal Alignment
05:24:16 Flexbox Class
05:46:20 Carousel Slider
06:05:19 Collapse & Accordion
06:17:38 Tooltips
06:25:56 PopOver
06:30:12 Modal
✅ เนื้อหา Bootstrap 5 เบื้องต้น :
https://www.youtube.com/playlist?list=PLltVQYLz1BMDNdxqTqiOmD2CN3J2PFF
📌โค้ดประกอบเนื้อหา :
https://github.com/kongruksiamza/Bootstrap5Basic
✅ รวมเนื้อหา HTML CSS Javascript :
https://www.youtube.com/channel/UCQ1r_4xPfETLIU4pqf98w/playlists?view=50&sort=dd&shelf_id=3
สร้างเว็บด้วย Bootstrap5 KongRuksiam
ติดตามข่าวสารของเราได้ที่แฟนเพจ :
https://www.facebook.com/pg/KongRuksiamTutorial/
สอนใช้ BootStrap 5
สมัครเป็นสมาชิกของช่องนี้เพื่อเข้าถึงสิทธิพิเศษต่างๆ
https://www.youtube.com/channel/UCeKE6wQHTt5JpS9_RsH4hrg/join
Follow & Contacts
👓 FB : https://www.facebook.com/patiphanphengpao
🕶 FB (Fanpage) : https://www.facebook.com/patiphannn/
📷 IG : https://www.instagram.com/ohmilerr/
📧 Business : [email protected]
RukCom จดโดเมนเช่าโฮสต์ ราคาประหยัด
🔗 https://bit.ly/2yrLUgQ
Course Online คอร์สเรียนออนไลน์
🔗 https://milerdev.teachable.com/courses
Website
🏠 https://milerdev.com/
Donate & Supporting me
🙏🏻 KBANK กสิกร : 0093555821 ปฏิภาณ เพ็งเภา
🙏🏻 Paypal : [email protected]
PatiphanPhengpao MilerDev PatiPhan
เว็บเจ๋งขึ้น "เป็นพันเท่า" แค่ใช้ Bootstrap ! | พื้นฐาน HTML5&CSS3 ใน 3 ชั่วโมง Ep.8
มาทำความรู้จักกับสิ่งที่อยู่เบื้องหลังหน้าตาอันหล่อสวย และ ความสามารถมากมายอย่าง “Bootstrap” ที่ไม่ว่าเว็บไซต์ใหญ่ ๆ อย่างร้านอาหารชื่อดัง เว็บไซต์บริษัทใหญ่ ๆ รวมถึงระบบใหญ่ ๆ ที่เขาเลือกใช้กัน มาลองเล่นกันเลยครับผม
➤Kittikorn Prasertsak (Prame)
Founder of BorntoDev
➤กดติดตามช่องของ Youtube ได้ที่ : https://www.youtube.com/c/BorntoDevTH…
➤Facebook : https://www.facebook.com/borntodev
➤Website : http://www.borntodev.com
Bootstrap 4 พื้นฐาน Layout 12 Grid และ Component | สร้างเว็บแบบเข้าใจง่ายๆ สไตล์ลพ.ภูริ Ep.09
เจริญพรผู้มีบุญทุกท่าน
VDO นี้จะสอน Bootstrap 4 ที่เป็น CSS library ที่นิยมมากที่สุดในโลก ซึ่งช่วยในการตกแต่งเว็บไซท์ ทำให้เว็บของเรามีความเรียบร้อย สวยงาม น่าใช้งาน และทำได้อย่างรวดเร็วยิ่งขึ้น เพราะช่วยให้เราลดการเขียน CSS เอง ลงไปได้มาก
เหตุที่ทำVDOนี้ออกมา ก็เนื่องจากมีน้องๆหลายคนอยากเขียนเว็บเป็น และช่วงนี้มีเวลาเนื่องจากเป็นภาวะที่ต้องอยู่บ้านกัน เพราะ Covid19 ระบาด จึงอยากแบ่งปันความรู้ที่หลวงพี่พอจะมีอยู่บ้าง เพื่อเป็นธรรมทาน เป็นวิทยาทาน ให้แก่ผู้ที่สนใจอยากก้าวเข้ามาสู่โลกของการเขียนโปรแกรม พัฒนาเว็บแอปพลิเคชัน เพื่อสร้างประโยชน์แก่ตนเอง สังคม ประเทศชาติ และพระพุทธศาสนาของเรานะ
บุญรักษา,
ภูริวโร
สารบัญเวลา
0:00 Intro
0:11 หัวข้อ Layout การจัดโครงสร้างและองค์ประกอบเว็บ
0:18 การจัดหน้าเว็บด้วยระบบ 12 คอลัมน์
1:44 Container & Row & Column
2:57 ตัวอย่างโค้ด Container & Row & Column
9:57 Nesting Column ซ้อน Row ใน Column
10:51 ตัวอย่างโค้ด Nesting Column
14:01 Responsive Web Design
14:44 5 ขนาดหน้าจอ ที่ต้องการปรับได้ (5 Screen Sizes in Grid System)
15:36 ตัวอย่างโค้ด Screen Sizes in Grid System
20:50 หัวข้อ Component ชิ้นส่วนสำเร็จรูป
21:10 Alerts
21:22 Badges
21:34 Breadcrumb
21:44 Buttons
22:14 Button Group
22:25 Cards
22:56 Carousel (สไลด์โชว์)
23:09 Collapse (ย่อ ขยาย)
23:18 Dropdowns
23:28 Forms
23:39 Input Group
23:50 Jumbotron
23:57 List Group
24:07 Media object
24:26 Modal
24:41 Navs
24:53 Navbar
25:06 Pagination
25:14 Popovers
25:26 Progress
25:35 Scrollspy
25:47 Spinners
25:57 Toasts
26:14 Tooltips (คำอธิบายเพิ่มเติมเมื่อเลื่อนเม้าส์ไปแตะ)
26:32 Tables (ตาราง) อยู่ในหัวข้อ Content
(อนุโมทนากับน้องกาน ที่ช่วยทำสารบัญเวลาให้ด้วยนะ)
Slide การสอน Bootstrap 4
https://docs.google.com/presentation/d/1EjwH719PfCOkuP8C5gw7ff5clDgWrJxUe6oqLJgQHw/edit?usp=sharing
Code
https://github.com/purivaro/learnphp
Playlist ทั้งหมด
สร้างเว็บด้วย PHP & MySQL แบบง่ายๆ เน้นความเข้าใจ สไตล์ลพ.ภูริ
https://www.youtube.com/playlist?list=PLpIeia4uHe4KCVFw1B7UYs3uYOWICFKoe
คุณสามารถค้นหาข้อมูลที่เป็นประโยชน์เพิ่มเติมได้ที่นี่: ดูข้อมูลเพิ่มเติมที่นี่ .
[สรุป 5 นาที] Bootstrap 4 คืออะไร & มีอะไรใหม่บ้าง และรูปภาพที่เกี่ยวข้องกับหัวข้อนี้.
ข้อมูลที่เกี่ยวข้องกับหัวข้อ bootstrap 4 มีอะไรใหม่.
>>ดูข้อมูลอัปเดตเพิ่มเติมได้ที่นี่: ดูข่าวล่าสุดเพิ่มเติมที่นี่
#สรป #นาท #Bootstrap #คออะไร #amp #มอะไรใหมบาง.
css,bootstrap,bootstrap4,bootstrap 4,เรียน bootstrap 4,สอน bootstrap 4
[สรุป 5 นาที] Bootstrap 4 คืออะไร & มีอะไรใหม่บ้างbootstrap 4 มีอะไรใหม่.
เราหวังว่า แบ่งปัน ในหัวข้อ bootstrap 4 มีอะไรใหม่ นี้จะ มีประโยชน์ มาสู่คุณ ขอแสดงความนับถือ.
มี face ไหมครับ เกิดปัญหาการใช้งานครับ
01:16 ตรงช่อง CSS only ต้องเอาไปวางตรงไหนของ code ครับ (ผมเอาไปวางในส่วนของ Head แล้วใช้งานไม่ได้ครับ)
Bootstrap 4.0 เวอร์ชั่นเต็ม + Template ฟรี Download ได้ที่นี่เลยนะฮะ >> https://www.designil.com/bootstrap-4-free-template.html 🙂
จะนำ boostrap 4 มาใช้ใน yii1 ได้มั้ยค่ะ
Custom components เอามาใช้ยังไงอะครับ
แล้ว class .hidden-* ของ Responsive utilities หายไปไหนเหลอครับ T_T
อาทิตย์ที่แล้ว เขียนโปรเจค Bootstarp3 พึ่งเสดไป พักไปอาทิตย์นึงกลับมา Boostarp4 มาแล้ว 5555 ศึกษาไม่ทันจิมๆ ขอบคุณมากครับกำลังหาอยู่เลย
ทำไงให้ Form มันเต็ม Grid ครับ??
ทางเลือกน้อยลงทุกวัน IE9 555
ขอบคุณครับ
ว้าวววว
Terrific work! That is the kind of info that
are supposed to be shared across the internet. Disgrace on the
search engines for now not positioning this post upper!
Come on over and visit my website . Thank you =)
192656 618749This really is something I really have to try and do a lot of analysis into, thanks for the post 337218