BootStrap基础入门

小咪咪 2022-08-20 02:29 300阅读 0赞

**一、BootStrap介绍**

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

**1、什么Bootstrap**

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

**2、Bootstrap背景**

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

**3、Bootstrap优势**

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap,夸浏览器特性好。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

**4、Bootstrap包的内容**

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

**二、Bootstrap 的使用**

1、Bootstrap：的使用就是合理的使用，封装好的css样式和js框架。

2、下载Bootstrap 载入到项目中，进行调用；

进入Bootstrap官网 下载Bootstrap官网 http://www.bootcss.com；下载Bootstrap 组件（提示：下载用于生产环境的 Bootstrap），下载完成后，有三个文件夹分别是：css、fonts、js；这三个文件夹就是封装好的Bootstrap框架，在框架文件夹css中全部是已经书写好的css样式，我们开发者只是引入就可以使用了，有如下文件：bootstrap.css于bootstrap.min.css, 类似的这个文件其实功能是一样的，后者为压缩后的文件，前者没有被压缩。而fonts于js文件夹则是已经封装好的字体、图标、javascript框架库；

**三、建立项目、搭建环境**

本次学习演示；使用HBuilder软件进行开发：

**1、使用HBuilder建立项目**

点击新建—web项目

![4ac75a42-f3ed-48a0-8390-0a2ccd99ebc4.png][]

书写项目名称：bootstrap 确定

**2、导入Bootstrap框架**

点击项目右键->选择导入

![5d7b728d-3283-4228-957f-e97544b2e554.png][]

在导入中选择文件系统，将路径设置到下载的Bootstrap的位置确定；

3、下载jquery最新框架 放置到js文件夹中

**四、案例--制作导航页**

**1、在Hbuilder中打开index页面，在页面中引入框架文件**

![a46710c9-755b-4155-b7f3-87771b7af980.png][]

**2、创建导航标签**

![019dbb83-0e6e-467c-94e1-cb6c834aab6a.png][]

**3、制作导航栏的内容部分 如下添加到 nav标签中：**

![00faf0a7-0a64-4097-9a25-a13dc554439e.png][]

设置内容部分样式：Container-fluid的默认样式 如下：设置了外边距和内边距

![3f38cb67-7500-4ec3-8263-d55952b675a2.png][]

**4、制作导航栏的头部**

为整个网页加入logo，讲如下代码加入到 导航内容中，当然此时的img标签 需要有设置站点的logo图片；

![1c6edbf3-0694-4367-850c-a8be041d334c.png][]

样式解释代码如下：

![ffc786bb-5b50-4912-9937-9db6aded55ec.png][]

![619d0688-eb38-42d9-b1a2-37079bfe213a.png][]

**5、制作导航条部分 放置在container中**

![8de3e702-0fff-4a69-9c65-5f882170ceed.png][]

Navbar-collapse：设置为流布局方式，设定超过一定得区域显示内容，否则隐藏内容，同是为导航部分设定登录|注册快捷方式 以及搜索快捷方式；

**6、响应式布局**

代码放置在 导航的头部中； collapse 主要是设置为 折叠隐藏方案 通过按钮控制内容部分的显示状况；

![152269ed-3cd0-4963-82e8-b945bb69c6dd.png][]

响应式导航栏制作完毕

**7、完整代码如下**  
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
          
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>  
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>  
        <script type="text/javascript" src="js/bootstrap.min.js"></script>      
          
        <title>导航栏制作</title>  
    </head>  
    <body>  
          
      <nav class="nav navbar-default">  
            
          <div class="container-fluid">  
                
              <div class="navbar-header">  
                  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
                      <span class="icon-bar"></span>  
                      <span class="icon-bar"></span>  
                      <span class="icon-bar"></span>  
                  </button>  
                    
                  <a href="\#" class="navbar-brand">  
                      <img src="./img/logo.png" style="margin-top:-10px;"/>  
                  </a>  
              </div>  
                
     
            
              <div class="collapse navbar-collapse">  
                  <ul class="nav navbar-nav">  
                      <li class="active"><a href="">首页</a> </li>  
                      <li><a href="">介绍</a> </li>  
                      <li><a href="">商品</a> </li>  
                  </ul>  
                  <div class="navbar-form navbar-right">  
                      <a href="\#" class="navbar-link">登录</a>  
                      <a href="\#" class="navbar-link">注册</a>  
                      <input type="text" class="form-control" name="" id="" value="" />  
                      <button class="btn btn-primary">搜 索</button>                        
                  </div>  
              </div>  
          </div>  
      </nav>  
    </body>  
</html>

**8、导航案例展示**

当浏览器超过内容宽度时候

![05ffe5b8-85a6-4668-bbc2-39cfeae8315c.png][]

响应式模式

![2501b740-3f9d-4bac-a8a9-0a63ac385eb0.png][]

![987b1ae4-034d-4776-b48d-8beb6ebb17b5.png][]

**五、制作轮显示的广告**

**1、建立轮显页面**

**2、引入Bootstrap框架**

![e473653e-8fa0-4184-82a5-ad290ff0d070.png][]

**3、设置轮显区域**

![cd18d614-3916-4592-ad34-169176613383.png][]

**4、设置轮显 案例样式**  
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">   
</div>  
**5、设置轮显图片 线型滚动效果**  
<div class="carousel-inner" style="text-align:center">   
</div>

**6、设定轮显项目图片**  
<div class="item active">  
              <img alt="First slide" src="img/aa.jpg" style="width:500px"></img>  
         </div>  
         <div class="item">  
             <img alt="Second slide" src="img/bb.jpg" style="width:500px"></img>  
         </div>  
         <div class="item">  
             <img alt="Third slide" src="img/cc.jpg"  style="width:500px" ></img>  
         </div>

**7、制作轮显控制按钮：**  
<a class="left carousel-control" href="\#carousel-example-generic" data-slide="prev">  
              <span class="glyphicon glyphicon-chevron-left"></span>  
         </a>  
           <a class="right carousel-control" href="\#carousel-example-generic" data-slide="next">  
            <span class="glyphicon glyphicon-chevron-right"></span>  
          </a>

**8、制作轮显焦点**  
<ol class="carousel-indicators">  
<li data-target="\#carousel-example-generic" data-slide-to="0" class="active"></li>  
    <li data-target="\#carousel-example-generic" data-slide-to="1"></li>  
    <li data-target="\#carousel-example-generic" data-slide-to="2"></li>  
</ol>

**9、轮显整体代码**  
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
          
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>  
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>  
        <script type="text/javascript" src="js/bootstrap.min.js"></script>      
        <title>轮显广告</title>  
    </head>  
    <body >  
        <div style="width:500px; margin-left:auto; margin-right:auto;">  
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  
                
              <ol class="carousel-indicators">  
                <li data-target="\#carousel-example-generic" data-slide-to="0" class="active"></li>  
                <li data-target="\#carousel-example-generic" data-slide-to="1"></li>  
                <li data-target="\#carousel-example-generic" data-slide-to="2"></li>  
              </ol>   
                
              <div class="carousel-inner" style="text-align:center">  
                <div class="item active">  
                  <img alt="First slide" src="img/aa.jpg" style="width:500px"></img>  
                </div>  
                <div class="item">  
                  <img alt="Second slide" src="img/bb.jpg" style="width:500px"></img>  
                </div>  
                <div class="item">  
                  <img alt="Third slide" src="img/cc.jpg"  style="width:500px" ></img>  
                </div>  
              </div>   
                
              <a class="left carousel-control" href="\#carousel-example-generic" data-slide="prev">  
                <span class="glyphicon glyphicon-chevron-left"></span>  
              </a>  
              <a class="right carousel-control" href="\#carousel-example-generic" data-slide="next">  
                <span class="glyphicon glyphicon-chevron-right"></span>  
              </a>  
            </div>  
        </div>  
 </body>  
</html>  
**10、轮显案例展示**

![c6b0681a-0488-4b8f-8c11-edc73fe65a65.png][]

![c830927b-6d10-4808-b31a-5efdf03260b4.png][]

[4ac75a42-f3ed-48a0-8390-0a2ccd99ebc4.png]: /images/20220731/fb3522178e3b4e0c88a773c45b926fb1.png
[5d7b728d-3283-4228-957f-e97544b2e554.png]: /images/20220731/3da2c21257d74d5d8e2cce72433dd0b1.png
[a46710c9-755b-4155-b7f3-87771b7af980.png]: /images/20220731/774cec450f234797b86e18f205e36864.png
[019dbb83-0e6e-467c-94e1-cb6c834aab6a.png]: /images/20220731/18224a041c074c5592ac3a88656472d5.png
[00faf0a7-0a64-4097-9a25-a13dc554439e.png]: /images/20220731/7701d665a1604fb5bbe741d815a33558.png
[3f38cb67-7500-4ec3-8263-d55952b675a2.png]: /images/20220731/8ddac8def90143be940f86a3eefae6c5.png
[1c6edbf3-0694-4367-850c-a8be041d334c.png]: /images/20220731/845b90edfe684e1ca1b0eee54080496e.png
[ffc786bb-5b50-4912-9937-9db6aded55ec.png]: /images/20220731/319fc0435b5f480d914298825b51017f.png
[619d0688-eb38-42d9-b1a2-37079bfe213a.png]: /images/20220731/b6faf491ddda46788f49d8288736f5e0.png
[8de3e702-0fff-4a69-9c65-5f882170ceed.png]: /images/20220731/35f4b96683a743fd9832db5fccdfe574.png
[152269ed-3cd0-4963-82e8-b945bb69c6dd.png]: /images/20220731/4cbbbbe00ca9457c865c81ff5886416d.png
[05ffe5b8-85a6-4668-bbc2-39cfeae8315c.png]: /images/20220731/a3b6779df5354bedbc221054299b15a8.png
[2501b740-3f9d-4bac-a8a9-0a63ac385eb0.png]: /images/20220731/e784484c24ab4616b38d92e00dee917d.png
[987b1ae4-034d-4776-b48d-8beb6ebb17b5.png]: /images/20220731/3e154ea74b824bdc954ee4cb6f5fb119.png
[e473653e-8fa0-4184-82a5-ad290ff0d070.png]: /images/20220731/898e776309db4ddb8948102da67ebe47.png
[cd18d614-3916-4592-ad34-169176613383.png]: /images/20220731/dce0296d17c145479a93c8a4b25a1c4e.png
[c6b0681a-0488-4b8f-8c11-edc73fe65a65.png]: /images/20220731/f286596a00c4449ca2f3641df3b75042.png
[c830927b-6d10-4808-b31a-5efdf03260b4.png]: /images/20220731/c064268b77094fe29431d2c10be01f2f.png