Bootstrap学习第一天

时间  2019-11-30
标签 bootstrap 学习 第一天 栏目 Bootstarp 繁體版
原文   原文链接

据说bootstrap很火，页面作的很是好看，今天我决定开始学习bootstrap。css


bootstrap是一种响应式前端技术，能够用于构建适应多种设备的网站页面，当页面尺寸变化时会根据变化的尺寸适应设备屏幕的大小。 注意
1.bootstrap必须是HTML5的网页
2.bootstrap中的动态效果都基于jquery库。html

 

文件目录结构：前端

 

CSS文件目录下还有一个文件bootstrap-responsive.css也有对应的压缩版本；jquery

 

 

第一个bootstrap案例代码：bootstrap

 

<!DOCTYPE html>学习

<html lang="en">测试

  <head>网站

    <meta charset="utf-8">spa

    <title>Bootstrap, from Twitter</title>htm

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="">

    <meta name="author" content="">

 

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

    <style>

      body {

        padding-top: 60px;  <

      }

    </style>

    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

  </head>

  <body>

 

    <div class="navbar navbar-inverse navbar-fixed-top">

      <div class="navbar-inner">

        <div class="container">

          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="brand" href="#">个人笔记</a>

          <div class="nav-collapse collapse">

            <ul class="nav">

              <li class="active"><a href="#">首页</a></li>

              <li><a href="#about">关于</a></li>

              <li><a href="#contact">内容</a></li>

            </ul>

          </div>

        </div>

      </div>

    </div>

 

    <div class="container">

 

      <h1>这是一个Bootstrap的测试页</h1>

      <p>学习bootstrap第一天.<br>bootstrap是一种响应式前端技术，能够用于构建适应多种设备的网站页面，当页面尺寸变化时会根据变化的尺寸适应设备屏幕的大小。

           注意<br>

           1.bootstrap必须是HTML5的网页<br>

           2.bootstrap中的动态效果都基于jquery库。</p>

 

    </div> 

 

 

    <script src="bootstrap/js/jquery.js"></script>

          <script src="bootstrap/js/bootstrap.js"></script>

 

  </body>

</html>

 

 

正常的页面：

 

 

缩小后的页面：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程