1: บทนำสู่ bootstrap
Boostrap เป็นกรอบการพัฒนาส่วนหน้ายอดนิยมที่ปรับปรุงประสิทธิภาพการพัฒนาของทีมส่วนหน้าอย่างมาก Bootstrap เสร็จสิ้นส่วนประกอบเค้าโครง CSS ทั่วไปและปลั๊กอิน JavaScript ทำให้นักพัฒนาสามารถใช้งานได้ง่าย ใช้ bootstrap เพื่อสร้างหน้าตอบสนองที่สวยงามอย่างรวดเร็วและเข้ากันได้กับอุปกรณ์มือถือ
สอง: คุณสมบัติ bootstrap
จัดเตรียมชุดปลั๊กอิน CSS ที่สมบูรณ์แบบแผ่นสไตล์ที่กำหนดไว้ล่วงหน้าซึ่งเป็นชุดของตาราง JS Plug-in ที่ใช้ jQuery ระบบลบกริดที่ตอบสนองได้ยืดหยุ่น การพัฒนามือถือมือถือขึ้นอยู่กับน้อยลงและเขย่า
สาม: ใช้ bootstrap
1. ขั้นตอนที่ 1:
ดาวน์โหลด bootstrap ล่าสุดได้ที่ http://www.bootcss.com/ หลังจากการบีบอัดมีสามโฟลเดอร์ซึ่งวาง CSS, JS และแบบอักษรตามลำดับ มีไฟล์ CSS และ JavaScript รุ่นบีบอัดและคุณสามารถเลือกเวอร์ชันตามความต้องการของคุณ ใช้เวอร์ชันที่ไม่บีบอัดในระหว่างการพัฒนาและใช้เวอร์ชันบีบอัดระหว่างการเปิดตัว
2. การแสดงรหัสเทมเพลตคงที่
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua ที่เข้ากันได้" content = "IE = edge, chrome = 1"> <! name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1"> <!-แท็กสามเมตาข้างต้น * ต้องวางไว้ที่ด้านหน้าและเนื้อหาอื่น ๆ * ต้องติดตามพวกเขา! -> <title> สไตล์เทมเพลต bootstrap </title> <!-แนะนำ bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <! IE 8 ต้องการความร่วมมือในการตอบสนอง JS เพื่อให้ได้รับการสนับสนุนสำหรับการสืบค้นสื่อ repurs.js ไม่สามารถทำงานภายใต้ไฟล์: // ไฟล์พา ธ : //-> <!-[ถ้า lt ie 9] หมายความว่ามันมีผลในเบราว์เซอร์ด้านล่าง IE9-> <!-[ถ้า lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.7.2/html5shiv src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script> <! [endif]-> </head> <body> <h1> สวัสดีโลก! </h1> <!-อ้างถึงปลั๊กอิน jQuery ที่ด้านล่างเพื่อให้ได้เอฟเฟกต์แบบไดนามิก bootstrap-> <สคริปต์ src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> src = "js/bootstrap.min.js"> </script> </body> </html>
3. การใช้งานขั้นพื้นฐาน:
3.1 ระบบกริดเฟรมเวิร์ก -12 โดยรวม
แกนกลางของ bootstrap เป็นระบบ 12-raster ระบบกริด 12 แบบแบ่งพื้นที่เนื้อหาของหน้าเว็บออกเป็น 12 สำเนาตามความกว้าง นักพัฒนาเว็บสามารถรวมเข้าด้วยกันได้อย่างอิสระซึ่งอำนวยความสะดวกในการจัดวางของหน้าเว็บและทำให้เค้าโครงดูเรียบร้อยและเป็นมาตรฐาน
BootStarp จัดเตรียมคอนเทนเนอร์สไตล์ที่เรียกว่าคอนเทนเนอร์ คอนเทนเนอร์เป็นสไตล์ที่เน้นอัตโนมัติและปรับตัวสูง การใช้. container เป็นรูปแบบ div ด้านนอกสุดของเนื้อหาหน้าเว็บสามารถใช้เค้าโครงหน้าเว็บ 12 กริดได้อย่างง่ายดาย ยิ่งไปกว่านั้นระบบ 12 กริดนี้ปรับให้เข้ากับขนาดหน้าจอและ. container จะปรับความกว้างทั้งหมดและความกว้างเฉลี่ยของกริดโดยอัตโนมัติตามขนาดหน้าจอ
ความกว้างคอลัมน์สูงสุด COL-LG-N 95px ในกรณีของ> = 1200px พิกเซล, Divide .Container12 เท่ากันกับความกว้าง 95px ต่อส่วน ความกว้างของส่วนที่เหลือคือ 100%
COL-MD-N ความกว้างสูงสุด 78px; Divide .Container12 เท่ากันกับ> = 992px พิกเซลที่เหลืออยู่ 100%
ความกว้างคอลัมน์สูงสุด COL-SM-N 60px ในกรณี> = 768px พิกเซล, Divide .Container12 เท่ากันกับส่วนที่เหลือของกรณี 100%
ความกว้างคอลัมน์ Col-Xs-N เท่ากับขนาดวิวพอร์ต 12. คอนเทนเนอร์ 12 เท่ากับหน้าจอทุกขนาด
3.2 สไตล์พื้นฐาน
(1) สไตล์ H1-H6 ของ Bootstrap ถูกยกเลิกการเป็นตัวหนาและอัตรากำไรขั้นต้นบนและล่างจะถูกนิยามใหม่กับ H1-H3-H3 ด้านบน: 20px; มาร์จิ้น-ก้น-10px; H3-H6 ระยะขอบด้านบน: 10px; มาร์จิ้น-ก้น-10px;
(2) กำหนดรูปแบบการจัดตำแหน่งสี่แบบคือ. ข้อความซ้าย,. text-center, .text-right, .text-justify .Text-Justify ทั้งสองตัวอักษรภาษาอังกฤษ
(3) Bootstrap มีรูปแบบสีเริ่มต้นห้ารูปแบบ -คีย์สีน้ำเงินที่มีความสำเร็จ -ประสบความสำเร็จสีเขียว, -info ข้อมูลคำเตือนการเตือนสีน้ำเงิน, -danger สีแดงอันตราย
ส่วนประกอบ 3.3BTN +BTN-Group
<button type = "button" class = "btn btn-primary"> ปุ่มปุ่ม </ปุ่ม> การแจ้งเตือนองค์ประกอบ <div class = "Alert" class = "Alert Alert-Danger"> คำเตือนอันตราย </div>
ส่วนประกอบทั่วไปมีสี่ขนาด: Ultra-small XS, SM ขนาดเล็ก, ธรรมดาและ LG ขนาดใหญ่ ใช้เมธอดคือส่วนประกอบชื่อชื่อ <button type = "ปุ่ม" class = "btn btn-lg"> ปุ่มใหญ่พิเศษ </button> ปุ่มประเภทต่าง ๆ ของส่วนประกอบเดียวกันสามารถใช้ร่วมกันได้
<button type = "button" class = "btn btn-primary btn-lg"> ปุ่มคีย์ขนาดใหญ่พิเศษ </button> <!-btn-group-> <div> <button> home </button> <button> หน้าสอง </button> <button> หน้า 2 </button> <button> รายการ <span> </span> </pount> <ul> <li> Lenovo </li> <li> Asus </li> <li> Apple </li> </ul> </div>
3.4table Table Style:
เพิ่มองค์ประกอบหลักของ DIV ลงในองค์ประกอบตารางเพิ่ม class = "ตอบสนองตาราง" ลงใน DIV นี้สร้างตารางที่สอดคล้องกัน เมื่อ Viewport Pixel น้อยกว่า 768px แถบเลื่อนแนวนอนจะปรากฏขึ้น
<!-ตารางมีสีเว้นระยะระหว่างรายการลายตารางตารางตอบสนองตาราง Adaptive-> <div> <table> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr>
ป้าย 3.5Badge
<!-ตราป้าย-> <br/> <a href = "#"> การดูแลพิเศษ <pan> 42 </span> </a> <br/>
3.6 แถบการนำทาง
(1) แถบการนำทางแคปซูล
<ul> <li> <a href = "#"> ไดนามิก <span> 42 </span> </a> </li> <li> <a href = "#"> โปรไฟล์ </a> </li> <li> <a href = "#"> ข้อความส่วนตัว
(2) แถบนำทางฉลาก
<!-เมนูการนำทางแท็ก-> <ul> <li> <a href = "#news1" data-toggle = "tab"> ข่าว บริษัท </a> </li> <li> <a href = "#news2" data-toggle = "Tab"> ข่าวอุตสาหกรรม </a> </li> <li> data-toggle = "tab"> ประกาศ </a> </li> </ul> <div> <div id = "news1"> <ul> <li> ข่าว บริษัท </li> </ul> </div> <div id = "news2"> <ul> <li> ข่าวอุตสาหกรรม </li> </li> </li> ประกาศ </li> <li> ประกาศประกาศ </li></ul> </div> </div>
3.7 กลุ่มอินพุต
<!-การรวมปุ่มอินพุต+ปุ่ม-> <div> <อินพุต type = "text"> <span> <pution> ค้นหา </button> </span> </div>
3.8 ม้าหมุน
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "edge = edge, chrome = 1"> <meta name = "viewport" สไตล์ </title> <link href = "../ css/bootstrap.min.css" rel = "stylesheet"> <style> ร่างกาย {พื้นหลัง: #eee} .item {ตำแหน่ง: ญาติ; ความสูง: 400px} .ITEM IMG {ตำแหน่ง: ญาติ; ความกว้าง: 100%; ความสูง: 400px} .ITEM P {ตำแหน่ง: สัมบูรณ์; ด้านบน: 40%; ความกว้าง: 100%; สี: #FFF; } .ITEM H1 {ตำแหน่ง: สัมบูรณ์; ด้านบน: 20%; ความกว้าง: 100%; สี: #FFF; TEXT-ALIGN: CENTER} @Media (Max-Width: 768px) {.Slide {Width: 100%}}} </style> <!-[ถ้า lt ie 9]> <script src = "../ js/html5shiv.min.js"> </script> src = "../ js/respond.min.js"> </script> <! [endif]-> <script src = "../ js/jQuery.min.js"> </script> <script src = "../ js/bootstrap.min.js"> </script> > <!-การนำทางเลื่อน-> <ol> <li data-target = "#myCarousel" datalide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> data-slide-to = "2"> </li> </ol> <div style = "ความสูง: 400px"> <!-สไลด์แรก-> <div style = "ความสูง: 400px"> <img data-holder-rendered = "true" src = "../ images/icon1.png" 1 </div> </div> <!-สไลด์ที่สอง-> <div> <img data-holder-rendered = "true" src = "../ images/icon2.png"> <div> title2 </div> </div> <! src = "../ images/icon3.png"> <div> title3 </div> </div> <!-การนำทางแบบขวา-> <a href = "#mycarousel" data-slide = "prev"> <span aria-hidden = "true"> </span> Aria-hidden = "true"> </span> <span> ถัดไป </span> </a> </div> </div> <script> $ (ฟังก์ชั่น () {$ ('#mycarousel'). on ('slide.bs.carousel', ฟังก์ชัน () {// alert ("callback function");3.9 กลุ่มแผง
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> bootstrap หน้าอินสแตนซ์- แท็บ (แท็บ) ปลั๊กอิน </title> <link rel = "stylesheet" href = "../ css/bootstrap.min.css" src = "../ js/bootstrap.min.js"> </script> <body> <div id = "panel-group"> <!-เนื้อหาแผงปิด-> <div> <div> <h4> id = "collapseOne"> <div> เนื้อหาพาเนล </div> </div> <!-เนื้อหาพาเนลเปิด-> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "#panel-group" href = "#clinpetwo"> เนื้อหา </div> </div> </div> </body>
3.10 แบบสอบถามสื่อ
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "maximum-scale = 1.0, minimum-scale = 1.0, query </> </> </> </> < 100%; ความสูง: 200px; พื้นหลังสี: สีแดง;}/*เมื่อความกว้างสูงสุดที่น่าพอใจคือ 980px นั่นคือรูปแบบภายในที่น่าพอใจ <= 980px มีผลกระทบ*/@สื่อ (สูงสุด: 320px) {div {ตัวอักษรขนาด: 10px; พื้นหลัง: สีเหลือง การสอบถาม </div> </body> <script> window.onResize = function () {var mydiv = document.getElementsByTagname ("div") [0]; mydiv.innerhtml = document.documentelement.clientwidth;} </script> </html>สี่: สิ่งที่ควรทราบ
1. คอนเทนเนอร์, col - - (แรสเตอร์), จะต้องห่อใน div แยกต่างหากจากนั้นกำหนดเนื้อหาอื่น ๆ ในนั้น
2. หากคุณต้องการตั้งค่าคลาสหรือ ID ที่ไม่สามารถกำหนดไว้สำหรับการสืบค้นสื่อไม่สามารถกำหนดได้สำหรับองค์ประกอบและเขียนคลาสหรือ ID ของคำจำกัดความ col - - (แรสเตอร์) ลงใน div
Medio เป็นวิธีการเขียนข้อผิดพลาดในชั้นเรียนสำหรับการกำหนดข้อความค้นหาสื่อ <div> AA </div>
วิธีที่ถูกต้องในการเขียนคือ
<div> <div> aa </div> </div>
3. หากคุณใช้คอนเทนเนอร์เพื่อให้ได้การปรับความสูงคุณจะไม่สามารถเพิ่มความสูงให้กับองค์ประกอบและคุณควรตั้งค่าที่ซ่อนอยู่สำหรับองค์ประกอบหลัก
4. หลังจากตั้งค่าตำแหน่งตำแหน่งสำหรับองค์ประกอบความกว้างขององค์ประกอบคือ 0 ถ้าคุณต้องการให้องค์ประกอบอยู่กึ่งกลางคุณต้องเพิ่มความกว้าง: 100%; TEXT-ALIGN: CENTER;
5. เมื่อใช้แท็กอินพุตถ้า col - - (แรสเตอร์) ถูกกำหนดไว้สำหรับคลาสพาเรนต์ของมันคุณสามารถเพิ่มรูปแบบการควบคุมเพื่ออินพุตเพื่อตั้งค่าขนาดของอินพุตที่มีขนาดใหญ่เท่ากับคลาสแม่