bootstrap是一个webcss框架,集合了html/css/jquery为一家,创建响应式的页面.所谓的响应式就是适配不同的上网设备。

使用bootstrap的步骤:

1.下载bootstrap(用于生产环境的BootStrap)

2.导入bootstrap.css

3.导入jquery.js(因为bootstrap是基于jquery的所以要引入jquery)

4.导入bootstrap.js

5.添加一个meta标签,支持移动设备

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

6.将所有的内容放入布局容器中

<div class="container">...</div>

下面看下html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>bootstrap练习</title>

    <!--meta指定支持移动设备-->

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

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

    <script type="text/javascript" src="../../vendor/jquery/jquery-1.9.1.min.js"></script>

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

</head>

<body>

   <div class="container">

       <div style="border:1px solid red;"></div>

   </div>

   <div class="container-fluid">

       <div style="border:1px solid red;"></div>

   </div>

   <div style="border:1px solid red;"></div>

</body>

</html>

这样就对应了3中不同的样式,可以根据自己的需要来选择:

bootstrap使用的是栅格系统:

bootstrap包括三个部分:

1.全局css样式

2.组件(包括字体图标\下来菜单\导航\警告框\弹出框等)

3.js插件

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. PTA-BinarySearchTree BasicOperation

    /* 二叉查找树 基本操作 */#include <stdio.h> #include <stdlib.h> typedef int ElementType; typedef ...

  2. C语言学习记录_2019.02.08

    \n:换行:   \t:制表符,相当于大空格: a[5]={2};<------->a[5]={2,0,0,0,0}; 数组初始化的方法:a[5]={0};即全部初始化为0: 数组初始化的 ...

  3. C语言中堆内存的开辟和释放与内存处理函数

    C语言动态分配内存,malloc的出现就是来弥补静态内存分配的缺点 比如说我们在定义数组的时候,数组的长度必须是一个常量,不能改变的值,假如我事先定义了数组,一旦业务需求发生改变,那么这个数组就不能再 ...

  4. Nodejs-第一篇(什么是NodeJS)

    NodeJS 介绍 Node.js 是什么? 1.Node.js 是一个开发平台,就像Java开发平台..Net开发平台.PHP开发平台.Apple开发平台一样: 什么是开发平台?它们有对应的编程语言 ...

  5. 天天沉迷于皇上本宫的都是sb

    天天沉迷于皇上.本宫.奴才.太后的都是sb,时不时还要被某王和某平民的爱情感动的落泪.这是病,要治,最有效的治疗方法是38度的夏天去搬砖. 拍这些电视的人真不傻,知道真sb多,这种电视剧才能爆款.

  6. OSG环境变量设置

    osg中需要设置一些环境变量设置,如 OSG_FILE_PATH:此变量设置模型数据的目录 OSG_SCREEN: 此变量设置显示模型是在单屏幕还是多屏幕,1为单屏幕 OSG_WINDOW: 此变量设 ...

  7. idea tomcat热部署 Error running 'Tomcat 7': Unable to open debugger port (127.0.0.1:3622): java.net.SocketExcepti

    2018/5/6  经过测试,发现只需要修改 http port 为 8081即可,JMX port 不用改 默认是 1099 今天在进 tomcat 的 debug 模式时报了此异常, tomcat ...

  8. springmvc ajax传递json值时出现400错误 （问题出在sql上）

    问题出在sql的int不能达到 10000000000 这个值,从 int(11) 修改成 varchar(20) 就可以正常存储了

  9. HTML5上的LocalStorage基本用法

    1.获取localStorage的长度:window.localStorage.length 2.添加/编辑localStorage的内容:window.localStorage.setItem(键, ...

  10. QTP日常积累

    1.init同步测试对象 同步测试对象: CODE: Browser("百度一下,你就知道").Page("百度一下,你就知道").WebEdit(" ...