01/10/2018, 14:16

Các bác cho e hỏi vì sao đoạn code sử dụng Bootstrap của e nó lại không làm việc!

<!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="https://daynhauhoc.com//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> -->
	
	<!-- <script src="https://daynhauhoc.com//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>  -->
	<!-- <script src="https://daynhauhoc.com/bootstrap/js/bootstrap.min.js"></script>  -->
	<!-- <script src="https://daynhauhoc.com/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="https://daynhauhoc.com//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="https://daynhauhoc.com//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

Đoàn Trọng Hiếu viết 16:19 ngày 01/10/2018

<link rel=“stylesheet” href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

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
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

vn5chau.com viết 16:32 ngày 01/10/2018

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

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

Mong bác cho ý kiến @@

Donght viết 16:27 ngày 01/10/2018

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ỉ

Đoàn Trọng Hiếu viết 16:21 ngày 01/10/2018

Mong bác cho ý kiến @@

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

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 =))

Dark.Hades viết 16:18 ngày 01/10/2018

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.

Ice Tea viết 16:24 ngày 01/10/2018

<link rel=“stylesheet” href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

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.

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

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.

Vô Thin viết 16:24 ngày 01/10/2018

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!

Phan Bá Hải viết 16:29 ngày 01/10/2018
<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="https://daynhauhoc.com//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)

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

vn5chau.com viết 16:25 ngày 01/10/2018

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 =))

Đoàn Trọng Hiếu viết 16:31 ngày 01/10/2018

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ì.

Bài liên quan
0