เริ่มต้นการสร้างเว็บ Responsive ด้วย Bootstrap

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

ขั้นแรกเรามารู้จักกับ Framework Bootstrap ซึ่งจะมาเป็นผู้ช่วยของเราในบทความนี้
Bootstrap  ถูกพัฒนาขึ้นด้วย twitter ของเรานี้เองครับโดยตัว Bootstrap จะรวบรวมคำสั่ง Java และ CSS ไว้เพื่อให้ง่ายต่อการดึงมาใช้ในรูปแบบ Class ต่างๆ

จึงทำให้การจัดหน้าตาของเว็บไซต์ง่ายขึ้นและยังสามารถเขียน Class ของเราเข้ามาผสมการทำงานกับตัวของ  Bootstrap ได้ด้วยเช่นกัน

ขั้นที่สอง เรามาติดตั้ง Bootstrap กันดีกว่า
-ในการติดตั้ง  Bootstrap  สามาถโหลดได้ที่ http://twitter.github.io/bootstrap/

หลังจากที่โหลดมาเสร็จเราจะเอาไฟล์ที่ได้มาไปไว้ใน Root เดี๋ยวกับเว็บที่เราสร้างไว้ โดยเมื่อแตก ไฟล์มาจะได้ โฟล์เดอร์ดังนี้

เวลาใช้งานนั้นทำได้ง่ายๆเพียงแค่ เพิ่ม โค้ดลงไปใน html ที่เราสร้างไว้ยกตัวอย่างดังนี้นะครับ

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

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

ขั้นที่สาม เพิ่มโค้ดเพื่อให้เว็บไซต์สามารถทำงานเป็น Responsive ได้

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

เราเพิ่มส่วนที่เน้นสีแดงเพิ่มลงไปเพื่อเรียก Class ในการปรับขนาด เว็บไซต์แบบ Responsive ลงไปเพียงเท่านี้เราก็สามารถใช้งาน Funtion การสร้างเว็บแบบ
Responsive ได้ง่ายๆ แต่เราควรเพิ่มเติมความรู้ในส่วน HTML 5 และ CSS3 เพิ่มเติม เพื่อที่สามารถใช้งาน Bootstrap ได้อย่างมีประสิทธิภาพมากยิ่งขั้นไปครับ
และยังมี Framework อื่นๆที่ยังสามารถใช้งานแบบนี้ได้และเราจะมาทำความรู้จักกันในคั้งต้อๆไปนะครับ

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.