前言: 前几天，本想做一个登陆界面，但自己写form表单必然很丑，所以想用下bootstarp框架，之前听别人说bootstrap很牛的样子。但我完全不会bootstrap...

下载&目录

看bootstrap官网，接着我下载了用于生产环境Bootstrap:

解压出来是这样的:

目录结构大概是这样的，前几天在官网有看到。下面这个目录结构你应该先了解下:

bootstrap3
    ├── css
    │   ├── bootstrap-theme.css  //主题类型，生产上一般用不到
    │   ├── bootstrap-theme.css.map  //主题类型，生产上一般用不到
    │   ├── bootstrap-theme.min.css  //主题类型，生产上一般用不到
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map  //做映射的，可以理解为 shuaige = “luotianshuai”  那么掉shuaige的时候就相当于掉luotianshuai
    │   └── bootstrap.min.css
    ├── fonts   //包含了字体图标文件，他也是做的对应。下面的文件包含了不同系统下的字体图标
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   └── glyphicons-halflings-regular.woff2
    └── js
        ├── bootstrap.js
        ├── bootstrap.min.js

bootstrap做了很多美化过的css样式在bootstrap.css中，js则放在bootstrap.js。注意了，bootstrap的js与Jquery的js是不一样的。bootstrap的js必须依赖Jquery。所以在导入JS的时候，得先导入Jquery.

应用

接下来看官网给我们推荐的入门级模版.

虽然不怎么好看，但我想在本地上也能有这么个HTML文件。怎么搞??
右击鼠标，点击网页另存为，保存到本地。

下载的除了HTML文件外，还有另外一个文件Starter Template for Boostrap_files，打开后，显示如下:是所需要的bootstrap的css与js,可在HTML中引入。

我已经下载了bootstrap，所以我直接用我本地的bootstrap就好了，于是我删除上面的Starter Template for Boostrap_files文件夹。

bootstrap_1.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">

     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->

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

   </head>

   <body>

     <h1>你好，世界！</h1>

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

     <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>

     <!-- Include all compiled plugins (below), or include individual files as needed -->

     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

   </body>

 </html>
  • 11行从bootstrap导入css.
  • 19行导入jquery
  • 21行从bootstrap导入js

导入bootstrap的css与js注意路径:

用浏览器打开上面的html界面会出现"你好，世界"。很low，我不禁怀疑bootstrap真的有用吗??说好的美化效果呢

我在bootstrap官网随便找下"巨幕"的组件

将组件的代码贴到HTML的body中，便可以使用了。

 <!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">

     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->

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

   </head>

   <body>

     <h1>你好，世界！</h1>

     <div class="jumbotron container">

         <div >

             <h1>Hello, world!</h1>

             <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

         </div>

     </div>

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

     <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>

     <!-- Include all compiled plugins (below), or include individual files as needed -->

     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

   </body>

 </html>

效果图:

现在，你会使用bootstrap了吧，哈哈

建议好好看下官网，我可是看了整个下午……都没看完……

如何使用bootstrap的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. java udp socket（双通信）

    参考博客:http://blog.csdn.net/wintys/article/details/3525643/,非常感谢 实现功能:客户端发送字符串A      ->服务端接收并显示在控制台 ...

  2. Windows程序员必须知道的字符编码和字符集

     字符编码 (Character encoding) 在存储和传递文本过程中,为了使得所有电脑都能够正确的识别出文本内容,需要有一个统一的规则. 2. 字符集 (Character Set) ) 一般 ...

  3. MongoDB学习总结(六) —— 数据库备份和恢复

    我们都知道数据库数据经常备份是多么的重要,MongoDB作为一个数据库系统,自然提供了完善,丰富而且好用的备份与恢复机制. 以下介绍三种数据库备份和恢复的方式 > 数据目录直接拷贝 数据库目录直 ...

  4. spring和UEditor结合

    前言 春节无聊,就去弄一下富文本编辑器,然后百度了一番,很多说百度的UEditor不错,然后去官网照着文档弄一遍,是挺简单好用的.然后想把这玩意结合到自己的一个spring项目里面,果然还是在点上传图 ...

  5. toupper函数及一些小程序

    toupper 原型:extern int toupper(int c); 用法:#include <ctype.h> 功能:将字符c转换为大写英文字母 说明:如果c为小写英文字母,则返回 ...

  6. JavaScript 基本类型值-Undefined、Null、Boolean

    ▓▓▓▓▓▓ 大致介绍 ECMAScript中有5中简单的数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String. ▓▓▓▓▓▓ Undefined ...

  7. canvas实例：旋转缩放的方块

    首先在页面中创建一个canvas标签: <body> <canvas id="c1" width="500" height="500 ...

  8. 编程思想之——"人是活的，程序是死的"

    "人是活的,程序是死的"这句话我时常提起,可能很多人不是很理解我为什么会这样说,下面我就简单来谈谈我对这句话的理解. 1.不要因为技术而技术,技术选型的初衷是需求. 现在很多人在做 ...

  9. ERP中关于审批时速度太慢的SQL优化

    在给客户实施ERP的时候,经常遇到客户的请购单审批时,特别慢,一个阶段要转个40.50秒左右,3个阶段就差不多要3分钟,效率很低. 检查方法如下: 1.数据库跟踪语句,找出执行时间较久的语句,结果如下 ...

  10. 利用smarty模板（登录、有关信息操作等功能）

    smarty模板前提是:前端和后端是分开的,所以肯定会有很多的后台页面,php页面和html页面是分开存储的. (1)登录页面的编写也是分两个页面(后台和前端) 1.首先是后台的php页面,很简单只要 ...