ดาวน์โหลด

Bootstrap (ปัจจุบันคือ v3.3.7) มีวิธีง่ายๆ สองสามวิธีในการเริ่มต้นอย่างรวดเร็ว โดยแต่ละวิธีจะดึงดูดระดับทักษะและกรณีการใช้งานที่แตกต่างกัน อ่านเพื่อดูว่าอะไรเหมาะกับความต้องการเฉพาะของคุณ

Bootstrap CDN

ผู้คนที่jsDelivrให้การสนับสนุน CDN สำหรับ CSS และ JavaScript ของ Bootstrap เพียงใช้ลิงก์Bootstrap CDN เหล่านี้

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

ติดตั้งด้วย Bower

คุณยังสามารถติดตั้งและจัดการ Less, CSS, JavaScript และฟอนต์ของ Bootstrap โดยใช้Bower :

$ bower install bootstrap

ติดตั้งด้วย npm

คุณยังสามารถติดตั้ง Bootstrap โดยใช้npm :

$ npm install bootstrap@3

require('bootstrap')จะโหลดปลั๊กอิน jQuery ของ Bootstrap ทั้งหมดลงในวัตถุ jQuery ตัวbootstrapโมดูลเองไม่ได้ส่งออกอะไรเลย คุณสามารถโหลดปลั๊กอิน jQuery ของ Bootstrap ด้วยตนเองโดยโหลด/js/*.jsไฟล์ภายใต้ไดเร็กทอรีระดับบนสุดของแพ็คเกจ

Bootstrap package.jsonมีข้อมูลเมตาเพิ่มเติมภายใต้คีย์ต่อไปนี้:

• less- พาธไปยัง ไฟล์ซอร์สLessหลักของ Bootstrap
• style- เส้นทางไปยัง CSS ที่ไม่ย่อขนาดของ Bootstrap ที่ได้รับการคอมไพล์ล่วงหน้าโดยใช้การตั้งค่าเริ่มต้น (ไม่มีการปรับแต่ง)

ติดตั้งด้วย Composer

คุณยังสามารถติดตั้งและจัดการ Less, CSS, JavaScript และฟอนต์ของ Bootstrap โดยใช้Composer :

$ composer require twbs/bootstrap

ต้องใช้คำนำหน้าอัตโนมัติสำหรับ Less/Sass

Bootstrap ใช้Autoprefixerเพื่อจัดการกับ คำนำ หน้าผู้ขาย CSS หากคุณกำลังรวบรวม Bootstrap จากแหล่ง Less/Sass และไม่ได้ใช้ Gruntfile ของเรา คุณจะต้องรวม Autoprefixer เข้ากับกระบวนการสร้างของคุณเอง หากคุณกำลังใช้ Bootstrap ที่คอมไพล์ล่วงหน้าหรือใช้ Gruntfile ของเรา คุณไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้เพราะ Autoprefixer ถูกรวมเข้ากับ Gruntfile ของเราแล้ว

รวมอะไรบ้าง

Bootstrap สามารถดาวน์โหลดได้ในสองรูปแบบ ซึ่งคุณจะพบไดเร็กทอรีและไฟล์ต่อไปนี้ จัดกลุ่มทรัพยากรทั่วไปตามตรรกะ และจัดเตรียมรูปแบบที่คอมไพล์แล้วและย่อให้เล็กสุด

Bootstrap คอมไพล์ล่วงหน้า

เมื่อดาวน์โหลดแล้ว ให้คลายซิปโฟลเดอร์ที่บีบอัดเพื่อดูโครงสร้างของ 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/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

นี่เป็นรูปแบบพื้นฐานที่สุดของ Bootstrap: ไฟล์ที่คอมไพล์ล่วงหน้าสำหรับการใช้งานดรอปอินอย่างรวดเร็วในเกือบทุกโครงการเว็บ เราจัดเตรียม CSS และ JS ที่คอมไพล์แล้ว ( bootstrap.*) รวมถึง CSS และ JS ที่คอมไพล์แล้วและย่อ ( bootstrap.min.*) ซอร์สแมป CSS ( bootstrap.*.map) สามารถใช้ได้กับเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์บางตัว รวมแบบอักษรจาก Glyphicons เช่นเดียวกับธีม Bootstrap ที่เป็นตัวเลือก

ซอร์สโค้ด Bootstrap

การดาวน์โหลดซอร์สโค้ด Bootstrap ประกอบด้วยเนื้อหา CSS, JavaScript และฟอนต์ที่คอมไพล์ล่วงหน้า พร้อมกับซอร์ส Less, JavaScript และเอกสารประกอบ โดยเฉพาะอย่างยิ่ง ประกอบด้วยสิ่งต่อไปนี้และอื่น ๆ :

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/, js/และfonts/เป็นซอร์สโค้ดสำหรับแบบอักษร CSS, JS และไอคอนของเรา (ตามลำดับ) dist/โฟลเดอร์นี้มีทุกอย่างที่ระบุไว้ในส่วนการดาวน์โหลดที่คอมไพล์ล่วงหน้าด้านบน โฟลเดอร์ นี้docs/มีซอร์สโค้ดสำหรับเอกสารประกอบของเรา และexamples/การใช้งาน Bootstrap นอกเหนือจากนั้น ไฟล์อื่น ๆ ที่รวมอยู่ให้การสนับสนุนแพ็คเกจ ข้อมูลใบอนุญาต และการพัฒนา

รวบรวม CSS และ JavaScript

Bootstrap ใช้Gruntสำหรับระบบบิลด์ด้วยวิธีการที่สะดวกในการทำงานกับเฟรมเวิร์ก นี่คือวิธีที่เราคอมไพล์โค้ด รันการทดสอบ และอื่นๆ

การติดตั้ง Grunt

ในการติดตั้ง Grunt คุณต้องดาวน์โหลดและติดตั้ง node.js ก่อน (ซึ่งรวมถึง npm) npm ย่อมาจากnode packaged moduleและเป็นวิธีจัดการการพึ่งพาการพัฒนาผ่าน node.js

1. ติดตั้งgrunt-cliทั่วโลกด้วยnpm install -g grunt-cli.
2. ไปที่/bootstrap/ไดเร็กทอรี root จากนั้นรันnpm install. npm จะดูpackage.jsonไฟล์และติดตั้งการพึ่งพาในพื้นที่ที่จำเป็นโดยอัตโนมัติซึ่งแสดงอยู่ที่นั่น

เมื่อเสร็จแล้ว คุณจะสามารถเรียกใช้คำสั่ง Grunt ต่างๆ ได้จากบรรทัดคำสั่ง

คำสั่ง Grunt ที่พร้อมใช้งาน

grunt dist(เพียงคอมไพล์ CSS และ JavaScript)

สร้าง/dist/ไดเร็กทอรีใหม่ด้วยไฟล์ CSS และ JavaScript ที่คอมไพล์แล้วและย่อเล็กสุด ในฐานะผู้ใช้ Bootstrap นี่เป็นคำสั่งที่คุณต้องการโดยปกติ

grunt watch(นาฬิกา)

ดูไฟล์ต้นฉบับ Less และคอมไพล์ใหม่โดยอัตโนมัติไปยัง CSS ทุกครั้งที่คุณบันทึกการเปลี่ยนแปลง

grunt test(ทำการทดสอบ)

รันJSHintและรันการทดสอบQUnit แบบไม่มี ส่วนหัวใน PhantomJS

grunt docs(สร้างและทดสอบเนื้อหาเอกสาร)

สร้างและทดสอบ CSS, JavaScript และเนื้อหาอื่นๆ ที่ใช้เมื่อเรียกใช้เอกสารในเครื่องผ่านbundle exec jekyll serve.

grunt(สร้างทุกอย่างและทำการทดสอบ)

รวบรวมและลดขนาด CSS และ JavaScript สร้างเว็บไซต์เอกสาร เรียกใช้โปรแกรมตรวจสอบ HTML5 กับเอกสาร สร้างเนื้อหา Customizer ใหม่ และอีกมากมาย ต้องใช้เจคิล โดยปกติจำเป็นเฉพาะเมื่อคุณแฮ็คบน Bootstrap เท่านั้น

การแก้ไขปัญหา

หากคุณประสบปัญหาในการติดตั้งการพึ่งพาหรือการรันคำสั่ง Grunt ก่อนอื่นให้ลบ/node_modules/ไดเร็กทอรีที่สร้างโดย npm แล้วรันnpm installใหม่

แม่แบบพื้นฐาน

เริ่มต้นด้วยเทมเพลต HTML พื้นฐานนี้ หรือแก้ไขตัวอย่างเหล่านี้ เราหวังว่าคุณจะปรับแต่งเทมเพลตและตัวอย่างของเรา โดยปรับให้เหมาะกับความต้องการของคุณ

คัดลอก HTML ด้านล่างเพื่อเริ่มทำงานกับเอกสาร Bootstrap ขั้นต่ำ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

ตัวอย่าง

สร้างจากเทมเพลตพื้นฐานด้านบนด้วยองค์ประกอบมากมายของ Bootstrap เราขอแนะนำให้คุณปรับแต่งและปรับ Bootstrap เพื่อให้เหมาะกับความต้องการของแต่ละโครงการ

รับซอร์สโค้ดสำหรับทุกตัวอย่างด้านล่างโดย ดาวน์โหลด ที่เก็บ Bootstrap ตัวอย่างสามารถพบได้ในdocs/examples/ไดเร็กทอรี

การใช้กรอบงาน

เทมเพลตเริ่มต้น

ไม่มีอะไรนอกจากพื้นฐาน: คอมไพล์ CSS และ JavaScript พร้อมกับคอนเทนเนอร์

ธีม Bootstrap

โหลดธีม Bootstrap เสริมเพื่อประสบการณ์ที่ได้รับการปรับปรุง

กริด

ตัวอย่างเลย์เอาต์กริดที่มีทั้งสี่ระดับ การซ้อน และอื่นๆ อีกมากมาย

จัมโบตรอน

สร้างรอบๆ จัมโบตรอนด้วยแถบนำทางและคอลัมน์กริดพื้นฐาน

จัมโบทรอนแคบ

สร้างเพจที่กำหนดเองมากขึ้นโดยจำกัดคอนเทนเนอร์เริ่มต้นและ jumbotron ให้แคบลง

แถบนำทางที่ใช้งานจริง

แถบนำทาง

เทมเพลตพื้นฐานขั้นสูงที่มีแถบนำทางพร้อมกับเนื้อหาเพิ่มเติม

แถบนำทางด้านบนแบบคงที่

เทมเพลตพื้นฐานขั้นสูงพร้อมแถบนำทางด้านบนแบบคงที่พร้อมกับเนื้อหาเพิ่มเติม

แถบนำทางคงที่

เทมเพลตพื้นฐานขั้นสูงพร้อมแถบนำทางด้านบนแบบตายตัวพร้อมกับเนื้อหาเพิ่มเติม

ส่วนประกอบที่กำหนดเอง

ปิดบัง

เทมเพลตหน้าเดียวสำหรับสร้างโฮมเพจที่เรียบง่ายและสวยงาม

ม้าหมุน

ปรับแต่งแถบนำทางและภาพหมุน จากนั้นเพิ่มส่วนประกอบใหม่

บล็อก

เค้าโครงบล็���กแบบสองคอลัมน์อย่างง่ายพร้อมการนำทาง ส่วนหัว และประเภทที่กำหนดเอง

แผงควบคุม

โครงสร้างพื้นฐานสำหรับแดชบอร์ดผู้ดูแลระบบที่มีแถบด้านข้างและแถบนำทางคงที่

หน้าลงชื่อเข้าใช้

เค้าโครงและการออกแบบแบบฟอร์มแบบกำหนดเองสำหรับการลงชื่อเข้าใช้แบบฟอร์มอย่างง่าย

การนำทางที่สมเหตุสมผล

สร้างแถบนำทางที่กำหนดเองพร้อมลิงก์ที่เหมาะสม หัวขึ้น! ไม่เป็นมิตรกับซาฟารีมากเกินไป

ส่วนท้ายติดหนึบ

แนบส่วนท้ายที่ด้านล่างของวิวพอร์ตเมื่อเนื้อหาสั้นกว่านั้น

ส่วนท้ายติดหนึบพร้อมแถบนำทาง

แนบส่วนท้ายที่ด้านล่างของวิวพอร์ตด้วยแถบนำทางคงที่ที่ด้านบน

การทดลอง

Bootstrap ที่ไม่ตอบสนอง

ปิดใช้งานการตอบสนองของ Bootstrap ได้อย่างง่ายดายตามเอกสารของเรา

ออฟผ้าใบ

สร้างเมนูการนำทางนอกผ้าใบที่สลับได้สำหรับใช้กับ Bootstrap

เครื่องมือ

Bootlint

Bootlint คือ เครื่องมือBootstrap HTML linter อย่างเป็นทางการ จะตรวจสอบข้อผิดพลาด HTML ทั่วไปหลายรายการในหน้าเว็บที่ใช้ Bootstrap ในลักษณะ "วานิลลา" อย่างเป็นธรรมโดยอัตโนมัติ ส่วนประกอบ/วิดเจ็ตของ Vanilla Bootstrap ต้องการส่วนต่างๆ ของ DOM เพื่อให้สอดคล้องกับโครงสร้างบางอย่าง Bootlint ตรวจสอบว่าอินสแตนซ์ของส่วนประกอบ Bootstrap มีโครงสร้าง HTML อย่างถูกต้อง พิจารณาเพิ่ม Bootlint ให้กับชุดเครื่องมือการพัฒนาเว็บ Bootstrap เพื่อไม่ให้เกิดข้อผิดพลาดทั่วไปที่ทำให้การพัฒนาโครงการของคุณช้าลง

ชุมชน

ติดตามข่าวสารล่าสุดเกี่ยวกับการพัฒนา Bootstrap และเข้าถึงชุมชนด้วยแหล่งข้อมูลที่เป็นประโยชน์เหล่านี้

• อ่านและสมัครรับข้อมูลบล็อก Bootstrap อย่างเป็นทางการ
• แชทกับเพื่อน Bootstrappers โดยใช้ IRC ในirc.freenode.netเซิร์ฟเวอร์ใน## bootstrap channel
• สำหรับความช่วยเหลือในการใช้ Bootstrap ให้ถามในStackOverflow โดยใช้แท็twitter-bootstrap-3ก
• นักพัฒนาควรใช้คำสำคัญbootstrapบนแพ็คเกจที่แก้ไขหรือเพิ่มฟังก์ชันการทำงานของ Bootstrap เมื่อแจกจ่ายผ่านnpmหรือกลไกการส่งที่คล้ายคลึงกันเพื่อให้ค้นพบได้มากที่สุด
• ค้นหาตัวอย่างสร้างแรงบันดาลใจของผู้คนที่สร้างด้วย Bootstrap ที่Bootstrap Expo

คุณยังสามารถติดตาม@getbootstrap บน Twitterสำหรับข่าวซุบซิบล่าสุดและมิวสิควิดีโอที่ยอดเยี่ยม

ปิดการใช้งานการตอบสนอง

Bootstrap ปรับหน้าของคุณโดยอัตโนมัติสำหรับขนาดหน้าจอต่างๆ ต่อไปนี้เป็นวิธีปิดใช้งานคุณลักษณะนี้ เพื่อให้หน้าเว็บของคุณทำงานเหมือน ตัวอย่าง ที่ไม่ตอบสนอง

ขั้นตอนในการปิดใช้งานการตอบสนองของเพจ

1. ละเว้นวิวพอร์ตที่<meta>กล่าวถึงในเอกสาร CSS
2. แทนที่widthon the .containerสำหรับแต่ละระดับกริดด้วยความกว้างเดียว ตัวอย่างเช่นwidth: 970px !important;ตรวจสอบให้แน่ใจว่าสิ่งนี้อยู่หลัง Bootstrap CSS เริ่มต้น คุณสามารถเลือกที่จะหลีกเลี่ยง!importantด้วยข้อความค้นหาสื่อหรือตัวเลือกบางส่วนได้
3. หากใช้แถบนำทาง ให้ลบลักษณะการยุบและขยายแถบนำทางทั้งหมด
4. สำหรับเลย์เอาต์กริด ให้ใช้.col-xs-*คลาสเพิ่มเติมหรือแทนที่คลาสขนาดกลาง/ใหญ่ ไม่ต้องกังวล ตารางอุปกรณ์ขนาดเล็กพิเศษจะปรับขนาดตามความละเอียดทั้งหมด

คุณยังคงต้องการ Respond.js สำหรับ IE8 (เนื่องจากการสืบค้นสื่อของเรายังคงอยู่และจำเป็นต้องดำเนินการ) สิ่งนี้ปิดใช้งานลักษณะ "ไซต์มือถือ" ของ Bootstrap

เทมเพลต Bootstrap ที่ปิดใช้งานการตอบสนอง

เราได้นำขั้นตอนเหล่านี้ไปใช้กับตัวอย่าง อ่านซอร์สโค้ดเพื่อดูการเปลี่ยนแปลงเฉพาะที่นำไปใช้

ดูตัวอย่างที่ไม่ตอบสนอง

รองรับเบราว์เซอร์และอุปกรณ์

Bootstrap สร้างขึ้นเพื่อให้ทำงานได้ดีที่สุดในเบราว์เซอร์เดสก์ท็อปและมือถือรุ่นล่าสุด หมายความว่าเบราว์เซอร์รุ่นเก่าอาจแสดงการเรนเดอร์องค์ประกอบบางอย่างในสไตล์ที่ต่างออกไป แม้ว่าจะทำงานได้อย่างสมบูรณ์

เบราว์เซอร์ที่รองรับ

โดยเฉพาะอย่างยิ่ง เราสนับสนุนเบราว์เซอร์และแพลตฟอร์มต่อไปนี้ในเวอร์ชันล่าสุด

ไม่รองรับเบราว์เซอร์ทางเลือกที่ใช้ WebKit, Blink หรือ Gecko เวอร์ชันล่าสุด ไม่ว่าจะโดยตรงหรือผ่าน API การดูเว็บของแพลตฟอร์ม อย่างไรก็ตาม Bootstrap ควร (ในกรณีส่วนใหญ่) แสดงและทำงานอย่างถูกต้องในเบราว์เซอร์เหล่านี้เช่นกัน ข้อมูลสนับสนุนที่เฉพาะเจาะจงเพิ่มเติมมีให้ด้านล่าง

อุปกรณ์มือถือ

โดยทั่วไป Bootstrap รองรับเวอร์ชันล่าสุดของเบราว์เซอร์เริ่มต้นของแต่ละแพลตฟอร์มหลัก โปรดทราบว่าไม่รองรับพร็อกซีเบราว์เซอร์ (เช่น Opera Mini, โหมด Turbo ของ Opera Mobile, UC Browser Mini, Amazon Silk)

เบราว์เซอร์เดสก์ท็อป

ในทำนองเดียวกัน เวอร์ชันล่าสุดของเบราว์เซอร์เดสก์ท็อปส่วนใหญ่ได้รับการสนับสนุน

บน Windows เรารองรับ Internet Explorer 8-11

สำหรับ Firefox นอกเหนือจากรุ่นปกติล่าสุดที่เสถียรแล้ว เรายังสนับสนุนFirefox เวอร์ชันExtended Support Release (ESR) ล่าสุดอีกด้วย

อย่างไม่เป็นทางการ Bootstrap ควรมีลักษณะและทำงานได้ดีพอใน Chromium และ Chrome สำหรับ Linux, Firefox สำหรับ Linux และ Internet Explorer 7 รวมถึง Microsoft Edge แม้ว่าจะไม่รองรับอย่างเป็นทางการก็ตาม

สำหรับรายการบั๊กของเบราว์เซอร์ที่ Bootstrap ต้องต่อสู้ โปรดดูที่บั๊ก Wall of browser ของเรา

Internet Explorer 8 และ 9

Internet Explorer 8 และ 9 ยังได้รับการสนับสนุน อย่างไรก็ตาม โปรดทราบว่าคุณสมบัติ CSS3 และองค์ประกอบ HTML5 บางอย่างไม่ได้รับการสนับสนุนอย่างเต็มที่จากเบราว์เซอร์เหล่านี้ นอกจากนี้Internet Explorer 8 ยังต้องการการใช้Respond.jsเพื่อเปิดใช้งานการสนับสนุนการสืบค้นสื่อ

ไปที่ ฉันสามารถใช้...เพื่อดูรายละเอียดเกี่ยวกับการสนับสนุนเบราว์เซอร์ของคุณสมบัติ CSS3 และ HTML5

Internet Explorer 8 และ Respond.js

ระวังคำเตือนต่อไปนี้เมื่อใช้ Respond.js ในสภาพแวดล้อมการพัฒนาและการใช้งานจริงสำหรับ Internet Explorer 8

Respond.js และ CSS ข้ามโดเมน

การใช้ Respond.js กับ CSS ที่โฮสต์บนโดเมน (ย่อย) อื่น (เช่น บน CDN) จำเป็นต้องมีการตั้งค่าเพิ่มเติม ดูเอกสาร Respond.jsสำหรับรายละเอียด

Respond.js และfile://

เนื่องจากกฎความปลอดภัยของเบราว์เซอร์ Respond.js จึงไม่ทำงานกับหน้าที่ดูผ่านfile://โปรโตคอล (เช่น เมื่อเปิดไฟล์ HTML ในเครื่อง) หากต้องการทดสอบคุณลักษณะที่ตอบสนองใน IE8 ให้ดูหน้าเว็บของคุณผ่าน HTTP(S) ดูเอกสาร Respond.jsสำหรับรายละเอียด

Respond.js และ@import

Respond.js ไม่ทำงานกับ CSS ที่อ้างอิงผ่าน@import. โดยเฉพาะอย่างยิ่ง การกำหนดค่าบางอย่างของ Drupal นั้นใช้@import. ดูเอกสาร Respond.jsสำหรับรายละเอียด

Internet Explorer 8 และขนาดกล่อง

IE8 ไม่รองรับอย่างเต็มที่box-sizing: border-box;เมื่อรวมกับmin-width, max-width, min-height, หรือmax-height. ด้วยเหตุผลดังกล่าว ณ เวอร์ชัน 3.0.1 เราจึงไม่ได้ใช้max-widthบน.containers อีกต่อไป

Internet Explorer 8 และ @font-face

IE8 มีปัญหาบางอย่าง@font-faceเมื่อรวมกับ:before. Bootstrap ใช้ชุดค่าผสมนั้นกับ Glyphicons หากหน้าถูกแคชและโหลดโดยไม่วางเมาส์เหนือหน้าต่าง (เช่น กดปุ่มรีเฟรชหรือโหลดบางอย่างใน iframe) หน้านั้นจะแสดงผลก่อนที่ฟอนต์จะโหลด การวางเมาส์เหนือหน้า (เนื้อหา) จะแสดงไอคอนบางส่วน และการวางเมาส์เหนือไอคอนที่เหลือจะแสดงไอคอนเหล่านั้นด้วย ดูปัญหา #13863สำหรับรายละเอียด

โหมดความเข้ากันได้ของ IE

Bootstrap ไม่ได้รับการสนับสนุนในโหมดความเข้ากันได้ของ Internet Explorer รุ่นเก่า เพื่อให้แน่ใจว่าคุณกำลังใช้โหมดการแสดงผลล่าสุดสำหรับ IE ให้พิจารณารวม<meta>แท็กที่เหมาะสมในหน้าเว็บของคุณ:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ยืนยันโหมดเอกสารโดยเปิดเครื่องมือแก้ไขข้อบกพร่อง: กดF12และเลือก "โหมดเอกสาร"

แท็กนี้รวมอยู่ในเอกสารและตัวอย่างทั้งหมดของ Bootstrap เพื่อให้แน่ใจว่าการแสดงผลที่ดีที่สุดที่เป็นไปได้ใน Internet Explorer แต่ละเวอร์ชันที่รองรับ

ดูคำถาม StackOverflow นี้สำหรับข้อมูลเพิ่มเติม

Internet Explorer 10 ใน Windows 8 และ Windows Phone 8

Internet Explorer 10 ไม่ได้แยกความกว้างของอุปกรณ์จาก ความ กว้างของวิวพอร์ตดังนั้นจึงไม่สามารถใช้การสืบค้นสื่อใน CSS ของ Bootstrap ได้อย่างถูกต้อง โดยปกติ คุณเพียงแค่เพิ่มข้อมูลโค้ดสั้นๆ ของ CSS เพื่อแก้ไขปัญหานี้:

@-ms-viewport       { width: device-width; }

อย่างไรก็ตาม วิธีนี้ใช้ไม่ได้กับอุปกรณ์ที่ใช้ Windows Phone 8 เวอร์ชันที่เก่ากว่าUpdate 3 (aka GDR3)เนื่องจากจะทำให้อุปกรณ์ดังกล่าวแสดงมุมมองเดสก์ท็อปเป็นส่วนใหญ่ แทนที่จะเป็นมุมมอง "โทรศัพท์" ที่แคบ ในการแก้ไขปัญหานี้ คุณจะต้องรวม CSS และ JavaScript ต่อไปนี้เพื่อแก้ไขจุดบกพร่อง

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

สำหรับข้อมูลเพิ่มเติมและแนวทางการใช้งาน โปรดอ่านWindows Phone 8 และ Device-Width

เรารวมสิ่งนี้ไว้ในเอกสารและตัวอย่างทั้งหมดของ Bootstrap เพื่อเป็นการสาธิต

การปัดเศษเปอร์เซ็นต์ของ Safari

เอ็นจิ้นการเรนเดอร์ของ Safari เวอร์ชันก่อน v7.1 สำหรับ OS X และ Safari สำหรับ iOS v8.0 มีปัญหากับจำนวนตำแหน่งทศนิยมที่ใช้ใน.col-*-1คลาสกริด ของเรา ดังนั้นหากคุณมีคอลัมน์กริดเดี่ยว 12 คอลัมน์ คุณจะสังเกตเห็นว่ามันสั้นเมื่อเทียบกับแถวของคอลัมน์อื่นๆ นอกจากการอัปเกรด Safari/iOS แล้ว คุณยังมีทางเลือกในการแก้ปัญหา:

• เพิ่ม.pull-rightในคอลัมน์กริดสุดท้ายของคุณเพื่อรับการจัดตำแหน่งแบบฮาร์ด-ขวา
• ปรับแต่งเปอร์เซ็นต์ของคุ��ด้วยตนเองเพื่อให้ได้การปัดเศษที่สมบูรณ์แบบสำหรับ Safari (ยากกว่าตัวเลือกแรก)

โมดอล แถบนำทาง และคีย์บอร์ดเสมือน

ล้นและเลื่อน

overflow: hiddenการสนับสนุน<body>องค์ประกอบค่อนข้างจำกัดใน iOS และ Android ด้วยเหตุนี้ เมื่อคุณเลื่อนผ่านด้านบนหรือด้านล่างของโมดอลในเบราว์เซอร์ของอุปกรณ์เหล่านั้น<body>เนื้อหาจะเริ่มเลื่อน ดูข้อบกพร่องของ Chrome #175502 (แก้ไขใน Chrome v40) และ ข้อบกพร่อง ของWebKit #153852

ช่องข้อความ iOS และการเลื่อน

สำหรับ iOS 9.3 ในขณะที่โมดอลเปิดอยู่ หากการสัมผัสครั้งแรกของท่าทางการเลื่อนอยู่ภายในขอบเขตของข้อความ<input>หรือ a เนื้อหา <textarea>ที่<body>อยู่ใต้โมดัลนั้นจะถูกเลื่อนแทนที่จะเป็นโมดอลเอง ดู ข้อบกพร่อง ของWebKit #153856

แป้นพิมพ์เสมือน

นอกจากนี้ โปรดทราบว่าหากคุณใช้แถบนำทางแบบตายตัวหรือใช้อินพุตภายในโมดอล iOS มีข้อบกพร่องในการเรนเดอร์ที่ไม่อัปเดตตำแหน่งขององค์ประกอบคงที่เมื่อมีการเรียกใช้แป้นพิมพ์เสมือน วิธีแก้ปัญหาบางประการสำหรับสิ่งนี้ ได้แก่ การเปลี่ยนองค์ประกอบของคุณเป็นposition: absoluteหรือเรียกใช้ตัวจับเวลาที่โฟกัสเพื่อพยายามแก้ไขตำแหน่งด้วยตนเอง Bootstrap ไม่ได้จัดการสิ่งนี้ ดังนั้นจึงขึ้นอยู่กับคุณที่จะตัดสินใจว่าโซลูชันใดดีที่สุดสำหรับแอปพลิเคชันของคุณ

Navbar Dropdowns

องค์ประกอบ.dropdown-backdropนี้ไม่ได้ใช้บน iOS ในการนำทางเนื่องจากความซับซ้อนของการทำดัชนี z ดังนั้น ในการปิดดรอปดาวน์ในแถบนำทาง คุณต้องคลิกองค์ประกอบแบบเลื่อนลงโดยตรง (หรือองค์ประกอบอื่นใดที่จะทำให้เกิดเหตุการณ์การคลิกใน iOS )

การซูมเบราว์เซอร์

การซูมหน้าอย่างหลีกเลี่ยงไม่ได้นำเสนอสิ่งประดิษฐ์ในองค์ประกอบบางอย่าง ทั้งใน Bootstrap และส่วนที่เหลือของเว็บ เราอาจแก้ไขได้ (ค้นหาก่อนแล้วจึงเปิดปัญหาหากจำเป็น) ทั้งนี้ขึ้นอยู่กับปัญหา อย่างไรก็ตาม เรามักจะเพิกเฉยต่อสิ่งเหล่านี้ เนื่องจากมักไม่มีวิธีแก้ปัญหาโดยตรงนอกจากวิธีแก้ปัญหาชั่วคราวที่เป็นการแฮ็ก

หนึบ:hover/ :focusบนมือถือ

แม้ว่าการโฮเวอร์จริงจะไม่สามารถทำได้บนหน้าจอสัมผัสส่วนใหญ่ แต่เบราว์เซอร์มือถือส่วนใหญ่จะเลียนแบบการสนับสนุนการโฮเวอร์และทำให้:hover"เหนียว" กล่าวอีกนัยหนึ่ง:hoverสไตล์เริ่มใช้หลังจากแตะองค์ประกอบและหยุดใช้หลังจากผู้ใช้แตะองค์ประกอบอื่นเท่านั้น ซึ่งอาจทำให้:hoverสถานะของ Bootstrap กลายเป็น "ติด" อย่างไม่พึงปรารถนาบนเบราว์เซอร์ดังกล่าว เบราว์เซอร์มือถือบางตัวยังทำให้:focusติดหนึบเช่นเดียวกัน ขณะนี้ยังไม่มีวิธีแก้ปัญหาง่ายๆ สำหรับปัญหาเหล่านี้นอกจากการนำสไตล์ดังกล่าวออกทั้งหมด

การพิมพ์

แม้แต่ในเบราว์เซอร์สมัยใหม่บางตัว การพิมพ์ก็อาจดูแปลกไป

โดยเฉพาะอย่างยิ่ง ใน Chrome v32 และโดยไม่คำนึงถึงการตั้งค่าระยะขอบ Chrome จะใช้ความกว้างของวิวพอร์ตที่แคบกว่าขนาดกระดาษจริงอย่างมากเมื่อแก้ไขปัญหาการสืบค้นสื่อขณะพิมพ์หน้าเว็บ ซึ่งอาจส่งผลให้กริดขนาดเล็กพิเศษของ Bootstrap ถูกเปิดใช้งานโดยไม่คาดคิดเมื่อทำการพิมพ์ ดูปัญหา #12078และข้อบกพร่องของ Chrome #273306สำหรับรายละเอียดบางอย่าง วิธีแก้ปัญหาที่แนะนำ:

• โอบรับกริดที่มีขนาดเล็กพิเศษ และตรวจสอบให้แน่ใจว่าหน้าของคุณดูยอมรับได้ภายใต้ตารางนั้น
• ปรับแต่งค่าของ@screen-*ตัวแปร Less เพื่อให้กระดาษเครื่องพิมพ์ของคุณถือว่ามีขนาดใหญ่กว่าขนาดเล็กพิเศษ
• เพิ่มคิวรีสื่อแบบกำหนดเองเพื่อเปลี่ยนเบรกพอยต์ขนาดกริดสำหรับสื่อสิ่งพิมพ์เท่านั้น

นอกจากนี้ ใน Safari v8.0 ความกว้างคงที่.containerอาจทำให้ Safari ใช้ขนาดแบบอักษรที่เล็กผิดปกติเมื่อพิมพ์ ดู#14868และ จุด บกพร่องของ WebKit #138192สำหรับรายละเอียดเพิ่มเติม วิธีแก้ปัญหาที่เป็นไปได้ประการหนึ่งสำหรับสิ่งนี้คือการเพิ่ม CSS ต่อไปนี้:

@media print {
  .container {
    width: auto;
  }
}

เบราว์เซอร์หุ้น Android

นอกกรอบ Android 4.1 (และแม้แต่รุ่นใหม่ที่เห็นได้ชัด) จะมาพร้อมกับแอปเบราว์เซอร์เป็นเว็บเบราว์เซอร์เริ่มต้นที่เลือกไว้ (ซึ่งต่างจาก Chrome) น่าเสียดายที่แอปเบราว์เซอร์มีข้อบกพร่องมากมายและไม่สอดคล้องกับ CSS โดยทั่วไป

เลือกเมนู

ใน<select>องค์ประกอบต่างๆ เบราว์เซอร์หุ้น Android จะไม่แสดงการควบคุมด้านข้างหากมีborder-radiusและ/หรือborderนำไปใช้ (ดู รายละเอียด คำถาม StackOverflow นี้ ) ใช้ข้อมูลโค้ดด้านล่างเพื่อลบ CSS ที่ละเมิดและแสดงผล<select>เป็นองค์ประกอบที่ไม่มีสไตล์บนเบราว์เซอร์สต็อก Android การดมกลิ่นตัวแทนผู้ใช้ช่วยหลีกเลี่ยงการรบกวนเบราว์เซอร์ Chrome, Safari และ Mozilla

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ต้องการดูตัวอย่าง? ลองดูตัวอย่าง JS Bin นี้

เครื่องมือตรวจสอบ

เพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดให้กับเบราว์เซอร์รุ่นเก่าและบั๊กกี้ Bootstrap ใช้การแฮ็กของเบราว์เซอร์ CSSในหลาย ๆ ที่เพื่อกำหนดเป้าหมาย CSS พิเศษไปยังเบราว์เซอร์บางรุ่นเพื่อแก้ไขข้อบกพร่องในเบราว์เซอร์เอง การแฮ็กเหล่านี้ทำให้ผู้ตรวจสอบ CSS บ่นว่าไม่ถูกต้อง ในสองสามแห่ง เรายังใช้คุณสมบัติ CSS ที่ล้ำหน้าซึ่งยังไม่ได้มาตรฐานอย่างสมบูรณ์ แต่สิ่งเหล่านี้ใช้เพื่อการปรับปรุงแบบก้าวหน้าเท่านั้น

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

เอกสาร HTML ของเราก็มีคำเตือนเกี่ยวกับการตรวจสอบ HTML ที่ไม่สำคัญและไม่เป็นผลสืบเนื่องเนื่องจากการรวมวิธีแก้ไขปัญหาชั่วคราวสำหรับ จุดบกพร่อง ของFirefox

การสนับสนุนบุคคลที่สาม

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

ขนาดกล่อง

ซอฟต์แวร์ของบริษัทอื่นบางตัว รวมถึง Google Maps และ Google Custom Search Engine ขัดแย้งกับ Bootstrap เนื่องจาก* { box-sizing: border-box; }กฎที่ทำให้paddingไม่กระทบต่อความกว้างที่คำนวณได้สุดท้ายขององค์ประกอบ เรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบกล่องและขนาดที่ CSS Tricks

ขึ้นอยู่กับบริบท คุณอาจแทนที่ตามความจำเป็น (ตัวเลือก 1) หรือรีเซ็ตขนาดกล่องสำหรับภูมิภาคทั้งหมด (ตัวเลือก 2)

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

การเข้าถึง

Bootstrap ปฏิบัติตามมาตรฐานเว็บทั่วไปและ—ด้วยความพยายามเพียงเล็กน้อย—สามารถใช้เพื่อสร้างไซต์ที่สามารถเข้าถึงได้โดยผู้ที่ใช้AT

ข้ามการนำทาง

หากการนำทางของคุณมีลิงก์จำนวนมากและมาก่อนเนื้อหาหลักใน DOM ให้เพิ่มSkip to main contentลิงก์ก่อนการนำทาง (สำหรับคำอธิบายง่ายๆ โปรดดูบทความโครงการ A11Y เกี่ยวกับลิงก์การนำทางข้าม ) การใช้.sr-onlyชั้นเรียนจะซ่อนลิงก์ข้ามด้วยสายตา และ.sr-only-focusableชั้นเรียนจะตรวจสอบให้แน่ใจว่าลิงก์นั้นมองเห็นได้เมื่อโฟกัสแล้ว (สำหรับผู้ใช้แป้นพิมพ์ที่มองเห็น)

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

หัวเรื่องซ้อน

เมื่อซ้อนส่วนหัว ( <h1>- <h6>) ส่วนหัวเอกสารหลักของคุณควรเป็น<h1>. ส่วนหัวที่ตามมาควรใช้อย่างมีเหตุมีผล<h2>- <h6>เพื่อให้โปรแกรมอ่านหน้าจอสามารถสร้างสารบัญสำหรับหน้าเว็บของคุณได้

เรียนรู้เพิ่มเติมที่HTML CodeSnifferและ AccessAbility ของPenn State

ความคมชัดของสี

ในปัจจุบัน การผสมสีเริ่มต้นบางส่วนที่มีใน Bootstrap (เช่น คลาส ปุ่มที่มีสไตล์ ต่างๆ สีที่เน้นโค้ดบางส่วนที่ใช้สำหรับบล็อกโค้ดพื้นฐาน คลาสตัวช่วย พื้น.bg-primary หลังตามบริบทและสีลิงก์เริ่มต้นเมื่อใช้บนพื้นหลังสีขาว) มีอัตราส่วนคอนทราสต์ต่ำ (ต่ำกว่าอัตราส่วนที่แนะนำ 4.5:1 ) ซึ่งอาจทำให้เกิดปัญหากับผู้ใช้ที่มีความบกพร่องทางสายตาหรือผู้ที่ตาบอดสี อาจจำเป็นต้องแก้ไขสีเริ่มต้นเหล่านี้เพื่อเพิ่มคอนทราสต์และความชัดเจน

แหล่งข้อมูลเพิ่มเติม

• bookmarklet "HTML Codesniffer" สำหรับระบุปัญหาการเข้าถึง
• ส่วนขยายเครื่องมือสำหรับนักพัฒนาการเข้าถึงของ Chrome
• ตัววิเคราะห์ความคมชัดของสี
• โครงการ A11Y
• เอกสารการเข้าถึง MDN

คำถามที่พบบ่อยเกี่ยวกับใบอนุญาต

Bootstrap เปิดตัวภายใต้ลิขสิทธิ์ MIT และเป็นลิขสิทธิ์ 2016 Twitter ต้มให้เป็นชิ้นเล็ก ๆ สามารถอธิบายได้โดยมีเงื่อนไขดังต่อไปนี้

คุณต้อง:

• เก็บใบอนุญาตและประกาศลิขสิทธิ์ไว้ในไฟล์ CSS และ JavaScript ของ Bootstrap เมื่อคุณใช้งานในงานของคุณ

อนุญาตให้คุณ:

• ดาวน์โหลดและใช้ Bootstrap ได้อย่างอิสระไม่ว่าทั้งหมดหรือบางส่วน เพื่อวัตถุประสงค์ส่วนตัว ส่วนตัว ภายในบริษัท หรือเชิงพาณิชย์
• ใช้ Bootstrap ในแพ็คเกจหรือการแจกแจงที่คุณสร้าง
• แก้ไขซอร์สโค้ด
• ให้อนุญาตช่วงเพื่อแก้ไขและแจกจ่าย Bootstrap ให้กับบุคคลที่สามที่ไม่รวมอยู่ในใบอนุญาต

ห้ามมิให้คุณ:

• ถือผู้เขียนและเจ้าของใบอนุญาตรับผิดชอบต่อความเสียหายเนื่องจาก Bootstrap มีให้โดยไม่มีการรับประกัน
• ถือผู้สร้างหรือผู้ถือลิขสิทธิ์ของ Bootstrap ที่ต้องรับผิด
• แจกจ่าย Bootstrap ส่วนใด ๆ โดยไม่มีการระบุแหล่งที่มาที่เหมาะสม
• ใช้เครื่องหมายใด ๆ ที่เป็นของ Twitter ในลักษณะที่อาจระบุหรือบอกเป็นนัยว่า Twitter รับรองการแจกจ่ายของคุณ
• ใช้เครื่องหมายใด ๆ ที่เป็นของ Twitter ในลักษณะที่อาจระบุหรือบอกเป็นนัยว่าคุณได้สร้างซอฟต์แวร์ Twitter ที่เป็นปัญหา

ไม่ต้องการให้คุณ:

• รวมแหล่งที่มาของ Bootstrap เองหรือการแก้ไขใด ๆ ที่คุณได้ทำขึ้นในการแจกจ่ายซ้ำใด ๆ ที่คุณอาจรวบรวมซึ่งรวมถึง
• ส่งการเปลี่ยนแปลงที่คุณทำกับ Bootstrap กลับไปที่โครงการ Bootstrap (แม้ว่าข้อเสนอแนะดังกล่าวจะได้รับการสนับสนุน)

ใบอนุญาต Bootstrap แบบเต็มจะอยู่ในที่เก็บโปรเจ็กต์สำหรับข้อมูลเพิ่มเติม

คำแปล

สมาชิกชุมชนได้แปลเอกสารของ Bootstrap เป็นภาษาต่างๆ ไม่มีการสนับสนุนอย่างเป็นทางการและอาจไม่ทันสมัยเสมอไป

• Bootstrap 中文档 (ภาษาจีน)
• Bootstrap 3 中文手冊 (จีน (ดั้งเดิม))
• Bootstrap på Dansk (เดนมาร์ก)
• Bootstrap en Français (ฝรั่งเศส)
• Bootstrap auf Deutsch (เยอรมัน)
• Bootstrap ใน Italiano (อิตาลี)
• Bootstrap 한국어 (เกาหลี)
• Bootstrap em Português do Brasil (โปรตุเกสแบบบราซิล)
• Bootstrap по-русски (รัสเซีย)
• Bootstrap en Español (สเปน)
• Türkçe Bootstrap (ตุรกี)
• Bootstrap українською (ยูเครน)
• Bootstrap bằng tiếng Việt (เวียดนาม)

เราไม่ได้ช่วยจัดระเบียบหรือโฮสต์การแปล เราแค่เชื่อมโยงไปยังการแปล

เสร็จสิ้นการแปลใหม่หรือดีกว่า? เปิดคำขอดึงเพื่อเพิ่มลงในรายการของเรา