ระบบบูตตารางตัวอย่าง: โทรศัพท์มือถือคอมพิวเตอร์แท็บเล็ต, คอมพิวเตอร์เดสก์ทอป

ก่อนหน้านี้: Bootstrap ตารางตัวอย่างของระบบ: ขนาดกลางและอุปกรณ์ขนาดใหญ่

เราได้เห็น อุปกรณ์ขนาดกลางและขนาดใหญ่ ตอนนี้ให้เราดูอีกตัวอย่างหนึ่งเราจะทำให้มันเท่ากันเหมาะสำหรับโทรศัพท์มือถือขนาดเล็ก เราต้องการคอลัมน์แท็บเล็ตจะแบ่งออกเป็น 25% / 75% เราจะเพิ่มตัวเลือกต่อไปนี้:

<div class = "Col-SM-3 Col-MD-6-Col LG-4"> .... </ div>
<div class = "Col-SM-9 Col-MD-6-Col LG-8"> .... </ div>

ตอนนี้ให้เรารูปแบบที่แตกต่างกัน 3 คอลัมน์ตามลำดับสำหรับสามอุปกรณ์ บนโทรศัพท์มือถือของคุณก็จะถูกทิ้งไว้ถึง 25% 75% รูปแบบที่เหมาะสม บนแท็บเล็ตก็จะมีการกระจาย 50% / 50% เกี่ยวกับอุปกรณ์ viewport ขนาดใหญ่ก็จะกระจาย 33% / 66% ดูตัวอย่างด้านล่างสำหรับการตรวจสอบ (ที่นี่คอลัมน์ที่มีการกำหนดไว้สำหรับแต่ละสไตล์คุณสามารถหลีกเลี่ยงการทำเช่นนั้น.)

<! DOCTYPE html>
<html>
<head>
   <title> เช่นเงินทุน - โทรศัพท์ของคุณแท็บเล็ตสก์ท็อป </ title>
   <link href = "/ บูต / CSS / bootstrap.min.css" rel = "สไตล์ชีต">
   <script src = "/ scripts / jquery.min.js"> </ script>
   <script src = "/ บูต / js / bootstrap.min.js"> </ script>
</ head>
<body>

<ระดับ Div = "ภาชนะ">
   <h1> สวัสดีชาวโลก! </ h1>

   <ระดับ Div = "แถว">

      <div class = "Col-SM-3 Col-MD-6-Col LG-8"  
         style = "สีพื้นหลัง: # dedef8; 
         กล่องเงา: ภาพประกอบ 1px -1px 1px # 444 
         สิ่งที่ใส่เข้าไป -1px 1px 1px # 444; ">
         <p> Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ทำ 
            eiusmod tempor incididunt UT Labore et dolore Magna aliqua. Ut 
            enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris 
            ค้างคาอดีต UT aliquip EA commodo consequat 
         </ p>

         <p> Sed UT perspiciatis unde Omnis ISTE Natus ข้อผิดพลาดนั่ง voluptatem 
            accusantium doloremque laudantium, totam REM aperiam, ipsa eaque 
            Quae AB Illo inventore veritatis et กึ่ง architecto Vitae beatae 
            dicta explicabo อยู่ 
         </ p>
      </ div>

      <div class = "Col-SM-9 Col-MD-6-Col LG-4" 
         style = "สีพื้นหลัง: # dedef8;
         กล่องเงา: ภาพประกอบ 1px -1px 1px # 444 
         สิ่งที่ใส่เข้าไป -1px 1px 1px # 444; ">
         <p> Sed UT perspiciatis unde Omnis ISTE Natus ข้อผิดพลาดนั่ง voluptatem 
            accusantium doloremque laudantium
         </ p>

         <p> วัด Porro quisquam EST, Qui dolorem Ipsum Quia บังคับ Amet นั่ง, 
            consectetur, adipisci velit, SED Quia ไม่ใช่ numquam eius Modi 
            Tempora incidunt UT Labore et dolore magnam แบ่งปัน quaerat 
            voluptatem 
         </ p>
   </ div>
</ div>

</ body>
</ html>

ผลมีดังนี้

ก่อนหน้านี้: Bootstrap ตารางตัวอย่างของระบบ: ขนาดกลางและอุปกรณ์ขนาดใหญ่

ถัดไป: Bootstrap รูปแบบ

Bootstrap หลักสูตร

Bootstrap CSS

Bootstrap ส่วนประกอบเค้าโครง

Bootstrap วิดเจ็ต

Bootstrap อื่น ๆ

ระบบบูตตารางตัวอย่าง: โทรศัพท์มือถือคอมพิวเตอร์แท็บเล็ต, คอมพิวเตอร์เดสก์ทอป