การติดตั้ง Bootstrap Framework เข้ามาช่วย Design Website

4,949 การติดตั้ง Bootstrap Framework เข้ามาช่วย Design Website

1. ส่วนของ tag <head> ให้นำโค้ดนี้ไปวางได้เลยครับ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

2. ส่วนของ tag <body> จะเป็นการสร้างส่วนต่างๆ โดยใช้ Bootatrap Class

<div style="text-align:center;margin-left: 88px; margin-right: 89px;">  
	<h2 style="color:blue;"><font color="#FF8533">การใช้ Bootstrap Framework </font></h2>
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
		<div class="navbar-header">
		  <a class="navbar-brand" href="index.jsp">
			<img alt="Brand" src="img/Hibernate.png" style="width: 82px;">
		  </a>
		  <a href="addMajor.jsp" class="navbar-text">เพิ่มสาขาเอกวิชา</a>
		  <a href="add.jsp" id="addStd" class="navbar-text">เพิ่มข้อมูลนักเรียน</a>
		  <a href="search.jsp" class="navbar-text">ค้นหาข้อมูล</a>
			
		</div>
	  </div>
	</nav>
</div>
 
 <div align="center">
	<button type="button" class="btn btn-default">Default</button>
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-link">Link</button>
</div>

เพียงเท่านี้ก็เป็นอันเรียบร้อย สามารถทดสอบได้เลยครับ

Download Zip : ดาวน์โหลดโค้ด

โดย: bamossza เมื่อ: 16 ม.ค. 58 02:24

ให้คะแนนส่งแทนคำขอบคุณ