Bootstrap 3, 4 ที่ใช้บ่อย ช่วยจัดรูปแบบเว็บไซต์

Bootstrap คือ CSS Framework ช่วยจัดรูปแบบเว็บไซต์ให้สวยงามได้ในทันที่ และสามารถปรับแต่งได้ในภายหลังจึงกลายเป็นมาตรฐานเว็บส่วน ใหญ่นำไปใช้อย่างแพร่หลายทั่วโลก

การจัดรูปแบบเว็บไซต์ให้สวยงามประกอบด้วย จัดรูปภาพ ปุ่ม แบบฟอร์ม ข้อความหัว-ท้าย สไลด์รูปภาพ และวิดิโอ 

กำหนดความกว้าง Popover ของ Bootstrap 4

.popover {
  max-width: 600px;
  }

 จัด Label ให้ชิดซ้ายสำหรับหน้าจอ Mobile และชิดขวาสำหรับหน้าจอ PC

//ใส่ viewport บน header tag ด้วย
@media (min-width: 480px) {
	label.col-md-4 {
		text-align: left;
		}
	}
@media (min-width: 768px) {
	label.col-md-4 {
		text-align: right;
		}
	}

Dropdown Submenu to Inside Navigation ด้วย Bootstrap 4

https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation

แสดง Modal หรือป็อปอัพให้แสดงตรงกลางจอ (ทั้งความกว้างและความสูง)

Modal ก็อปรหัส html ด้านล่างไปใส่ใน Body Tag

 <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginAgent"> Open modal </button>
  <!-- The Modal -->
  <div class="modal fade" id="modalLoginAgent">
    <div class="modal-dialog">
      <div class="modal-content">        
        <!-- Modal Header -->
        <div class="modal-header" style="padding: 0.5rem 1rem;">
          <h4 class="modal-title m-auto">เข้าสู่ระบบ</h4>
          <button type="button" class="close" data-dismiss="modal" style="padding: 0;margin: 0;">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body"> Modal body.. </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
@media(max-width: 768px) {

.modal-dialog {
min-height: calc(100vh - 20px);
}
}

 

ที่มา: https://stackoverflow.com/questions/41377501/how-to-vertically-align-bootstrap-v4-modal-dialogs

การแสดงผลย่อขยายภาพ หรือเปลี่ยนสี ตามขนาดหน้าจอต้องเขียนแยก CSS Syle โดยมี min-width เป็นตัววัดขนาดจอให้เราอัตโนมัติ เช่น iPhone, iPad, PC: 14 นิ้ว 23 นิ้ว 

สามารถก็อปโค๊ดด้านล่างนี้ไปใช้ได้

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

 

/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}

แนะนำให้ดูตัวอย่างจากเว็บนี้

Bootstrap 4 รูปแบบการใช้งาน

https://www.w3schools.com/bootstrap4/default.asp

Bootstrap 3 รูปแบบการใช้งาน

https://www.w3schools.com/bootstrap/default.asp

เครื่องมือออกแบบ

1. https://mdbootstrap.com/docs/jquery/components/demo/

2. https://bootsnipp.com/

https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

https://getbootstrap.com/docs/3.4/getting-started/

https://getbootstrap.com/docs/4.3/getting-started/introduction/