Bootstrap เป็น HTML5 และ CSS3 ที่ใช้ HTML5 และ CSS3 และ CSS3 ที่ใช้ HTML, CSS และชุดเครื่องมือ JavaScript สำหรับการสร้างหน้าเว็บส่วนหน้าเว็บ มันมีเส้นโค้งการเรียนรู้ที่เป็นมิตรความเข้ากันได้ที่ยอดเยี่ยมการออกแบบที่ตอบสนองได้, กริดกริด 12 กริด, เอกสารตัวช่วยสร้างสไตล์, ปลั๊กอิน jQuery ที่กำหนดเอง, ห้องสมุดคลาสที่สมบูรณ์ตามคุณสมบัติที่น้อยลงและอื่น ๆ Bootstrap ทำให้การพัฒนาเว็บเร็วขึ้นและง่ายขึ้น
1. bootstrap ดาวน์โหลด
เว็บไซต์อย่างเป็นทางการ: http://getbootstrap.com/; เริ่มต้นกับผู้เริ่มต้น: http://getbootstrap.com/getting-started/
เราสามารถดาวน์โหลดซอร์สโค้ด bootstrap และ bootstrap ได้จากเว็บไซต์ทางการ หากคุณไม่ต้องการดาวน์โหลดคุณสามารถใช้ CDN ที่จัดทำโดย Bootstrap
2. โครงสร้างไฟล์ bootstrap
bootstrap/
├── CSS/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
├── JS/
bootstrap.js
bootstrap.min.js
fonts fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
├ดุ glyphicons-halflings-regular.woff
└── glyphics-halflings-regular.woff2
3. แม่แบบมาตรฐาน HTML ของ Bootstrap
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <!-เรียกใช้โหมดการเรนเดอร์ล่าสุดใน IE-> <meta http-equiv = "อุปกรณ์ที่ใช้งานได้ ระดับเริ่มต้น = 1 ตั้งค่าสเกลสเกล-> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1"> <title> เทมเพลตมาตรฐาน HTML ของ Bootstrap </title> <!-แนะนำ CSS หลักของ Bootstrap-> <link rel = href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-ไฟล์สไตล์ของคุณเอง-> <link href = "css/style.css" ของคุณ และด้านล่างเบราว์เซอร์ หากคุณไม่ต้องการคุณสามารถลบออก-> <!-[ถ้า lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> src = "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> </script> <! คุณต้องโทรหา jQuery ก่อน-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <! src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>
4. ชื่อ bootstrap
เช่นเดียวกับหน้า HTML ทั่วไป Bootstrap กำหนดชื่อโดยใช้แท็ก H1 ถึง H6 แต่ Bootstrap จะแทนที่สไตล์เริ่มต้นของมันเพื่อให้เอฟเฟกต์แสดงในเบราว์เซอร์ทั้งหมดเหมือนกัน กฎเฉพาะของคำจำกัดความแสดงในตารางต่อไปนี้:
<!-ชื่อเรื่องใน bootstrap-> <h1> title 1 </h1> <h2> ชื่อ 2 </h2> <!-bootstrap ใช้แท็ก <small> เพื่อสร้างคำบรรยาย-> <h1> title 1 <small> subtitle </small> </h1> <h2> ชื่อ สไตล์เดียวกัน -> <div> ชื่อเรื่อง 1 </div> <div> ชื่อ 2 </div> <div> ชื่อเรื่อง 3 </div>
หมายเหตุ: ความสูงของเส้นคำบรรยายคือ 1, น้ำหนักตัวอักษรไม่เป็นตัวหนาสีคือสีเทา (#999); คำบรรยายของ H1 ~ H3 คือ 65% ของชื่อและคำบรรยายของ H4 ~ H6 คือ 75% ของชื่อ; โปรดดูบรรทัด 407 ~ 443 ในไฟล์ bootstrap.css สำหรับรายละเอียด
5. เนื้อหา bootstrap
1) เน้นเนื้อหา
ในโครงการจริงสำหรับข้อความสำคัญบางส่วนชิ้นส่วนที่คาดว่าจะได้รับการเน้นจะได้รับการปฏิบัติในรูปแบบอื่น Bootstrap ยังทำการประมวลผลที่มีน้ำหนักเบาในส่วนนี้
โดยการเพิ่มชื่อคลาส ".lead" เพื่อเน้นย่อหน้า P ฟังก์ชั่นของมันคือการเพิ่มขนาดตัวอักษรข้อความตัวหนาข้อความและยังจัดการกับความสูงของเส้นและอัตรากำไรขั้นต้น การใช้งานมีดังนี้:
<p> ข้อความปกติ </p>
<p> Empress Text </p>
2) แสดงความสำคัญผ่านสี
ตัวอย่างเช่น:
<!-ข้อความปกติด้านล่างคือสีน้ำตาล->
<p> ข้อความปกติ </p>
3) ตัวหนาและตัวเอียง
BOLD ใช้เพื่อใช้ B-label หรือ Strong Label; ตัวเอียงใช้เพื่อใช้ EM-LABEL หรือ I-LABEL
<!-ตัวหนา-> <p> ข้อความปกติ <b> ตัวหนา </b> ข้อความปกติ </p> <p> ข้อความปกติ <strong> ตัวหนา </strong> ข้อความปกติ </p> <!-italic-> <p> ข้อความปกติ <em> italic </em> ข้อความปกติ </p> <p> ข้อความปกติ <i> italic </i>
4) การจัดตำแหน่งข้อความ
Bootstrap ควบคุมสไตล์การจัดตำแหน่งของข้อความโดยกำหนดชื่อสี่คลาส:
<p> ฉันอยู่ทางซ้าย </p> <p> ฉันอยู่ตรงกลาง </p> <p> ฉันอยู่ทางขวา </p> <p> ฉันอยู่ในแนวเดียวกันกับปลายทั้งสอง </p>
6. รายการ bootstrap
Bootstrap ให้รายชื่อหกรูปแบบตามการใช้งานตามปกติ: รายการสามัญรายการที่สั่งซื้อรายการคำอธิบายจุดรายการอินไลน์รายการนิยามและรายการนิยามแนวนอน
1) รายการปกติ
<!-รายการปกติ-> <ul> <li> รายการปกติ 1 </li> <li> รายการปกติ 2 </li></ul>
2) รายการที่สั่งซื้อ
<!-รายการเรียงลำดับ-> <ol> <li> รายการเรียงลำดับ 1 </li> <li> รายการเรียงลำดับ 2 </li> </l> <!-รายการเรียงลำดับซ้อนกัน-> <ol> <li> รายการเรียงลำดับ 1 </li>
3) ไปที่รายการ
เพิ่มชื่อคลาส ".List-Unstyled" ลงในรายการที่ไม่ได้เรียงลำดับเพื่อให้สามารถลบสไตล์รายการเริ่มต้นได้
<ol> <li> รายการเรียงลำดับ 1 </li> <li> รายการเรียงลำดับ 2 </li> </ol>
4) รายการแบบอินไลน์ (เกิดเพื่อทำการนำทางแนวนอน)
เช่นเดียวกับรายการที่ถูกกำหนดรายการอินไลน์จะถูกนำมาใช้โดยการเพิ่มชื่อคลาส ".List-inline" สลับรายการแนวตั้งด้วยรายการแนวนอนและลบกระสุน (ตัวเลข) เพื่อรักษาจอแสดงผลแนวนอน
<ul> <li> รายการแถบการนำทาง 1 </li> <li> รายการแถบการนำทาง 2 </li></ul>
5) รายการคำจำกัดความ
รายการนิยาม bootstrap จะปรับระยะห่างของเส้นขอบและเอฟเฟกต์ตัวหนาของตัวอักษร
<Dl> <dt> ปักกิ่ง </dt> <dd> เมืองหลวงของจีน </dd> <dt> เซี่ยงไฮ้ </dt> <dd> เมืองกลางแห่งชาติ, Megacity </dd> </dl>
6) รายการคำจำกัดความแนวนอน
รายการคำจำกัดความแนวนอนเป็นเหมือนรายการอินไลน์ Bootstrap สามารถเพิ่มชื่อคลาส ".dl-horizontal" ลงในแท็ก DL เพื่อให้ได้เอฟเฟกต์การแสดงผลแนวนอน
<Dl> <dt> ปักกิ่ง </dt> <dd> เมืองหลวงของจีน </dd> <dt> เซี่ยงไฮ้ </dt> <dd> เมืองกลางแห่งชาติ, Megacity </dd> </dl>
7. ตารางของ Bootstrap
Bootstrap ให้ตารางที่มี 1 สไตล์พื้นฐานและ 4 สไตล์เพิ่มเติมและตารางตอบสนอง รายละเอียดมีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> ตารางพื้นฐาน </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1/css/boots ตาราง </h3> <!-ซอร์สโค้ดหลักในการดู bootstrap.css บรรทัดไฟล์ 1402 ~ บรรทัด 1441-> <table> <thead> <tr> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> <th> Table </th> </tr> เซลล์ </td> </tr> <tr> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> </tr> </tbody> </table> <h3> ตารางการข้าม </h3> <! ชื่อเรื่อง </th> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> </tr> </thead> <tbody> <tr> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> <td> เซลล์ </td> </tr> </tbody> </tbody> เซลล์ </td> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> </tr> <tr> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> </tr> </tbody> 1464-> <table> <thead> <tr> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> </tr> </thead> <tbody> <tr> <td> เซลล์ตาราง </td> <td> tbod> <tdbody> เซลล์ </td> </tr> <tr> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> </tr> </tbody> </table> <h3> เมาส์แขวนตารางที่ไฮไลต์ </h3> <! ชื่อเรื่อง </th> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> </tr> </tbody> <tbody> <tr> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> </tr> <tr> <td> เซลล์ตาราง </td> <h3> ตารางกะทัดรัด </h3> <!-ซอร์สโค้ดหลักเห็นไฟล์ bootstrap.css 1442 ~ บรรทัด 1449-> <table> <thead> <tr> <th> ชื่อตาราง </th> <th> ชื่อตาราง> <ttr> <ttr> เซลล์ </td> <td> เซลล์ตาราง </td> </tr> <tr> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> <td> เซลล์ตาราง </td> </tr> </tbody> </table> <h3> ตารางที่วางไว้ในคอนเทนเนอร์นี้มีเอฟเฟกต์ตอบสนอง-> <div> <dable> <thead> <tr> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> </tr> </thay> <tbody> <ttr> เซลล์ </td> <td> ตารางเซลล์ </td> </tr> </tbody> </table> </div> </body> </html>
ส่วนนี้ของรหัสนี้มีตารางที่ใช้กันทั่วไปใน bootstrap และการเรนเดอร์มีดังนี้:
Bootstrap ยังมีชื่อคลาสที่แตกต่างกันห้ารายการสำหรับองค์ประกอบแถว TR ของตาราง (สำหรับซอร์สโค้ดที่เกี่ยวข้องโปรดตรวจสอบบรรทัด 1484 ถึงบรรทัด 1583 ในไฟล์ bootstrap.css) ชื่อคลาสแต่ละชั้นจะควบคุมสีพื้นหลังที่แตกต่างกันของแถว คำอธิบายเฉพาะแสดงในตารางต่อไปนี้:
ใช้งานง่ายมาก คุณจะต้องเพิ่มชื่อคลาสที่สอดคล้องกันของตารางด้านบนลงในองค์ประกอบเพื่อให้ได้เอฟเฟกต์:
<tr> <td> … </td> </tr>
สังเกต:
1. เพื่อให้ได้สถานะที่ถูกระงับคุณต้องเพิ่มคลาส HOVER TABLE HOVER ลงในแท็ก <bable>
2. นอกเหนือจาก ".active" เมื่อใช้อีกสี่ชื่อคลาสและ ".table-hover" Bootstrap ยังทำให้การตั้งค่าสไตล์ที่สอดคล้องกันสำหรับสไตล์เหล่านี้ในสถานะลอยตัว ดังนั้นหากคุณต้องการเพิ่มรูปแบบสีอื่น ๆ ในองค์ประกอบ TR คุณต้องทำการปรับที่สอดคล้องกันในตาราง ".table-hover"
หากคุณยังต้องการเรียนรู้อย่างลึก
ชุดของบทความ:
ครั้งแรกที่ฉันติดต่อกับระบบ Bootstrap Grid Magical //www.vevb.com/article/89333.htm
ครั้งแรกที่ฉันติดต่อกับ Magical Bootstrap Form //www.vevb.com/article/89330.htm
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น