【bootstrap】使用，初学者的总结_办公生活

创始人

2024-05-07 03:17:05

官网：bootstrap中文网
在这里插入图片描述
首页点击v3文档，然后下载最左边的那个。
解压后把里面的css和js文件复制过去，因为也要用到jQuery，所以要把jQuery.min.js也一起放入js文件夹。
然后，就是导入：

先创建一个div：作为最大的一个盒子

在这里插入图片描述
把上面的代码复制到你的HTML中：

在这里插入图片描述
导航条也是直接复制过去就行：

可以任意修改：

模态框：
在JavaScript插件里面能找到

在这里插入图片描述
两种自定义方式：
第一种js:需要引入jQuery文件

$(".mybtn").on("click",function() {$("#btn").modal();
})

第二种css：
在模态框的第一行代码中加入id

模态框里面的内容修改：
在这里插入图片描述
在全局CSS样式里找到一个表单，替换掉p标签即可：

 One fine body…

在这里插入图片描述
然后是一个tab栏切换：


耳机
手环
手机
电脑
耳机
手环
手机
电脑

在这里插入图片描述
上面的内容和下面是对应的。