bootstap的初体验-01HelloWorld

原创于 2020-06-11 21:16:47 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #jquery #css #html

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

bootstrap

8 篇文章

订阅专栏

本文介绍了作者初次接触Bootstrap前端框架的经历，从下载Bootstrap和jQuery开始，逐步构建项目，并通过简单的实例展示了Bootstrap的响应式设计特性。

要做web编程，免不了要做前端开发。看了很多网友的意见，说是bootstrap简单易上手，于是入坑了。今天是第一天，温习了一下HTML,CSS和jQuery的一些基础知识，然后就开始入门bootstrap了。

入门总是从最单的事情做起，慢慢建立信心。

下载bootstrap

下载jQuery

新建项目

把bootstrap复制到项目文件夹下

把jQuery复制到项目文件夹下的js文件夹下

创建并编辑index.html

这里最关键的是三行代码：

        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    </head>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

导入bootstrap的css文件，导入bootstrap的js文件和导入jQuery文件。

然后寻找好看的bootstrap官网实例，把好看的网页主题复制过来，修修改改就成了HelloWorld。效果如下图。

哦，对了，boostrap还有个挺好的功能，能够自适设备界面，如果在移动设备上，如手机，因为界面太小，上面的几个按钮状的会变成下拉菜单状，如下图。

html文件源代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    </head>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
              </div>
              <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#contact">Contact</a></li>
                </ul>
              </div><!--/.nav-collapse -->
            </div>
        </nav>   
        <div class="container">
            <div class="starter-template">
                <br>
                <br>
                <br>
                <h1>Hello world</h1>
          </div>
        </div>
    </body>
</html>

（全文完）