Vì sao đoạn code sử dụng Bootstrap này không làm việc?

#1 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> -->
	
	<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>  -->
	<!-- <script src="/bootstrap/js/bootstrap.min.js"></script>  -->
	<!-- <script src="/js/slider_input.js"></script> -->

	<!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> -->
	<!-- <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> -->
	
</head>
<body>
	<div class="container">
	        <div class="row">
	            <div class="col-xs-12">
	                <p>Header (12 Cột)</p>
	            </div>
	            <div class="col-md-3">
	                <p>Left Menu (3 cột)</p>
	            </div>
	            <div class="col-md-6">
	                <p>Content (6 cột)</p>
	            </div>
	            <div class="col-md-3">
	                <p>Right (3 cột)</p>
	            </div>
	            <div class="col-md-6">
	                <p>Footer (6 cột)</p>
	            </div>
	            <div class="col-md-6">
	                <p>Footer (6 cột)</p>
	            </div>
	        </div>
    </div>
    <div class="container">
	  <h2>Button Styles</h2>
	  <button type="button" class="btn">Basic</button>
	  <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>
    <!-- <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> -->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>

trong khi các đoạn code Bootstrap khác e viết work rất tốt

e cũng nghĩ là do mấy dòng này

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Mong các bác bỏ chút thời gian vàng ngọc của mình ra để chỉ giáo hiền đệ ạ <3

#2

Sai href rồi bạn ơi, bạn thêm “https:” vào trước thì nó mới link tới boostrap online được :smiley:
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

2 Likes
#3

http://bootstrapdocs.com/v3.0.3/docs/getting-started/

Hay là ở đây trang web nó ghi nhầm!!!

Mong bác cho ý kiến @@

#4

dùng thử link này xem: https://getbootstrap.com/docs/3.3/getting-started/

Ko biết nhưng hình như cái này mới chính chủ mà nhỉ

1 Like
#5

Mình không có ý kiên gì cả =)) Nó ghi nhầm thì kệ nó thôi @@
Có là chính chủ hay fake thì cũng kệ nó thôi :joy:

Mình sửa cho nó chạy được là OK =))
Mà hình như trang bác @dongfly nói mới là hàng xịn =))

2 Likes
#6

Họ không ghi nhầm đâu bạn.

Người ta để code là dành cho những ai nhét vào http api chứ không phải ftp://, file://,…

Cái phần :// bỏ trống có nghĩa rằng yêu cầu trình duyệt tự thay cái api cho trùng với api của trang mà client đang truy cập.

Nó giống như thẻ meta base vậy.

4 Likes
#7

@vn5chau.com
Từ 2 cái này bạn rút ra được lý do chưa :sweat_smile:

Thấy cái gì sai sai là bật Browser Console lên mà xem, inspect, debug chứ, kỹ năng cơ bản của web dev.

3 Likes
#8

Thua! Làm web thời bây giờ chứ có phải thời 2000 trở về trước đâu mà mở file HTML lên như vậy nhỉ? Cài Web Server vào để mà thực hành chứ, thậm chí còn phải cài SSL cho localhost nữa đấy. Vấn đề tiết kiệm vài byte khi lược bỏ giao thức đi có lúc sinh sự đấy.

Xem cái hình trên mình không thể hiểu được!

5 Likes
#9 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

href ở trên sẽ lấy giao thức của trang web (http, https)

image.png1366×768 46.2 KB

Mà bạn dùng file:// nó sẽ thành

<script src="file://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Nên nó 404

Mà bạn cài XAMPP mà lại không chạy localhost??? thế cài XAMPP làm gì cho mệt???

Chạy XAMPP rồi truy cập http://localhost/bscdn/bs-3.0.3-dist/index.php là OK nhé, code của trang chủ Bootstrap mà bảo sai thì tẩy chay BS được rồi :laughing:

2 Likes
#10

Cảm ơn các bác @hieudien, @dongfly, @Dark.Hades, @it-4-life, @superthin, @SakaDream đã cho ý kiến, e dùng xampp nhưng lúc đó k hiểu vì sao nó lại lỗi, mà test cái này k cần localhost nên e cứ mạnh dạn xem file trên cái browser thân thương như vậy, cũng tại cái vid hướng dẫn trên u2be nó cũng click thẳng nên e bắt chước, trông nó cũng hơi kỳ kỳ với các pro nhưng e nghĩ thô nhưng nó thật =))

image.jpg1366×768 262 KB

#11

Theo mình nếu chỉ học HTML, CSS cơ bản thì cũng không cần thiết chạy server làm gì.

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?