หลังจากดาวน์โหลด bootstrap 3 ชุดสมบูรณ์จากhttp://getbootstrap.comฉันสังเกตเห็นว่ามีไฟล์ css แยกต่างหากสำหรับธีม วิธีการใช้ประโยชน์จากมัน? กรุณาอธิบาย?
ฉันรวมอยู่bootstrap-theme.cssในโครงการบูทสแตรปที่มีอยู่ของฉัน แต่ก็ไม่มีความแตกต่างในผลลัพธ์
หลังจากดาวน์โหลด bootstrap 3 ชุดสมบูรณ์จากhttp://getbootstrap.comฉันสังเกตเห็นว่ามีไฟล์ css แยกต่างหากสำหรับธีม วิธีการใช้ประโยชน์จากมัน? กรุณาอธิบาย?
ฉันรวมอยู่bootstrap-theme.cssในโครงการบูทสแตรปที่มีอยู่ของฉัน แต่ก็ไม่มีความแตกต่างในผลลัพธ์
คำตอบ:
เมื่อดาวน์โหลด Bootstrap 3.x คุณจะได้รับbootstrap.cssและbootstrap-theme.css (ไม่ต้องพูดถึงเวอร์ชันย่อของไฟล์เหล่านี้ที่มีอยู่ด้วย)
bootstrap.cssมีสไตล์อย่างสมบูรณ์และพร้อมใช้งานหากเป็นความต้องการของคุณ มันอาจจะค่อนข้างเรียบง่าย แต่ก็พร้อมและอยู่ตรงนั้น
คุณไม่จำเป็นต้องใช้ bootstrap-theme.css หากคุณไม่ต้องการและสิ่งต่าง ๆ ก็ใช้ได้
bootstrap-theme.cssเป็นเพียงชื่อของไฟล์ที่พยายามแนะนำ: มันเป็นธีมสำหรับ bootstrap ที่ถูกพิจารณาอย่างสร้างสรรค์ 'ธีม bootstrap' ชื่อของไฟล์ทำให้เกิดความสับสนเล็กน้อยเนื่องจากฐานbootstrap.cssมีการใส่สไตล์ไว้แล้วและสำหรับหนึ่งจะถือว่าสไตล์นั้นเป็นค่าเริ่มต้น แต่ข้อสรุปนั้นเห็นได้ชัดว่าไม่ถูกต้องเนื่องจากสิ่งต่าง ๆ ที่กล่าวไว้ในส่วนตัวอย่างของเอกสารประกอบ Bootstrap เกี่ยวกับbootstrap-theme.cssไฟล์นี้:
"โหลดธีม Bootstrap ที่เป็นตัวเลือกเพื่อรับประสบการณ์ที่ดียิ่งขึ้น"
อ้างข้างต้นจะพบได้ที่นี่http://getbootstrap.com/getting-started/#examplesบนภาพขนาดเล็กของการเชื่อมโยงที่ไปยังหน้าตัวอย่างนี้http://getbootstrap.com/examples/theme/ แนวคิดก็คือว่าbootstrap-theme.cssเป็นธีมบูตและก็ไม่จำเป็น
เกี่ยวกับรูปแบบที่ BootSwatch.com นี้: bootstrap-theme.cssธีมเหล่านี้จะไม่ดำเนินการเช่น BootSwatch bootstrap.cssรูปแบบมีการปรับเปลี่ยนรุ่นของเดิม ดังนั้นคุณไม่ควรใช้ชุดรูปแบบจาก BootSwatch และbootstrap-theme.cssไฟล์ในเวลาเดียวกัน
เกี่ยวกับธีมที่คุณกำหนดเอง: คุณอาจเลือกที่จะแก้ไขbootstrap-theme.cssเมื่อสร้างธีมของคุณเอง การทำเช่นนั้นอาจทำให้ง่ายต่อการเปลี่ยนแปลงการจัดแต่งทรงผมโดยไม่ตั้งใจทำลายความดีงามของ Bootstrap ในตัว
สำหรับตัวอย่างของสไตล์ css ให้ดูที่: http://getbootstrap.com/examples/theme/
หากคุณต้องการดูว่าตัวอย่างดูอย่างไรโดยไม่มีไฟล์ bootstrap-theme.css เปิดเครื่องมือนักพัฒนาเบราว์เซอร์ของคุณและลบลิงก์จาก <head> ของตัวอย่างจากนั้นคุณสามารถเปรียบเทียบได้
ฉันรู้ว่านี่เป็นคำถามเก่า แต่โพสต์ไว้ในกรณีที่ใคร ๆ กำลังมองหาตัวอย่างว่ามันเป็นอย่างไร
ปรับปรุง
bootstrap.css = css framework หลัก (กริด, สไตล์พื้นฐาน, ฯลฯ )
bootstrap-theme.css= สไตล์ที่เพิ่มขึ้น (ปุ่ม 3D, การไล่ระดับสีเป็นต้น) ไฟล์นี้เป็นทางเลือกและไม่มีผลต่อการทำงานของ bootstrap เลยเพียงแค่เพิ่มลักษณะที่ปรากฏ
อัปเดต 2
ด้วยการเปิดตัวของ Bootstrap v3.2.0 ได้เพิ่มตัวเลือกในการดูชุดรูปแบบ css บนหน้าเอกสาร หากคุณไปที่หนึ่งในหน้าเอกสาร ( css , components , javascript ) คุณควรเห็นลิงค์ "ดูตัวอย่างธีม" ที่ด้านล่างของ nav ด้านข้างซึ่งคุณสามารถใช้เพื่อเปิดและปิดชุดรูปแบบ css
bootstrap.cssด้วยธีมจาก Bootswatch.com เหมือนที่เว็บไซต์บอกไว้และฉันก็ยังสามารถใช้งานbootstrap-theme.cssได้แม้กระทั่งกับธีม Bottswatch?
bootstrap-themeกับ Bootswatch ได้ มันทำให้เว็บไซต์ของฉันยุ่งอยู่แล้ว
อย่างแรกbootstrap-theme.cssคือไม่มีอะไรอื่นนอกจากรูปแบบ Bootstrap 2.x ใน Bootstrap 3 หากคุณต้องการใช้จริงๆเพียงแค่เพิ่มมันเข้าไปด้วยbootstrap.css(เวอร์ชั่นย่อจะทำงานได้เช่นกัน)
Bootstrap-theme.css เป็นไฟล์ CSS เพิ่มเติมซึ่งเป็นทางเลือกให้คุณใช้ มันให้เอฟเฟกต์สามมิติบนปุ่มและองค์ประกอบอื่น ๆ
ตามที่ระบุไว้โดยคนอื่น ๆ ชื่อไฟล์bootstrap-theme.cssสับสนมาก ฉันจะเลือกบางอย่างเช่นbootstrap-3d.cssหรือbootstrap-fancy.cssซึ่งจะอธิบายเพิ่มเติมเกี่ยวกับสิ่งที่มันทำจริง สิ่งที่โลกเห็นว่าเป็น "ธีม Bootstrap" เป็นสิ่งที่คุณจะได้รับจาก BootSwatch ซึ่งเป็นสัตว์ร้ายที่แตกต่างกันโดยสิ้นเชิง
ด้วยที่กล่าวไว้เอฟเฟ็กต์ค่อนข้างดี - การไล่ระดับสีและเงาและอื่น ๆ น่าเสียดายที่ไฟล์นี้จะสร้างความเสียหายให้กับ BootSwatch Themes ดังนั้นฉันจึงตัดสินใจที่จะขุดลงไปในสิ่งที่จะทำให้มันเล่นได้ดีกับพวกเขา
Bootstrap-theme.css ถูกสร้างขึ้นจากไฟล์theme.lessในแหล่ง Bootstrap องค์ประกอบที่ได้รับผลกระทบคือ (ณ Bootstrap v3.2.0):
ไฟล์ theme.less ขึ้นอยู่กับ:
@import "variables.less";
@import "mixins.less";รหัสใช้สีที่กำหนดไว้ใน variables.less ในหลาย ๆ ที่ตัวอย่างเช่น:
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}นี่เป็นเหตุผลที่ bootstrap-theme.css ทำให้ชุดรูปแบบ BootSwatch ยุ่งเหยิงอย่างสิ้นเชิง ข่าวดีก็คือว่า BootSwatch Themes ถูกสร้างขึ้นจากไฟล์แปรปรวนดังนั้นคุณสามารถสร้าง bootstrap-theme.css สำหรับ BootSwatch Theme ของคุณได้
วิธีที่ถูกต้องที่จะทำคือการอัพเดตกระบวนการสร้างธีม แต่ที่นี่เป็นวิธีที่รวดเร็วและสกปรก แทนที่ไฟล์แปรปรวนในแหล่ง Bootstrap ด้วยหนึ่งจากชุดรูปแบบ Bootswatch ของคุณและสร้างและ voila คุณมีไฟล์ bootstrap-theme.css สำหรับชุดรูปแบบ Bootswatch ของคุณ
การสร้าง Bootstrap อาจฟังดูน่ากลัว แต่จริงๆแล้วมันง่ายมาก:
เสร็จสิ้น ดูสิว่าง่ายใช่มั้ย
ฉันรู้ว่าโพสต์นี้ค่อนข้างเก่า แต่ ...
ตามที่ 'witttness' ชี้ให้เห็น
เกี่ยวกับ Theme ที่คุณกำหนดเองคุณอาจเลือกที่จะแก้ไข bootstrap-theme.css เมื่อสร้างธีมของคุณเอง การทำเช่นนั้นอาจทำให้ง่ายต่อการเปลี่ยนแปลงการจัดแต่งทรงผมโดยไม่ตั้งใจทำลายความดีงามของ Bootstrap ในตัว
ฉันเห็นว่าเมื่อ Bootstrap เห็นมาหลายปีที่ทุกคนต้องการบางสิ่งที่แตกต่างจากสไตล์หลัก ในขณะที่คุณสามารถแก้ไข bootstrap.css มันอาจทำให้สิ่งต่าง ๆ และมันอาจทำให้การอัปเดตเวอร์ชันใหม่เป็นความเจ็บปวดและเสียเวลาอย่างแท้จริง ดาวน์โหลดจาก 'ธีม' หมายถึงเว็บไซต์ที่คุณต้องรอถ้าธีมว่าการปรับปรุงผู้สร้างที่ใหญ่ถ้าบางครั้งใช่มั้ย?
บางคนสร้างไฟล์ 'custom.css' ของตัวเองและก็โอเค แต่ถ้าคุณใช้ 'bootstrap-theme.css' สิ่งต่าง ๆ จำนวนมากถูกสร้างขึ้นแล้วและสิ่งนี้ช่วยให้คุณสามารถหมุนธีมของคุณเองได้เร็วขึ้นโดยไม่รบกวนแกนของ bootstrap .css ฉันคนหนึ่งไม่ชอบปุ่ม 3D และไล่ระดับสีเป็นส่วนใหญ่ดังนั้นเปลี่ยนให้ใช้ bootstrap-theme.css เพิ่มระยะขอบหรือช่องว่างภายในเปลี่ยนรัศมีเป็นปุ่มของคุณและอื่น ๆ ...