05 . 前端之BootStrap

时间:2020-05-23 20:01:11   收藏:0   阅读:46

BootStrap简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。

 

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

 

简单,直观,强悍的前端开发框架,让web开发更迅速

 

优点: 快速,简单,灵活的栅格系统,小而强大,响应式布局,跨平台等

 

为什么使用BootStrap?

技术图片

技术图片

 

Bootstrap包的内容

 

 

BootStrap环境安装

我们可以再下面地址下载bootstarp相应版本

bootstrap下载地址 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

使用文档 https://getbootstrap.com/docs/4.4/components/navbar/

 

国内可以使用CDN上的库

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

国际推荐使用:https://cdnjs.com/

 

文件结构

技术图片

如上图所示,可以看到已编译的 CSS 和 JS(bootstrap.),以及已编译压缩的 CSS 和 JS(bootstrap.min.)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。

 

 

Bootstrap使用

Example1

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link type="text/css" href="../bootstrap.min.css" rel="stylesheet">
</head>
<body>
<a class="btn btn-primary" href="#" role="button">Button按钮</a>
<button class="btn btn-success" type="submit">Button</button>
<input class="btn btn-warning" type="button" value="Input">
</body>
</html>

 

Example2

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<table border="1" class="table table-bordered table-hover table-striped">
   <thead>
   <tr>
       <th>姓名</th>
       <th>年龄</th>
   </tr>
   </thead>
   <tbody>
   <tr>
       <td>幽梦</td>
       <td>18</td>
   </tr>
   <tr>
       <td>渐渐</td>
       <td>18</td>
   </tr>
   <tr>
       <td>无奈</td>
       <td>18</td>
   </tr>
   </tbody>
</table>
</body>
</html>

 

 

Example3

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <link type="text/css" rel="stylesheet" href="bootstrap.min.css">
?
   <style>
       .row {
           margin-bottom: 20px;
      }
?
       .row .row {
           margin-top: 10px;
           margin-bottom: 0px;
      }
?
      [class*="col-"] {
           padding-top: 15px;
           padding-bottom: 15px;
           background-color: #eee;
           background-color: rgba(86, 61, 124, .15);
           border: 1px solid #dddddd;
           border: 1px solid rgba(86, 61, 124, .2);
      }
   </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
       <!-- Brand and toggle get grouped for better mobile display -->
       <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse"
                   data-target="#bs-example-navbar-collapse-1">
               <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>
?
       <!-- Collect the nav links, forms, and other content for toggling -->
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <form class="navbar-form navbar-right" role="search">
               <div class="form-group">
                   <input type="text" class="form-control" placeholder="Email">
               </div>
               <div class="form-group">
                   <input type="text" class="form-control" placeholder="Password">
               </div>
               <button type="submit" class="btn btn-success">Sign in</button>
           </form>
       </div>
       <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
</nav>
<div class="jumbotron">
   <div class="container">
       <h1>Hello, world!</h1>
?
       <p>This is a template for a simple marketing or informational website. It includes a large callout called a
          jumbotron and three supporting pieces of content. Use it as a starting point to create something more
          unique.</p>
?
       <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
   </div>
</div>
?
<div class="container">
   <div class="row">
       <div class="col-md-4">
           <h2>Heading</h2>
?
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
              condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
              euismod. Donec sed odio dui.</p>
?
           <p><a class="btn btn-default btn-lg" role="button">View details &raquo;</a></p>
       </div>
?
       <div class="col-md-4">
           <h2>Heading</h2>
?
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
              condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
              euismod. Donec sed odio dui.</p>
?
           <p><a class="btn btn-default btn-lg" role="button">View details &raquo;</a></p>
       </div>
       <div class="col-md-4">
           <h2>Heading</h2>
?
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
              condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
              euismod. Donec sed odio dui.</p>
?
           <p><a class="btn btn-default btn-lg" role="button">View details &raquo;</a></p>
       </div>
   </div>
   <hr/>
   <footer>
       <p>&copy;Company 2014</p>
   </footer>
</div>
</body>
</html>

 

BootStrapCSS

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!