BootStrap的使用教程，适合新手小白！！

最新推荐文章于 2024-08-08 07:40:07 发布

某某~

最新推荐文章于 2024-08-08 07:40:07 发布

阅读量6.6k

点赞数 4

文章标签： bootstrap html html5

本文链接：https://blog.csdn.net/m0_62309118/article/details/120522712

版权

本文介绍了如何简单快速地使用BootStrap框架搭建网页。首先从官方网站下载所需文件，然后在本地创建一个测试文件夹，将Bootstrap文件复制进去，并新建一个HTML文件。接着，引入基本模板代码，浏览器预览后即可看到初步效果。进一步展示了如何创建垂直的胶囊式导航菜单的实例。BootStrap作为流行的前端框架，简化了网页设计过程。

摘要由CSDN通过智能技术生成

1.bootStrap怎么用？

第一步、链接: 官网
在这里插入图片描述

点击红线边框处即可跳转到下载页面，有三个东西可以给我们选择，由于我们现在处于初级使用阶段，或者说我们直接用在生成环境下，我们下载第一个就好：
在这里插入图片描述

下载成功后可以得到一个.zip的文件，解压后我们可以得到一个包含css、fonts和js的文件夹，ok，准备工作我们就做好了。

现在要怎么用呢，一头雾水吧，我们新建一个文件夹，命名为test，将刚刚三个文件夹复制到test文件夹中，现在用sublime打开刚刚的文件夹，点击file-open folder，选择test文件夹点击确定即可，如下：
在这里插入图片描述

在test上右键选择new file，然后ctrl+s保存文件名为index.html，这时候回到bootstrap的官网，导航栏选择“起步”，向下拖动或在右侧选择“基本模板”，将下列代码进行复制，粘贴到index.html中，如下：
在这里插入图片描述
粘贴到sublime中，这是一个html5格式的html文件：

这时候我们点击index.html，浏览器打开后就可以在屏幕上看到一个Diao炸天的“Hello world”了。
在这里插入图片描述
到这里，其实你已经用bootstrap完成了第一个页面设计了。

2.实例展示：

1.垂直的胶囊式导航菜单

实例：

<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

结果如下所示：

在这里插入图片描述

3.总结：

BootStrap来自Twitter（推特），是目前最受欢迎的前端框架。BootStrap是基于HTML、css和JavaScript的，它简洁灵活，使得web开发更加快捷。
● 中文官网：http：//www.bootcss.com/
● 官网：http：//getbootstap.com/
● 推荐使用：http：//bootstrap.css88.com/

框架：顾名思义就是一种架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。