什么是Bootstrap？

Bootstrap是一个web框架。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

如何获取Bootstrap：

从http://v3.bootcss.com/网站下载bootstrap。

将下载的压缩包解压后将下列3哥文件夹拷贝到D盘的的bootsrap-01文件夹下：

注意：Bootstrap是基于jQuery的，所以js文件夹里还要放入一个jQuery文件，下载地址：http://jquery.com/

然后新建一个pages文件夹（用于放编写的html文件），里面新建一个Demo.html文件，，用编辑器打开，写入如下代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<title>Bootstrap Demo</title>

 <!-- Bootstrap  CSS -->

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

 <!-- Bootstrap  javascript -->

<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

<script type="text/javascript">

</script>

<style type="text/css">

    .frame {

        margin:    0 auto;

        width:    1000px;

        height:    100%;

    }

</style>

</head>

<body>

    <div class="frame">

        <!-- Bootstrap 警告框 -->

        <div class="alert alert-success" role="alert">Well done! You successfully read this important alert message.</div>

        <div class="alert alert-info" role="alert">Well done! You successfully read this important alert message.</div>

        <div class="alert alert-warning" role="alert">Well done! You successfully read this important alert message.</div>

        <div class="alert alert-danger" role="alert">Well done! You successfully read this important alert message.</div>

        <!-- Bootstrap 进度条 -->

        <div class="progress">

            <div class="progress-bar progress-bar-info progress-bar-striped"

                role="progressbar" aria-valuenow="20" aria-valuemin="0"

                aria-valuemax="100" style="width: 20%">

                <span class="sr-only">20% Complete</span>

            </div>

        </div>

        <div class="progress">

            <div class="progress-bar progress-bar-warning progress-bar-striped"

                role="progressbar" aria-valuenow="60" aria-valuemin="0"

                aria-valuemax="100" style="width: 60%">

                <span class="sr-only">60% Complete (warning)</span>

            </div>

        </div>

        <div class="progress">

            <div class="progress-bar progress-bar-danger progress-bar-striped"

                role="progressbar" aria-valuenow="80" aria-valuemin="0"

                aria-valuemax="100" style="width: 80%">

                <span class="sr-only">80% Complete (danger)</span>

            </div>

        </div>

        <!-- Bootstrap 带情景效果的面板 -->

        <div class="panel panel-default">

            <div class="panel panel-heading">面板标题1</div>

            <div class="panel panel-body">面板内容1</div>

        </div>

        <div class="panel panel-primary">

            <div class="panel panel-heading">面板标题2</div>

            <div class="panel panel-body">面板内容2</div>

        </div>

        <div class="panel panel-info">

            <div class="panel panel-heading">面板标题3</div>

            <div class="panel panel-body">面板内容3</div>

        </div>

        <div class="panel panel-danger">

            <div class="panel panel-heading">面板标题4</div>

            <div class="panel panel-body">面板内容4</div>

        </div>

        <!--Bootstrap 图标-->

        <div>

            <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>

        <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>

        <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>

        <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>

        </div>

        <div class="alert alert-danger" role="alert">

          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

          <span class="sr-only">Error:</span>

          Enter a valid email address

        </div>

        <!--Bootstrap 巨幕-->

        <div class="jumbotron ">

            <div class="container">

                <div class="page-header">

                    <h1>Hello Bootstrap !</h1>

                </div>

                <p>

                    This is a  simple hero unit, a simple jumpbotron-style compoent for

                    calling extra attention to featured content or information.

                </p>

                <p>

                    <a class="btn btn-primary btn-1g" href="javascript:void(0)" role="button">Learn more</a>

                </p>

            </div>

        </div>

    </div>

</body>

</html>

执行效果如下：

 总结：Bootstrap框架给我的印象就是非常大方、简介、漂亮、易上手，希望小伙伴们好好学，该框架是目前公司里非常流行的一种框架。

转载请带上本文链接：http://www.cnblogs.com/stm32stm32/p/6973890.html

简单易上手的Bootstrap的更多相关文章

  1. velocity 新手用小常识--开源，简单易上手

    项目中经常用到的 .vm 后缀文件是什么? 基于 java 的 velocity 模版引擎的一种页面控制文件,是一些类似 html 语句和一种叫 VLT 的语句构成   velocity --美 [v ...

  2. 手撸一个SpringBoot的Starter，简单易上手

    前言:今天介绍一SpringBoot的Starter,并手写一个自己的Starter,在SpringBoot项目中,有各种的Starter提供给开发者使用,Starter则提供各种API,这样使开发S ...

  3. 来来来，告诉你一个简单易上手的KPI打分的方子

    ▋1/3 前言 每个企业都要定期为员工的工作来进行考核,有月度考核.季度考核和年度考核. 这次月度考核,我打算用一种新的方式来执行. 我在我们研发小组内曾分享过能力-意愿四象限图.根据岗位技术能力和工 ...

  4. 一个简单易上手的短信服务Spring Boot Starter

    前言 短信服务在用户注册.登录.找回密码等相关操作中,可以让用户使用更加便捷,越来越多的公司都采用短信验证的方式让用户进行操作,从而提高用户的实用性. Spring Boot Starter 由于 S ...

  5. mapreduce 倒序 排序 最简单 易上手

    对于mapreduce倒序只需要建立一个类,然后继承WritableComparator 在重写 Compare函数最后在main里调用一下,就可以实现倒序排序: 代码: public static ...

  6. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

  7. 一个简单且易上手的 Spring boot 后台管理框架-->EL-ADMIN

    一个简单且易上手的 Spring boot 后台管理框架 后台源码 前台源码

  8. PNotify – 简单易用的 JS 通知，消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  9. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

随机推荐

  1. 可存放任意类型变量的动态数组--C语言实现

    之前在训练营的时候被要求用C语言实现一个可以存放任意类型数据的栈.现在尝试实现一个数组版本. 首先用到的结构体如下(接触了Win32编程所以长得有点像里面的那些类型): typedef struct ...

  2. Java设计模式之模板方法设计模式(银行计息案例)

    不知道为什么,这几天对Java中的设计模式非常感兴趣,恰巧呢这几天公司的开发任务还不算太多,趁着有时间昨天又把模板方法模式深入学习了一下,做了一个客户在不同银行计息的小案例,感触颇深,今天给各位分享一 ...

  3. 【firefox】关闭firefox缓存

    在Firefox中关闭缓存 看看这里 在地址栏输入:about:config 然后在过滤器中输入:browser.cache.disk.enable 解释:When a page is loaded, ...

  4. VerilogHDL常用的仿真知识

    在描述完电路之后,我们需要进行对代码进行验证,主要是进行功能验证.现在验证大多是基于UVM平台写的systemverilog,然而我并不会sv,不过我会使用verilog进行简单的验证,其实也就是所谓 ...

  5. hadoop以及相关组件介绍以及个人理解

    前言 本人是由java后端转型大数据方向,目前也有近一年半时间了,不过我平时的开发平台是阿里云的Maxcompute,通过这么长时间的开发,对数据仓库也有了一定的理解,ETL这些经验还算比较丰富.但是 ...

  6. FaceRank，最有趣的 TensorFlow 入门实战项目

    FaceRank,最有趣的 TensorFlow 入门实战项目 TensorFlow 从观望到入门! https://github.com/fendouai/FaceRank 最有趣? 机器学习是不是 ...

  7. 关于戴尔没有活动分区，遇到了“Windows安装程序无法将windows配置为在此计算机的硬件上运行”提示等

    虽然只有几句话,但是还是超级好用的 装过很多戴尔的笔记本,发现很多都是这里的问题导致系统装不进去. 1.硬盘设置有问题.进BIOS ,到SATA 设置看看硬盘是不是设置为AHCI了.这个ghost系统 ...

  8. ffmpeg编解码视频导致噪声增大的一种解决方法

    一.前言 ffmpeg在视音频编解码领域算是一个比较成熟的解决方案了.公司的一款视频编辑软件正是基于ffmpeg做了二次封装,并在此基础上进行音视频的编解码处理.然而,在观察编码后的视频质量时,发现图 ...

  9. Scala 令人着迷的类设计

    尽管 Scala 和 Java 有很多相同的地方, 但是在类的声明, 构造, 访问控制上存在很大的差异, 通过本文你也能看到相比较 Java 很多啰嗦的模板代码, Scala 更加的简洁, 使用 Sc ...

  10. 前端开发工具Brackets介绍，安装及安装Emme插件时踩过的坑

    对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于 ...