bootstrap如何使用

2025-10-29 08:43:55

1、跟之前一样，我新建一个叫ubs的文件夹，我习惯把这个文件夹放到jingyan下面。

bootstrap如何使用

2、在ubs下新建一个index.html文件，注意文件编码一定要是utf8,不是的话你可以简单另存为的时候换一下，以免乱码。

bootstrap如何使用

3、将准备好的bootstrap-3.3.5包复制到ubs文件夹下，将准备好的jquery-2.1.0.min.js复制到ubs文件夹下

bootstrap如何使用

4、双击用editplus编辑器打开index.html文件，你也可以用别的编辑器，记事本也可以；接着便是重点，在head头部写入引入bootstrap的内容，见图：

代码如下

<html>

<head>

<title>怎么用bootstrap</title>

</head>

<body>

bootstrap如何使用

5、复制一段使用bootstrap的例子放进body中

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

$(function (){

$("[data-toggle='popover']").popover();

});

</script>

bootstrap如何使用

6、右击index.html使用你常用的浏览器打开它。当你点击橙色按钮的时候，就会出现弹出框；那么一个bootstrap的简单使用方法就讲角完了；

bootstrap如何使用

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。