เงินทุนส่วนตัว
เป้า
บูตเป็นที่นิยมที่สุดกรอบ front-end ได้เปิดตัวรุ่นที่สาม (v3.0.0) กวดวิชานี้จะนำคุณไปเริ่มต้นเรียนรู้ Bootstrap 3
นอกจากนี้คุณยังจะเห็นวิธีการใช้คุณลักษณะกรอบที่กำหนดเองที่แตกต่างกันเช่นการใช้ตารางเพื่อสร้างรูปแบบการนำทางถูกสร้างขึ้นโดย NAV โดยใช้การดื่มสุราสร้างกล่องหล่นลงเพิ่มสังคมปลั๊กอินและ Google Map และอื่น ๆ ของบุคคลที่สามปลั๊กอิน
Bootstrap คืออะไร
บูตเป็นกรอบ front-end สำหรับการพัฒนาอย่างรวดเร็วของการใช้งานเว็บและเว็บไซต์
ในการพัฒนาเว็บที่ทันสมัยมีองค์ประกอบหลายโครงการเว็บเกือบทั้งหมดมีความจำเป็น
เงินทุนให้คุณมีสิ่งเหล่านี้พื้นฐาน Modules - ตารางตัวอักษรตารางฟอร์ม, ปุ่มและการตอบสนอง
นอกจากนี้ยังมีจำนวนมากของส่วนประกอบ front-end ที่มีประโยชน์อื่น ๆ เช่น dropdowns, นำทาง, Modals, Typehead, เลข, ดื่มสุรา, เกล็ดขนมปัง, แท็บย่อส่วนหัวและอื่น ๆ
กับเหล่านี้คุณสามารถสร้างโครงการเว็บและให้มันทำงานให้มากขึ้นอย่างรวดเร็วและง่ายดาย
นอกจากนี้ตั้งแต่กรอบทั้งหมดขึ้นอยู่กับโมดูลคุณสามารถวาง CSS ของคุณเองหรือแม้กระทั่งการแก้ไขใหญ่หลังจากที่เริ่มต้นของโครงการในการปรับแต่ง
มันขึ้นอยู่กับแนวทางปฏิบัติที่ดีหลายประการที่เราคิดว่านี้เป็นสถานที่ที่ดีที่จะเริ่มต้นเรียนรู้โอกาสในการพัฒนาเว็บที่ทันสมัยเมื่อคุณได้เข้าใจพื้นฐาน HTML และ JavaScript / jQuery คุณสามารถประยุกต์ใช้ความรู้ในการพัฒนาเว็บ
ถึงแม้นักวิจารณ์บางทุกโครงการที่สร้างขึ้นโดยเงินทุนมีลักษณะเดียวกันคุณไม่จำเป็นต้องรู้มากเกินไปเกี่ยวกับ HTML CSS + ความรู้สามารถสร้างเว็บไซต์ แต่เราต้องเข้าใจ Bootstrap เป็นกรอบการทำงานร่วมเช่นเดียวกับสิ่งที่พบอื่น ๆ ที่คุณต้องปรับแต่งเพื่อให้มันไม่ซ้ำกัน เมื่อคุณต้องการที่จะปรับแต่งคุณจะต้องศึกษาในเชิงลึกไม่มี HTML ดี + ฐาน CSS เป็นไปไม่ได้
บูตยกเว้นของหลักสูตรมีอื่น ๆ อีกมากมายกรอบของหน้าดีโดยใช้กรอบของการที่มีการพัฒนาของการเลือกบุคลากร แต่บูตเป็นมั่นเหมาะมูลค่าพยายาม
ทำไม โครงการควร ใช้เงินทุน?
ดาวน์โหลดไฟล์โครงสร้างและเข้าใจ
คุณสามารถเลือกจาก https://github.com/twbs/bootstrap/archive/v3.0.0.zip หรือ https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip ดาวน์โหลด Bootstrap เวอร์ชัน 3.0.0 บน เราจะใช้คนแรกที่คุณสามารถใช้สอง
นอกจากนี้เราให้รหัสดาวน์โหลดได้มีการเชื่อมโยงเพื่อดาวน์โหลดครั้งแรกผ่านโฟลเดอร์รหัสบูตที่ ด้านนี้ยังมีเดิมที่ใช้ในการปรับแต่ง CSS เงินทุนของ custom.css
หลังจากเอาออกคุณจะพบในโฟลเดอร์รากบูต-3.0.0 ไฟล์และโฟลเดอร์บาง
ไฟล์ CSS หลัก - bootstrap.css และรุ่นที่เรียบง่ายของการบูต-min.css ตั้งอยู่ในโฟลเดอร์ราก 'อ' 'โฟลเดอร์ CSS' ไฟล์บูต-3.0.0 ภายใต้โฟลเดอร์
ใน 'อ' ภายในมีโฟลเดอร์ 'js' มีหลัก bootstrap.js ไฟล์ JavaScript และรุ่นที่เรียบง่ายของมัน
แฟ้มในรากที่มีโฟลเดอร์ 'js' แยกต่างหากประกอบด้วยแฟ้มที่แตกต่างกันที่แตกต่างกัน JavaScript ปลั๊กอิน
ในแฟ้มรากภายใน 'สินทรัพย์' คุณจะพบโฟลเดอร์อื่น 'js' นี่คือสถานที่ที่มี HTML5 Shim ของ html5shiv.js, สำหรับการได้รับการสนับสนุน IE8 นอกจากนี้ยังมีไฟล์ respond.min.js เพื่อสนับสนุน IE8 คำสั่งมัลติมีเดีย โฟลเดอร์นี้ยังมี JS ปลั๊กอิน jquery.js เงินทุนขึ้นอยู่กับ
ในโฟลเดอร์เดียวกันมีโฟลเดอร์ 'ICO' ที่มีความหลากหลายของไอคอนโทรศัพท์มือถือและไอคอน favicon
ในเส้นทางเดียวกัน 'CSS "โฟลเดอร์มี CSS แฟ้มเอกสาร
โฟลเดอร์ '_includes' และ '_layouts' มีโครงสร้างรูปแบบเริ่มต้นบางส่วนของเอกสารซึ่งอาจจะเป็นประโยชน์สำหรับการออกแบบสร้างต้นแบบอย่างรวดเร็ว
โฟลเดอร์รากโฟลเดอร์ 'น้อย' มีไฟล์ .less บาง ถ้าคุณต้องการที่จะได้รับการพัฒนาบนพื้นฐานน้อยไฟล์เหล่านี้จะเป็นประโยชน์
ในโฟลเดอร์รากมีบางไฟล์ บางคนจะใช้สำหรับไฟล์ต้นแบบ HTML พื้นฐานบางส่วนที่อยู่บนพื้นฐานของซุ้มสำหรับ bower.json รวบรวม browserstack.json นอกจากนี้ยังมี composer.json และ _config.yml ไฟล์ YAML
นอกจากนี้ในการดาวน์โหลดจากลิงค์ที่กำหนดนอกจากนี้คุณยังสามารถใช้คำสั่งต่อไปนี้เพื่อรวบรวมทุก CSS ไฟล์ JS -
$ bower install bootstrap
คุณสามารถคัดลอก Git รายงานเงินทุน
git clone git://github.com/twbs/bootstrap.git
สำหรับการกวดวิชานี้เราได้ดาวน์โหลดเฉพาะไฟล์ซิปก็ไม่ได้ใช้
เมื่อคุณเรียนรู้การกวดวิชานี้เราขอแนะนำให้คุณติดตั้งซุ้มกรอบเพื่อดูวิธีการทำงาน
NetDNA สนับสนุนการรวบรวมและรุ่นที่เรียบง่ายของเงินทุน CSS, Js และหัวข้ออื่น ๆ CSS คุณสามารถพูดพวกเขาคำสั่งต่อไป
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
การพัฒนาโดยใช้เงินทุน v3.0.0
HTML พื้นฐาน
ต่อไปนี้เป็นโครงสร้างพื้นฐาน HTML สำหรับโครงการของเรา
<! DOCTYPE html>
<html>
<head>
<title> Bootstrap V3 แม่แบบ </ title>
<ชื่อ Meta = "วิวพอร์ตเนื้อหา" = "width = อุปกรณ์ความกว้างเริ่มต้นขนาด = 1.0">
<! - เงินทุน ->
<link href = "บูต-3.0.0 / DIST / CSS / bootstrap.min.css" rel = "สไตล์ชีต" สื่อ = "หน้าจอ">
<! - Shim HTML5 และสนับสนุน Respond.js IE8 ขององค์ประกอบ HTML5 และคำสั่งสื่อ ->
<! - [if LT IE 9]>
<script src = "บูต-3.0.0 / สินทรัพย์ / js / html5shiv.js"> </ script>
<script src = "บูต-3.0.0 / สินทรัพย์ / js / respond.min.js"> </ script>
<! [Endif] ->
</ head>
<body>
<h1> สวัสดีชาวโลก! </ h1>
<- JQuery (จำเป็นสำหรับเงินทุนของปลั๊กอินจาวาสคริปต์) ->
<script src = "// code.jquery.com/jquery.js"> </ script>
<! - รวมปลั๊กอินรวบรวมทั้งหมด (ด้านล่าง) หรือรวมไฟล์แต่ละไฟล์ได้ตามต้องการ ->
<script src = "บูต-3.0.0 / DIST / js / bootstrap.min.js"> </ script>
</ body>
</ html>
โปรดทราบว่าแม่แบบและ html5shiv.js เพิ่ม respond.min.js สำหรับการได้รับการสนับสนุน IE8 ในเงินทุนรุ่นที่ 3 ได้รับการเพิ่มไฟล์เหล่านี้
เรา twitter-บูตไฟล์ในโฟลเดอร์รากของโฟลเดอร์เว็บเซิร์ฟเวอร์จะได้รับการวางบูต-3.0.0 โฟลเดอร์ HTML ไฟล์ทั้งหมดที่เราสร้างจะถูกวางไว้ในทวิตเตอร์-บูต เหตุผลที่แสดงให้เห็นถึงจุดนี้เพื่อที่จะปรับปรุงกระบวนการพัฒนาของเรา
ปรับแต่ง
เราจะปรับแต่งรูปแบบกล่อง CSS ที่แตกต่างกัน ดังนั้นบนพื้นฐานของ CSS เดิมไม่ทำลายไฟล์บน (อยู่บูต-3.0.0 ของโฟลเดอร์ DIST) ในโฟลเดอร์เดียวกันเราจะสร้างไฟล์ CSS แยกต่างหากชื่อ custom.css จากนั้นเราในไฟล์ HTML ทันทีหลังจาก CSS ไฟล์ต้นฉบับอ้างอิง CSS แฟ้ม ด้วยวิธีนี้เราสามารถแทนที่รูปแบบเริ่มต้นที่เราต้องการที่จะเปลี่ยน แต่ถ้าเงินทุนอัพเกรดไฟล์ CSS เดิมจะไม่ทำลายของเราเองบนพื้นฐานของการปรับปรุง เราขอแนะนำให้คุณทำตามวิธีนี้ในกระบวนการพัฒนา
สร้างการใช้งาน
เพื่อสร้างระบบนำทางในไฟล์ HTML ตามร่างกายหลังจากแท็กเริ่มต้นเพิ่มรหัสต่อไปนี้
<Nav class = "Navbar Navbar-ผกผัน Navbar คงที่ด้านบนบทบาท" = "นำทาง">
<ระดับ Ul = "NAV Navbar-NAV">
<li> <a href="new.html" class="navbar-brand">
<img src = "logo.png"> </a> </ li>
<li class = "Active"> <a href="#"> บ้าน </a> </ li>
<li> <a href="price.html"> ราคา </a> </ li>
<li> <a href="contact.html"> ติดต่อ </a> </ li>
<ระดับ Li = "เลื่อนลง">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> สังคม <b class = "ลูกศร"> </ b> </a>
<ระดับ Ul = "แบบเลื่อนลงเมนู">
<li class = "พบปะ"> <g: คำอธิบายประกอบพลัสวัน = "อินไลน์" width = "150"> </ g: พลัสวัน> </ li>
<li class = "พบปะ"> <div class = "FB เหมือน" data-href = "https://developers.facebook.com/docs/plugins/" data-width = "ความกว้างพิกเซลของปลั๊กอิน" ข้อมูล ความสูง = "ความสูงพิกเซลของปลั๊กอิน" data-สกีมสี = "ไฟ" ข้อมูลรูปแบบ = "มาตรฐาน" ข้อมูลการกระทำ = "ชอบ" ข้อมูลที่แสดงใบหน้า = "true" data-ส่ง = "false"> < / div> </ li>
<li class = "พบปะ"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
<script> ฟังก์ชั่น (D, S, ID) {var js, fjs = d.getElementsByTagName (s) [0] ถ้า {js = d.createElement (s) (d.getElementById (ID)!); Js id = ID; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (เอกสาร" สคริปต์ "," twitter-WJS "); < / script> </ li>
</ ul>
</ li>
</ ul>
</ Nav>
ระบบนำทางสำหรับการใช้เงินทุน 'Navbar' class ในลำดับชั้นของภาชนะ ดังนั้นจึงจะได้รับมอบหมายให้จัดองค์ประกอบการสำรวจ NAV ทั้งหมด
เราได้ใช้ 'Navbar-ผกผัน' class ในการเปลี่ยนสีเริ่มต้นของแถบนำทางใช้แสงก่อนมืดแทนการเริ่มต้นที่ คลาส 'Navbar คงที่ด้านบน' ทำให้มั่นใจได้ว่าเมื่อเราเลื่อนลงหน้า HTML แถบนำทางที่ด้านบนของตำแหน่งที่คงที่
ใน Bootstrap v3.0.0 เมื่อลูกศรจะถูกสร้างขึ้นเมื่อใช้บทบาท = "นำทาง" เป็นของใหม่ แนะนำให้ใช้เงินทุนดังกล่าวสำหรับการเข้าถึงง่ายแถบนำทาง
ณ จุดนี้เราต้องมีการเพิ่มเนื้อหาของเอกสารใน custom.css ที่ 'ช่องว่างด้านบน: 80px;' คุณสามารถเพิ่มให้กับร่างกายเป็นด้านบนของพิกเซลที่เต็มไปด้วยอาจจะแตกต่างกัน แต่ถ้าคุณทำเช่นนั้นส่วนบนของแถบนำทางหลังจากนั้นจะถูกซ่อนไว้
ในการนำภาชนะที่เราเรามีระดับของ NAV 'และ' Navbar-NAV 'รายการเรียงลำดับ ในรายการเรียงลำดับนี้รายการแต่ละรายการมีการเชื่อมโยงการนำทาง
'Navbar แบรนด์' class สำหรับการนำเสนอแบรนด์ เราได้ใช้ภาพ เนื่องจากความสูงของความสูงของภาพมากกว่าแถบนำทางพื้นฐานที่เราดำเนินการปรับแต่งบางส่วน 'การ .navbar-NAV> li>' คุณสมบัติ 'line-height จาก 20px เริ่มต้นเดิม 50px เปลี่ยนขนาดตัวอักษรเพื่อ 16px
เชื่อมโยงไปยังที่เหมาะสมที่เราได้เพิ่มกล่องแบบหล่นลง สำหรับหลี่ที่เกี่ยวข้องเพิ่มไปยัง 'เลื่อนลง' class ตามด้วยการเพิ่ม 'เลื่อนลง-สลับ' และ 'ลูกศร' สมอที่มีสองชั้น ยึดของโครงการของเราจริงมีสมอข้อความทางสังคม li นี้มีรายชื่อเรียงลำดับรายการแต่ละรายการในรายการที่ซ้อนกันจะแสดงในกล่องต่อไปนี้มีการเชื่อมโยง
ในกล่องแบบหล่นลงที่เราได้เพิ่มปลั๊กอินทางสังคม เป็นครั้งแรกที่มีเครื่องหมาย li Google Plus และที่สองมีแท็ก li Facebook และสามมีแท็กการแสดงผล li ปุ่ม Twitter และบางสคริปต์ JS
นอกจากนี้คุณจะต้องเริ่มต้นจากแท็กร่างกายเพิ่มมาร์กอัปและการเขียนสคริปต์ต่อไปนี้จะทำให้ปุ่ม Facebook งาน
<div id = "FB-ราก"> </ div>
(ฟังก์ชั่น (D, S, ID) {
JS var, fjs = d.getElementsByTagName (s) [0];
ถ้า (d.getElementById (ID)) กลับ;
JS = d.createElement (s); js.id id =;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, fjs);
} (เอกสาร 'สคริปต์', 'Facebook-jssdk'));
ทวิตเตอร์เพื่อให้การทำงานของปุ่มเราจบก่อนแท็กร่างกายเพิ่มสคริปต์ต่อไปนี้
(ฟังก์ชั่น () {
var PO = document.createElement ( 'สคริปต์'); po.type = 'ข้อความ / JavaScript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName ( 'สคริปต์') [0]; s.parentNode.insertBefore (PO, S);
}) ();
เราใช้รูปแบบต่อไปนี้เพื่อเพิ่มรูปแบบพิเศษบางอย่างในชั้นเรียน 'พบปะของปุ่มสังคม
.socials {
padding: 10px;
}
เสร็จสมบูรณ์นำทางของเรา
สร้างสไลด์โชว์จากการดื่มสุรา
เพื่อให้โครงการแถบนำทางหน้าบ้านสร้างสไลด์โชว์เราจะใช้แท็กต่อไป
<div id = "ม้าหมุน-ตัวอย่างทั่วไป" class = "ม้าหมุนสไลด์">
<! - ตัวชี้วัด ->
<ol class = "ม้าหมุน-หุ้น">
<li ข้อมูล target = "# Carousel-ตัวอย่างทั่วไป" data-สไลด์ไป = "0" class = "ใช้งาน"> </ li>
<li ข้อมูล target = "# Carousel-ตัวอย่างทั่วไป" data-สไลด์ไป = "1"> </ li>
<li ข้อมูล target = "# Carousel-ตัวอย่างทั่วไป" data-สไลด์ไป = "2"> </ li>
</ ol>
<! - Wrapper สำหรับภาพนิ่ง ->
<ระดับ Div = "ม้าหมุน-ภายใน">
<ระดับ Div = "รายการที่ใช้งาน">
<img src = "computer.jpg" alt = " ... ">
<ระดับ Div = "ม้าหมุน-คำบรรยายใต้ภาพ">
<h1> เดสก์ทอปขนาดใหญ่มีทุก </ h1>
<p> <ปุ่ม class = "btn BTN ความสำเร็จ BTN-LG"> ลองทดลองใช้ 30 วันตอนนี้ </ p>
</ div>
</ div>
<ระดับ Div = "รายการ">
<img src = "mobile.jpg" alt = " ... ">
<ระดับ Div = "ม้าหมุน-คำบรรยายใต้ภาพ">
<h1> โทรศัพท์มือถือเป็นเดสก์ท็เปรียบ </ h1>
<p> <ปุ่ม class = "btn BTN ความสำเร็จ BTN-LG"> ลองทดลองใช้ 30 วันตอนนี้ </ p>
</ div>
</ div>
<ระดับ Div = "รายการ">
<img src = "cloud1.jpg" alt = " ... ">
<ระดับ Div = "ม้าหมุน-คำบรรยายใต้ภาพ">
<h1> รัฐวิสาหกิจมีการนำ Cloud computing อย่างรวดเร็ว </ h1>
<p> <ปุ่ม class = "btn BTN ความสำเร็จ BTN-LG"> ลองทดลองใช้ 30 วันตอนนี้ </ p>
</ div>
</ div>
</ div>
<! - การควบคุม ->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class = "ไอคอนย้อนกลับ"> </ span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class = "ไอคอนต่อไป"> </ span>
</a>
</ div>
</ div>
มีสี่ส่วนอยู่ในการดื่มสุรา ภาชนะหลักใช้ 'ม้าหมุนภาพนิ่ง' แท็ก div กับนิยามคลาส
แล้วชั้นเรียน 'ม้าหมุน-หุ้นกับรายการสั่งซื้อ ol รายการแต่ละรายการแสดงถึงภาพนิ่ง เมื่อเพจมีการโหลดโหลดโดยสไลด์โชว์เริ่มต้นกับการเรียน 'ใช้งาน' เมื่อแสดงคุณจะเห็นพวกเขาในหัวของวงการเล็ก ๆ
จากนั้นแต่ละภาพนิ่ง (รูปภาพ) ถูกวางไว้ด้วย 'รายการ' class ของแท็ก div ที่ แต่ละรายการซ้อนกับ 'ม้าหมุน-คำบรรยายใต้ภาพ' class ของ div ที่ ม้าหมุน-คำบรรยายใต้ภาพมีภาพที่แสดงร่วมกับแท็กชื่อ วรรคมี H1 และปุ่มคุณยังสามารถรวมเครื่องหมายอื่น ๆ ของตัวเอง
ส่วนสุดท้ายจะใช้ในการควบคุมสไลด์ถัดสไลด์ก่อนหน้า / นี้คือการใช้ 'left' และ 'ม้าหมุนควบคุม' ในความหมายของการเรียนโดยใช้ 'ขวา' และ 'ม้าหมุนควบคุม' ความหมายต่อไปของชั้นเรียน
'ไอคอนก่อนหน้า' และ 'ไอคอนต่อไป' class หาไอคอนต่อไปและก่อนหน้านี้
เราได้ทำบางอย่างในการปรับแต่งค่าเริ่มต้นการดื่มสุรา เราหวังว่าคำอธิบายตัวชี้วัดและไอคอนถัดไป / ก่อนหน้านี้จะแสดงอยู่ด้านบนของตำแหน่งเริ่มต้นของการไม่กี่พิกเซล
การทำเช่นนี้เราจะเพิ่มรูปแบบดังต่อไปนี้ custom.css ไฟล์
.carousel-ภายใน .item .carousel-คำบรรยายใต้ภาพ {
position: absolute;
ด้านบน: 200px
}
.carousel-หุ้น {
position: absolute;
ด้านบน: 400px;
}
.navbar {
ขอบล่าง: 0;
}
.navbar-NAV> li> {
line-height: 50px;
font-size: 16px
}
นอกจากนี้เรายังปรับแต่ง H1 เพิ่มไปขอบด้านล่างของ 30 พิกเซล
h1 {
ขอบล่าง: 30px
}
ภาพการตอบสนอง
คุณอาจสังเกตเห็นว่าภาพในสไลด์แต่ละเราได้ใช้ 'img ตอบสนอง' class นี้เป็นเงินทุน v3.0.0 คุณสมบัติใหม่ โดยใช้แท็ก img ที่ img ตอบสนอง 'ระดับเงินทุนเพื่อให้การตอบสนองภาพ
สร้างตาราง
ในสไลด์ต่อไปนี้เราใช้ตารางเพื่อวางเนื้อหา โดยมี 'ตู้คอนเทนเนอร์' class ของ div เริ่มต้นตาราง โปรดทราบว่าเรากำลังจะพัฒนาเว็บไซต์ที่ตอบสนองต่อแทนของรุ่นก่อนหน้าของเงินทุนที่ภาชนะที่มีชั้นเดียวเริ่มต้นคือการตอบสนอง
div ภาชนะที่มีซ้อนกันหลาย 'แถว' class ของ div (แถวแรกของสามบรรทัดที่สองมีหก) เพื่อสร้างเส้นกริด Bootstrap
แต่ละแถวมีด้วย 'Col-XY' class ของ div เพื่อสร้างคอลัมน์ ค่าของ x สามารถ: XS สำหรับอุปกรณ์มือถือสำหรับเอสเอ็มบเล็ตพีซี, MD สำหรับคอมพิวเตอร์โน๊ตบุ๊คและเดสก์ท็หน้าจอที่มีขนาดเล็กสำหรับ lg หน้าจอเดสก์ทอปขนาดใหญ่ นี่คือวิธีแรก ค่าของ Y สามารถเป็นจำนวนเต็มบวกใด ๆ แม้ว่าจำนวนรวมของคอลัมน์ในตารางจะต้องไม่เกิน 12 ในโครงการของเราสำหรับความเรียบง่ายที่เราได้ใช้ LG, แต่เนื่องจากเราได้ทำมาแล้วดังนั้นคุณอาจได้รับโทรศัพท์หรือแท็บเล็ตเพื่อดูเว็บไซต์ของโครงการสำหรับการเปรียบเทียบ
ในการกวดวิชาดังต่อไปนี้เราจะมีการกวดวิชาที่สมบูรณ์แบบบนระบบกริดเงินทุนในการสำรวจการตอบสนองที่น่าสนใจ
ในตัวอย่างนี้เราต้องการความกว้างของคอลัมน์ของสามแถวแรกมีค่าเท่ากันดังนั้นเราจะใช้สำหรับทุกคอลัมน์ 'Col-LG-4' ในแถวที่สองเราต้องการหกคอลัมน์ของความกว้างเท่ากันดังนั้นเราจะใช้สำหรับทุกคอลัมน์ 'Col-LG-2'
นี่คือแท็กที่มีตารางของสองแถวแถวแรกมีสามแถวที่สองมีหก
<ระดับ Div = "แถวบารอน"> <ระดับ Div = "Col-LG-2"> <p> <img src = "../ wp-content / uploads / 2013/10 / php.png"> </ p> </ div> <ระดับ Div = "Col-LG-2"> <p> <img src = "../ wp-content / uploads / 2013/10 / MySQL-logo.jpg"> </ p> </ div> <ระดับ Div = "Col-LG-2"> <p> <img src = "../ wp-content / uploads / 2013/10 / JavaScript-logo.png"> </ p> </ div> <ระดับ Div = "Col-LG-2"> <p> <img src = "../ wp-content / uploads / 2013/10 / java.jpg"> </ p> </ div> <ระดับ Div = "Col-LG-2"> <p> <img src = "../ wp-content / uploads / 2013/10 / postgresql.png"> </ p> </ div> </ div>
เรามีทรัพยากรบุคคลและส่วนท้ายที่มีเครื่องหมายต่อไปนี้ในตอนท้ายของตาราง
<hr> <p> Copyright @ 2013-14 โดยสิ่งที่ต้องทำ App. </ p>
ใช้ตาราง
ในหน้า price.html ของโครงการของเราเราใช้แบบฟอร์มที่จะทำให้รายการราคาป้ายดังต่อไปนี้
<ตารางเรียน = "โต๊ะเป้">
<thead>
<tr>
<Th> คุณสมบัติ </ TH>
<Th> ส่วนบุคคล </ TH>
<Th> ทีมงานเล็ก ๆ </ TH>
<Th> ทีมปานกลาง </ TH>
<Th> องค์กร </ TH>
</ tr>
</ thead>
<tbody>
<tr>
<td> <h3> จำนวนผู้ใช้ </ h3> </ td>
<td> <span class = "ป้าย"> หนึ่ง </ span> </ td>
<td> <span class = "ป้าย"> ห้า </ span> </ td>
<td> <span class = "ป้าย"> สิบห้า </ span> </ td>
<td> <span class = "ป้าย"> ไม่ จำกัด </ span> </ td>
</ tr>
<tr>
<td> <h3> Pro ฝึกอบรม </ h3> </ td>
<td> <span class = "ป้าย"> ไม่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
</ tr>
<tr>
<td> <h3> ฟอรั่มการสนับสนุน </ h3> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
</ tr>
<tr>
<td> <h3> ในการสนับสนุนคน </ h3> </ td>
<td> <span class = "ป้าย"> ไม่ </ span> </ td>
<td> <span class = "ป้าย"> ไม่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
</ tr>
<tr>
<td> <h3> webinars รายสัปดาห์ </ h3> </ td>
<td> <span class = "ป้าย"> ไม่ </ span> </ td>
<td> <span class = "ป้าย"> ไม่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
<td> <span class = "ป้าย"> ใช่ </ span> </ td>
</ tr>
<tr>
<td> <h3> ราคา </ h3> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN เตือน BTN-LG"> 9 $ / เดือน </ ปุ่ม> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN เตือน BTN-LG"> $ 19 / เดือน </ ปุ่ม> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN เตือน BTN-LG"> $ 49 / เดือน </ ปุ่ม> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN เตือน BTN-LG"> $ 99 / เดือน </ ปุ่ม> </ td>
</ tr>
<tr>
<td> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN ความสำเร็จ BTN-LG"> ซื้อตอนนี้ </ ปุ่ม> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN ความสำเร็จ BTN-LG" "> ซื้อตอนนี้ </ ปุ่ม> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN ความสำเร็จ BTN-LG" "> ซื้อตอนนี้ </ ปุ่ม> </ td>
<td> <ปุ่ม type = "ปุ่ม" class = "btn BTN ความสำเร็จ BTN-LG" "> ซื้อตอนนี้ </ ปุ่ม> </ td>
</ tr>
</ tbody>
</ table>
บูตโดยใช้ CSS ไฟล์ต้นฉบับ 'ตาราง' และ 'ตารางเป้นสองชั้น แต่เราจะต้องทำให้ตารางต่อไปนี้โดยการเพิ่มไฟล์ CSS ที่กำหนดเองบางอย่างใน customize.css ลักษณะแตกต่างกัน
TH {
สีพื้นหลัง: # 428bca;
color: # ec8007;
ดัชนี z: 10;
ข้อความเงา: 1px 1px 1px # fff;
font-size: 24px;
}
ใช้ป้าย
เราใช้ 'ป้าย' class เพื่อแสดงข้อความบางส่วนในตาราง เรามี CSS ที่กำหนดเองต่อไปนี้กับชั้นตรา
.badge {
สีพื้นหลัง: # 428bca;
สี: # fff;
font-size: 22px;
}
สำหรับหน้าและ contact.html หน้านี้เราได้เพิ่มกฎ CSS อีก customize.css
.container> H1 {
text-align: ศูนย์;
}
นี้จะช่วยให้ H1 ศูนย์กลาง
โดยใช้แบบฟอร์ม
ในแฟ้ม contact.html เราสร้างสามคอลัมน์คอลัมน์แรกเราฝังแบบฟอร์ม ใช้แผ่นลักษณะเริ่มต้น
<form class = "รูปแบบแนวนอน" บทบาท = "รูปแบบ">
<ระดับ Div = "รูปแบบกลุ่ม">
<label สำหรับ = "อีเมล" class = "Col-LG-2 ควบคุมฉลาก"> อีเมล์ </ label>
<ระดับ Div = "Col-LG-10">
<ประเภทขาเข้า = "อีเมล" class = "รูปแบบการควบคุม" id = "อีเมล" ยึด = "อีเมล์">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม">
<label สำหรับ = "ชื่อ" class = "Col-LG-2 ควบคุมฉลาก"> ชื่อ </ label>
<ระดับ Div = "Col-LG-10">
<ประเภทขาเข้า = "text" class = "รูปแบบการควบคุม" id = "ชื่อ" ยึด = "ชื่อ">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม">
<label สำหรับ = "ประเทศ" class = "Col-LG-2 ควบคุมฉลาก"> ประเทศ </ label>
<ระดับ Div = "Col-LG-10">
<เลือก>
<option> สหรัฐอเมริกา </ option>
<option> อินเดีย </ option>
<option> สหราชอาณาจักร </ option>
<option> Autralia </ option>
</ เลือก>
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม">
<label สำหรับ = "รายละเอียด" class = "Col-LG-2 ควบคุมฉลาก"> ข้อความ </ label>
<ระดับ Div = "Col-LG-10">
<textarea แถว = "5" cols = "50"> </ textarea>
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม">
<ระดับ Div = "Col-LG-ชดเชย-2-Col LG-10">
<ชนิดปุ่ม = "ส่ง" class = "btn BTN-default"> ส่ง </ ปุ่ม>
</ div>
</ div>
</ form>
คลาส 'แบบแนวนอน' ช่วยให้รูปแบบการรักษาแนวแนวนอน โปรดทราบว่าเพื่อความสะดวกในการเข้าถึงเพิ่มบทบาท = "รูปแบบ" นี้เป็นรุ่น 3.0.0 ของคุณสมบัติใหม่
เมื่อต้องการค้นหาแต่ละรูปแบบการควบคุม, 3.0.0 เงินทุนใช้ใหม่ 'รูปแบบกลุ่ม' class
ในหน้านี้คอลัมน์ที่สองของตารางเราก็วางข้อความบางส่วน
เพิ่ม Google Maps
ในหน้า contact.html, คอลัมน์ที่สามของตารางเราได้เพิ่ม Google แผนที่ (Google Maps) การทำเช่นนี้เราจะใช้แท็กต่อไป
<div id = "map_canvas"> </ div> </ div>
JS ต่อไปเพิ่มไปยังส่วนหัวของไฟล์ HTML ภายในส่วนหัว
ฟังก์ชั่นเริ่มต้น () {
var map_canvas = document.getElementById ( 'map_canvas');
var map_options = {
Center: google.maps.LatLng ใหม่ (23.244066, 87.861276),
ซูม: 8
MapTypeId: google.maps.MapTypeId.ROADMAP
}
var แผนที่ = google.maps.Map ใหม่ (map_canvas, map_options)
}
google.maps.event.addDomListener (หน้าต่าง 'โหลด' เริ่มต้น);
ก่อนกล่าวก่อน JS คุณต้องเพิ่มแท็กสคริปต์ต่อไปนี้
<script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
เพื่อที่จะทำให้ถูกต้องแผนที่คุณต้องเพิ่มรูปแบบดังต่อไปนี้ custom.css
#map_canvas {
ความกว้าง: 400px;
ความสูง: 400px;
}
นี่คือวิธีการสร้างโครงการง่ายขึ้นอยู่กับเงินทุน v3.0.0 แต่เราได้สัมผัสเพียงพื้นผิวที่บทต่อจะอธิบายในรายละเอียดเพิ่มเติม