bootstrap使用方法介紹

更新時間：2022-04-01 09:51:20 來源：動力節點瀏覽751次

bootstrap是一個讓后端開發人員相見恨晚的東西，我們了解下怎么使用的吧!

1.新建一個叫ubs的文件夾，把這個文件夾放到jingyan下面。

2.在ubs下新建一個index.html文件，注意文件編碼一定要是utf8,不是的話你可以簡單另存為的時候換一下，以免亂碼。

3.將準備好的bootstrap-3.3.5包復制到ubs文件夾下，將準備好的jquery-2.1.0.min.js復制到ubs文件夾下

4.雙擊用editplus編輯器打開index.html文件，你也可以用別的編輯器，記事本也可以;接著便是重點，在head頭部寫入引入bootstrap的內容，見圖：

代碼如下

<html>
<head>
<title>怎么用bootstrap</title>
<script  src="jquery-2.1.0.min.js"> </script>
<script  src="bootstrap-3.3.5/js/bootstrap.js"> </script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap.css">
</head>
<body>

5.復制一段使用bootstrap的例子放進body中

<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" class="btn btn-default" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="left"
            data-content="左側的 Popover 中的一些內容">
        左側的 Popover
    </button>
    <button type="button" class="btn btn-primary" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="top"
            data-content="頂部的 Popover 中的一些內容">
        頂部的 Popover
    </button>
    <button type="button" class="btn btn-success" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="bottom"
            data-content="底部的 Popover 中的一些內容">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="right"
            data-content="右側的 Popover 中的一些內容">
        右側的 Popover
    </button>
</div> 
<script>
$(function (){
    $("[data-toggle='popover']").popover();
});
</script>