系统整理一遍bootstrap 的东西

1/  设置页面为H5文档类型

<!DOCTYPE html>
<html lang="zh-CN">
...
</html>

2/  v3将移动设备css和PC设备css加了自适应,所以引用一个文件即可.而且支持移动设备优先,  禁用缩放功能.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

3/ 布局容器.container

<div class="container">
...
</div>
<!--用于固定宽度的容器--> <div class="container-fluid">
...
</div>
<!--用于占满view-port宽度属性的容器,全屏-->

4/ row 必须包含在. container 或 .container-fluid 中, 只有column 可以作为row 的直接子元素

***

网站布局: 栅格化布局,为什么选择12列,960=2^6*3*5 在1280*768有更多种选择. 使用GRIDPAK 创建自己的栅格化布局框架

FLEX布局: 九宫格式布局.  display:flex

瀑布流布局: masonry

***

5/ 设置页面元素快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

6/  设置页面元素隐藏

<div class="show">...</div>
<div class="hidden">...</div>
<div class="invisible">...</div>
 

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

随机推荐

  1. C# Cache何时使用及使用方法

    Cache 即高速缓存.那么cache是怎么样提高系统性能与运行速度呢?是不是在任何情况下用cache都能提高性能?是不是cache用的越多就越好呢?我在近 期开发的项目中有所体会,写下来当作总结也希 ...

  2. mysql模拟插入数据表

    由于测试或者学习需要,我们要经常向一个新建的数据表插入几百万行以上的数据来验证我们的一些想法,比如索引的合理构建,表字段类型的设计等等,下面跟大家演示如何往一个新建的数据表插入N多条数据. 1.新建一 ...

  3. JVM虚拟机选项:Xms Xmx PermSize MaxPermSize区别

    java虽然是自动回收内存,但是应用程序,尤其服务器程序最好根据业务情况指明内存分配限制.否则可能导致应用程序宕掉. 举例说明含义:-Xms128m 表示JVM Heap(堆内存)最小尺寸128MB, ...

  4. 关于MySQL性能的比较

    需求:在传递一组职位编号的时候,需要统计该职位的 当天的投递情况 和 有历史记录以来总的投递量 解决方案一: 每次都进行一次数据库查询,遍历职位id,再根据职位id去查询相应时间内的投递量 /** * ...

  5. SSO单点登录(转载)

    昨天和几位朋友探讨到了这个话题,发现虽然单点登录,或者叫做独立的passport登录虽然已经有了很多实现方法,但是能真正了解并实现的人却并不太多,所以些下此文,希望从原理到实现,能让大家了解的多一些 ...

  6. jQuery的touchstart,touchmove,touchend的获取位置

    $('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; v ...

  7. VS调试时监视上一个错误代码和错误的文本描述

    以前我都是用GetLastError()然后在MSDN里面查错误原因的.现在才知道有很简便的方法: 在Watch窗口选择一行,然后输入$err,hr

  8. oracle记录各登陆主机用户名,登陆ip,所执行的命令

    oracle记录各登陆主机用户名,登陆ip,所执行的命令 /etc/profile #history USER_IP=`>/dev/null| awk '{print $NF}'|sed -e ...

  9. OpenStack cloudCompute glassary术语project,tenant,user

    1,tenantA group of users, used to isolate access to Compute resources(一组用户,用于隔离访问计算资源). An alternati ...

  10. Oracle表空间常用操作

    --创建表空间 create tablespace test datafile 'E:\test2_data.dbf' SIZE 20M autoextend on next 5M maxsize 5 ...