您的位置：首页 > Web前端 > BootStrap

BootStrap基础入门

2016-01-26 17:26 615 查看

一、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项目

书写项目名称：bootstrap 确定

2、导入Bootstrap框架

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

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

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

四、案例--制作导航页

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

2、创建导航标签

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

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

4、制作导航栏的头部

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

样式解释代码如下：

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

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

6、响应式布局

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

响应式导航栏制作完毕

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、导航案例展示

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

响应式模式

五、制作轮显示的广告

1、建立轮显页面

2、引入Bootstrap框架

3、设置轮显区域

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、轮显案例展示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap github jquery

相关文章推荐

新的分享

章节导航