สุขสันต์วันสงกรานต์


การนำ Bootstrap ไปใช้ใน Webpage

คู่มือการเรียนรู้ Bootstrap 3.x

บทเรียนดีๆ สำหรับผู้ที่ต้องการแบ่งปัน บทเรียนของคุณอาจมีค่าสำหรับอีกหลายๆ คน

beta version

การนำ Bootstrap ไปใช้ใน Webpage

มานพ กองอุ่น bootstrap webpage 511

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

ดาวโหลด Package โดยตรง

สำหรับขั้นตอนนี้เราสามารถดาวน์โหลดไฟล์ zip จาก Bootstrap มาได้โดยตรง โดยสามารถคลิก ดาวน์โหลด Bootstrap ที่นี่ จะได้รับไฟล์ bootstrap-3.3.7-dist.zip จากนั้นสามารถนำไปใช้ใน Webpage ได้เลย

โหลดผ่าน Bootstrap CDN

การโหลดผ่าน CDN นั้นมีข้อดีคือเราไม่ต้องเก็บไฟล์ Package ของ Bootstrap อยู่ในเครื่อง Server เรา แต่เราสามารถดึงมาจาก Server ที่ให้บริการ แต่ข้อเสียคือถ้า Server CDN ล่มเราก็ไม่สามารถเรียกไฟล์ Bootstrap ได้ 

สำหรับ Link ในการดึงมาใช้งานมีดังนี้

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

ติดตั้งผ่าน Composer

Composer เป็นโปรแกรมในการบริหารจัดการ Package อีกโปรแกรมหนึ่งในภาษา PHP ซึ่งสามารถบริหารจัดการ Package JavaScript, CSS ได้อีกด้วย คำสั่งในการติดตั้งคือ

$ composer require twbs/bootstrap

ติดตั้งผ่าน Bower

Bower เป็นโปรแกรมในการบริหารจัดการ Package JavaScript โดยสามารถพิมพ์คำสั่งในการติดตั้ง Bootstrap ดังนี้

$ bower install bootstrap

ติดตั้งผ่าน NPM

NPM ก็เป็นอีกโปรแกรมในการบริหารจัดการ Package ต่างๆ เช่นกัน โดยสามารถพิมพ์คำสั่งในการติดตั้งดังนี้

$ npm install bootstrap@3

ตัวอย่างการนำไปใช้ใน Webpage

<!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://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/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>

 


หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com
กลับขึ้นบน