รู้เบื้องต้นเกี่ยวกับ bootstrap
Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ส่วนประกอบรูปขนาดย่อ
รูปขนาดย่อที่ใช้กันมากที่สุดในเว็บไซต์คือหน้ารายการผลิตภัณฑ์ซึ่งแสดงรูปภาพหลายภาพในบรรทัดเดียวและบางชื่อมีชื่อเนื้อหาคำอธิบายปุ่มปุ่มและข้อมูลอื่น ๆ ภายใต้รูปภาพ
เฟรมเวิร์ก Bootstrap จะแยกส่วนนี้ออกเป็นส่วนประกอบของโมดูลและนำไปใช้ผ่านชื่อคลาส thumbnail และระบบกริด bootstrap ด้านล่างนี้เป็นไฟล์ซอร์สโค้ดของส่วนประกอบภาพย่อของ bootstrap:
น้อยกว่า: tbumbnails.less
Sass: _tbumbnails.scss
หลักการดำเนินการ:
การใช้งานเค้าโครงส่วนใหญ่ขึ้นอยู่กับระบบกริดของเฟรมเวิร์ก bootstrap ต่อไปนี้เป็นสไตล์ที่สอดคล้องกับภาพขนาดย่อ
. thumbnail {display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; พื้นหลัง-สี: #FFF; ชายแดน: 1PX ของแข็ง #DDD; Border-Radius: 4px; -webkit-transition: ทั้งหมด > img {margin-right: auto; margin-left: auto;} a.thumbnail: hover, a.thumbnail: โฟกัส, a.thumbnail.active {สีชายแดน: #428bca;}. Thumbnail.ลองมาดูตัวอย่าง:
<div> <div> <a herf = "#"> <img src = "img/1.jpg" style = "ความสูง: 180px; ความกว้าง: 100%; แสดง: บล็อก"> </a> </div> <div> <a herf = "#"> <img src = "img/2.jpg" block "> </a> </div> <div> <a herf ="#"> <img src =" img/3.jpg "style =" ความสูง: 180px; ความกว้าง: 100%; แสดง: บล็อก "> </a> </div> <div> <a herf ="#"> block "> </a> </div> </div>
ผลกระทบมีดังนี้:
คุณสามารถดูได้โดยใช้มุมมองการออกแบบ Responsive Firefox
บนพื้นฐานของรูปขนาดย่อเท่านั้นเพิ่มคอนเทนเนอร์ div ที่มีชื่อคลาส. การปรับแต่งและวางเนื้อหาอื่น ๆ ในคอนเทนเนอร์นี้เช่น: ชื่อเรื่องคำอธิบายข้อความปุ่ม ฯลฯ
<div> <div> <div> <a href = "#"> <img src = "img/1.jpg" style = "ความสูง: 180px; ความกว้าง: 100%; แสดง: บล็อก"> </a> <div> <h3> ที่นี่คือเนื้อหาคำอธิบายที่นี่คือเนื้อหาคำอธิบายที่นี่คือเนื้อหา นี่คือเนื้อหาคำอธิบายที่นี่คือเนื้อหาคำอธิบายนี่คือเนื้อหาคำอธิบายนี่คือเนื้อหาคำอธิบายนี่คือเนื้อหาคำอธิบาย </p> <a href = "#"> เริ่มเรียนรู้ </a> </div> <div> <a href = "#"> <img src = "img/2.jpg" ความสูง: 180px; 2222 </h3> <p> นี่คือคำอธิบายเนื้อหา 2222 ที่นี่คือเนื้อหาคำอธิบาย 2222 ที่นี่คือเนื้อหาคำอธิบาย 2222 ที่นี่คือเนื้อหาคำอธิบาย 2222 ที่นี่คือเนื้อหาคำอธิบาย 2222 ที่อื่นคือเนื้อหาคำอธิบาย 2222 </p> <a href = "#"> เริ่มเรียนรู้ </a> style = "ความสูง: 180px; ความกว้าง: 100%; แสดง: บล็อก"> </a> <div> <h3> นี่คือชื่อกราฟิก 3333 </h3> <p> นี่คือเนื้อหาคำอธิบาย 3333 นี่คือเนื้อหาคำอธิบาย 3333 นี่คือเนื้อหาคำอธิบาย 3333 นี่คือเนื้อหาคำอธิบาย 222 เรียนรู้ </a> </div> <div> <a href = "#"> <img src = "img/4.jpg" style = "ความสูง: 180px; ความกว้าง: 100%; แสดง: บล็อก"> </a> <div> <h3> คำอธิบายเนื้อหา 4444 ที่นี่คือเนื้อหาคำอธิบาย 4444 ที่นี่คือเนื้อหาคำอธิบาย 4444 </p> <a href = "#"> เริ่มเรียนรู้ </a> <a href = "#"> การศึกษา </a> </div> </div> </div>
ส่วนประกอบกล่องแจ้งเตือน
เฟรมเวิร์ก Bootstrap ใช้สไตล์. Alert เพื่อให้ได้เอฟเฟกต์กล่องเตือน โดยค่าเริ่มต้น Bootstrap ให้เอฟเฟกต์คำเตือนสี่ประการ:
1. กล่องคำเตือนความสำเร็จ: แจ้งให้ผู้ใช้ประสบความสำเร็จในการดำเนินการเพิ่มสไตล์. alert-success บนพื้นฐานของ. alert;
2. กล่องคำเตือนข้อมูล: ให้ข้อมูลที่พร้อมใช้งานแก่ผู้ใช้และเพิ่มสไตล์. alert-info บนพื้นฐานของ. alert;
3. กล่องเตือนคำเตือน: ให้ข้อมูลเตือนและเพิ่มสไตล์การเตือนความพร้อมบนพื้นฐานของ. alert;
4. ข้อผิดพลาดกล่องคำเตือน: แจ้งให้ผู้ใช้สำหรับข้อผิดพลาดในการใช้งานและเพิ่มสไตล์. Alert-Danger บนพื้นฐานของ. alert;
ในหมู่พวกเขาสไตล์. alert ส่วนใหญ่จะตั้งค่าสีพื้นหลังเส้นขอบมุมโค้งมนและสีข้อความของกล่องคำเตือน นอกจากนี้การประมวลผลสไตล์จะดำเนินการบน H4, P, UL และ .Alert-Link ต่อไปนี้เป็นซอร์สโค้ด CSS:
. alert {padding: 15px; margin-bottom: 20px; border: 1px transparent ของแข็ง; Border-Radius: 4px;}. Alert H4 {margin-top: 0; สี: สืบทอด;}. Alert .Alert-link {font-weight: ตัวหนา;}. alert> p,. {margin-top: 5px;}. Alert-Success {color: #3C763D; พื้นหลัง-สี: #DFF0D8; BORNDER-COLOR: #D6E9C6;}. Alert-Success HR {Color: #C9E2B3;}. #2B542C;}. Alert-info {color: #31708F; พื้นหลัง-สี: #d9Edf7; สีขอบ: #bce8f1;}. การแจ้งเตือน-info hr {border-top-color: #a6e1ec;}. Alert-info .Alert-link #8a6d3b; พื้นหลังสี: #fcf8e3; สีชายแดน: #faeBcc;}. การเตือนภัย HR {ชายแดนด้านบนสี: #f7e1b5;}. การเตือนการเตือน. alert-link {สี: #66512C;}. #f2dede; border-color: #EBCCD1;}. Alert-Danger HR {border-top-color: #e4b9c0;}. Alert-Danger .Alert-Link {color: #843534;};ตัวอย่างเช่น:
<div role = "Alert"> ขอแสดงความยินดีกับการดำเนินการที่ประสบความสำเร็จของคุณ! </div> <div role = "แจ้งเตือน"> โปรดป้อนรหัสผ่านที่ถูกต้อง </div> <div role = "การแจ้งเตือน"> คุณล้มเหลวสองครั้งและมีโอกาสสุดท้ายอีกครั้ง </div> <div role = "Alert"> ขออภัยรหัสผ่านของคุณถูกป้อนไม่ถูกต้อง! </div>
กล่องแจ้งเตือนที่ปิดได้
1. ผนวกชื่อคลาส Alert-Dismissable ไปยังคอนเทนเนอร์ของกล่องคำเตือนเริ่มต้น
2. เพิ่ม. close ลงในฉลากปุ่มเพื่อใช้ปุ่มปิดของกล่องคำเตือน
3. ตรวจสอบให้แน่ใจว่ามีการตั้งค่าแอตทริบิวต์ data-dismiss = "Alert" ที่กำหนดไว้ในองค์ประกอบปุ่มปิด (การปิดกล่องการแจ้งเตือนต้องใช้ JS ในการตรวจจับแอตทริบิวต์ซึ่งจะควบคุมการปิดกล่องแจ้งเตือน)
ตัวอย่าง:
<div role = "Alert"> <button type = "ปุ่ม" data-dismiss = "Alert"> × </button> ขอแสดงความยินดีกับการดำเนินการที่ประสบความสำเร็จของคุณ! </div> <divrole = "Alert"> <button type = "ปุ่ม" data-dismiss = "Alert"> × </button> โปรดป้อนรหัสผ่านที่ถูกต้อง </div> <div role = "Alert"> <button type = "ปุ่ม" data-dismiss = "Alert"> × </utkut> data-dismiss = "Alert"> × </button> ขออภัยรหัสผ่านของคุณถูกป้อนไม่ถูกต้อง! </div>
ลิงก์ไปยังกล่องแจ้งเตือน
บางครั้งคุณต้องเพิ่มลิงค์ไปยังกล่องคำเตือนเพื่อบอกให้ผู้ใช้ข้ามไปยังหน้าใหม่ ลิงค์ไปยังกล่องคำเตือนจะถูกเน้นในเฟรมเวิร์กบูตสแตรป เพิ่มชื่อคลาสเป็น. alert-link ไปยังลิงค์ที่เพิ่มลงในกล่องคำเตือน ด้านล่างคือสไตล์ CSS ของการแจ้งเตือน
.ALERT .ALERT-LINK {FONT-WEIGHT: BOLD;}/*สีข้อความของลิงก์ในกล่องคำเตือนประเภทต่าง ๆ*/. การแจ้งเตือน -Success .Alert-Link {สี: #2B542C;}. Alert-info .Alert-link {สี: #245269;} #66512C;}. Alert-Danger .Alert-Link {color: #843534;}ตัวอย่าง:
<div role = "Alert"> <strong> ทำได้ดีมาก! </strong> คุณอ่านได้สำเร็จ <a href = "#"> ข้อความการแจ้งเตือนที่สำคัญนี้ </a> </div> <div role = "Alert"> <strong> ทำได้ดีมาก! อ่าน <a href = "#"> ข้อความการแจ้งเตือนที่สำคัญนี้ </a> </div> <div role = "Alert"> <strong> ทำได้ดีมาก! role = "Alert"> <strong> ทำได้ดีมาก! </strong> คุณอ่านได้สำเร็จ <a href = "#"> ข้อความการแจ้งเตือนที่สำคัญนี้ </a> </div>
ฉันจะแนะนำมากเกี่ยวกับองค์ประกอบรูปขนาดย่อของ bootstrap และส่วนประกอบกล่องเตือนที่บทความนี้แนะนำให้คุณฟัง ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!