Computer2know: เตรียมพร้อมก่อนใช้ Bootstrap

วันพฤหัสบดีที่ 22 กันยายน พ.ศ. 2559

เตรียมพร้อมก่อนใช้ Bootstrap

ให้เราไป Download Bootstrap มาติดตั้งก่อนครับ เมื่อเราแตกไฟล์ออกมา เราจะได้ 3 folders ดังนี้ครับ

cssเก็บ style sheets ของ Bootstrap
imgเก็บ sprite image สำหรับ icons ต่างๆ
jsเก็บ jQuery plugins ต่างๆ

จากนั้นให้เราสร้างไฟล์ index.html ขึ้นมาครับ แล้วใส่โค้ด html ตามนี้

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap tutorials by Siam HTML</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap tutorials by Siam HTML</title>

</head>

<body>

</body>

</html>

เมื่อได้ไฟล์ index.html มาแล้ว ให้เราเพิ่ม style sheets ของ Bootstrap เข้าไปที่ <head> ครับ

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

1	<link href="css/bootstrap.min.css" rel="stylesheet">

ถ้า เราต้องการจะทำ responsive web ให้เราเพิ่ม style sheets ของ Bootstrap สำหรับ responsive เข้าไปอีกตัว แล้วกำหนดค่าของ viewport ตามโค้ดด้านล่างนี้ครับ

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

เพื่อให้เราสามารถใช้งาน javascript ที่ Bootstrap เตรียมมาได้ ให้เรา Download jQuery มาใส่ไว้ใน folder js ของเรา แล้วใส่โค้ดด้านล่างนี้ก่อนปิด <body> ครับ

<body>
.
.
.
.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

<body>

</body>

เพียงเท่านี้ เราก็พร้อมที่จะใช้งาน Bootstrap แล้วล่ะครับ

Computer2know

วันพฤหัสบดีที่ 22 กันยายน พ.ศ. 2559

เตรียมพร้อมก่อนใช้ Bootstrap

เตรียมพร้อมก่อนใช้ Bootstrap

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

Set MongoDB in the windows path environment

เว็บอื่นๆครับ