BootStrap是一个专门做页面的
　　1.BS是基于HTML CSS JS 的一个前端框架(半成品)
　　2.预定义了一套CSS样式与JQurey实现
　　3.BS和Validation类似，都是JQ的插件，需要与与之配对的JQuery版本一起使用
　　4.BS内置了一些实现，也可以进行自定义实现，现在学习前者

BootStrap重要特点：
　　1.可以实现响应式布局(在不同大小的屏幕中显示处不同的状态)

BootStrap使用准备：
　　1.导入与之匹配的JQ
　　2.将dist目录下的三个文件夹复制进当前项目(这三个文件夹必须平级)（内置实现）

BootStrap模板：
　　<meta charset="utf-8">
　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　/*这三个标签必须这head标签之后，其它所有标签之前*/

　　<link href="../../css/bootstrap.css" rel="stylesheet">
　　<script src="../../js/jquery-1.11.3.min.js"></script>
　　<script src="../../js/bootstrap.js"></script>
　　/*引入BS内置的CSS，引入JQuery，引入BS的JS文件*/

　　<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
　　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
　　/*浏览器兼容，在IE9以下浏览器使用这个框架时需要使用*/

BootStrap布局：
　　1.容器：
　　　　方式1：使用 class = "container"
　　　　　　效果：一般情况(pc机)左右有留白，移动设备左右无留白
　　　　方式2：使用class = "container-fluid"
　　　　　　左右无留白
　　2.栅格
　　　　A：行 ：class="row"
　　　　B：列：class="col-xx-单元列数"
　　　　　　BS中默认将一行分成12个单元列，我们要指定自己的单元格时，必须要指定它所占的单元列数

　　　　注意：
　　　　　　A：一行中所有的单元格总列数相加可以小于12，剩余的部分是空白
　　　　　　B：一行中所有的单元格总列数相加大于12时，大于的部分换行排列
　　　　　　C：栅格化布局时，采用比已设置屏幕更小的屏幕所有列都占一行的原则(如果不设置的话)

　　3.BootStrap的布局都是通过class属性来定位div标签所在的位置来对页面进行布局
　　4.BS中的class实现
　　　　使用BS时，要实现某些功能，基本都是通过指定class实现的，BS中的class值都是固定的，类似于关键字可以被
　　　　BS识别，BS中的css文件有关于class的相关实现（.class{CSS样式实现}）

　　响应式布局：
　　　　1.实现机制：
　　　　　　超小屏幕-------手机---------xs
　　　　　　小屏幕---------ipad mini-------sm
　　　　　　中等屏幕--------ipad----------md
　　　　　　大屏幕---------pc---------lg
　　　　2.代码体现
　　　　　　不同设备上显示不同效果，布局上通过class指定
　　　　　　class="col-屏幕代号-单元列数" (要设置多种中间加空格)

　　　　特点：小屏优先
　　　　　　大屏幕指定列数了，但是比其小的屏幕是换行实现
　　　　　　小屏幕指定列数了，比其大的屏幕没有指定时，按照小屏的划分显示

　　　　显示与隐藏设置：
　　　　　　显示：visible-屏幕代号
　　　　　　隐藏：hidden-屏幕代号
　　　　特点：默认的是全部显示，如果设置了特定屏幕显示或隐藏，其它没有设置的则取反

　　　　布局偏移：
　　　　　　1.设置空的div占位
　　　　　　2.偏移量：<div class="col-xs-8 col-xs-offset-4 text-center">

　　BS中的计时器：（轮播图）
　　　　js代码：
　　　　　　$(function(){
　　　　　　　　$('.carousel').carousel({
　　　　　　　　　　interval:时间值
　　　　　　　　});
　　　　　　});
　　　　轮播图开始标签中：
　　　　　　data-interval="时间值"
　　BS中的按钮：
　　　　<button type="button" class="btn btn-关键字">显示字样</button>

　　BS中设置悬浮在页面之上的元素（导航条）：
　　　　<div class="container" data-spy="affix" data-offset-top="60" data-offset-bottom="200" id="daohang">
　　　　然后在css代码中定位该元素，将其置于页面之上：
　　　　#daohang {
　　　　　　/*显示在上面*/
　　　　　　z-index: 1;
　　　　　　top:0px;
　　　　　　left:0px;
　　　　　　right:0px;
　　　　}
　　BS中的胶囊条：
　　　　1.先查找导航实现，编写胶囊导航条
　　　　2.通过CSS设置它的位置
　　　　3.单击导航条定位到某个位置
　　　　　　A:href="#id值"
　　　　　　B:页面中的实现模块都有id值
　　　　　　href中的id值和页面模块的id值一一对应
　　　　4.body添加属性，定位添加css样式（因为是一直在页面中显示）

　　　　　代码实现：<body data-spy="scroll" data-target="#jiaonang">
　　　　　　　　　　　　<div class="container" id="jiaonang">
　　　　　　　　　　　　　　<ul class="nav nav-pills nav-stacked" >
　　　　　　　　　　　　　　　　<li class="active"><a href="#top">顶部</a></li>
　　　　　　　　　　　　　　　　<li><a href="#lunbo">轮播图</a></li>
　　　　　　　　　　　　　　　　<li><a href="#remen">热门商品</a></li>
　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　...
　　　　　　　　　　<style>
　　　　　　　　　　　　#jiaonang{
　　　　　　　　　　　　　　z-index:1;
　　　　　　　　　　　　　　width:100px;
　　　　　　　　　　　　　　position:fixed;(定义其在页面中的绝对位置)
　　　　　　　　　　　　　　top:100px;
　　　　　　　　　　　　　　left:50px;
　　　　　　　　　　　　}
　　　　　　　　　　　　body {
　　　　　　　　　　　　　　position:relative;
　　　　　　　　　　　　}
　　　　　　　　　　</style>

Bootstrap入门及其常用内置实现的更多相关文章

  1. python进阶04 装饰器、描述器、常用内置装饰器

    python进阶04 装饰器.描述器.常用内置装饰器 一.装饰器 作用:能够给现有的函数增加功能 如何给一个现有的函数增加执行计数的功能 首先用类来添加新功能 def fun(): #首先我们定义一个 ...

  2. Python入门之 Python内置函数

    Python入门之 Python内置函数 函数就是以功能为导向,一个函数封装一个功能,那么Python将一些常用的功能(比如len)给我们封装成了一个一个的函数,供我们使用,他们不仅效率高(底层都是用 ...

  3. 《zw版·Halcon入门教程与内置demo》

    <zw版·Halcon入门教程与内置demo> halcon系统的中文教程很不好找,而且大部分是v10以前的版本. 例如,QQ群: 247994767(Delphi与halcon), 共享 ...

  4. MYSQL常用内置函数详解说明

    函数中可以将字段名当作变量来用,变量的值就是该列对应的所有值:在整理98在线字典数据时(http://zidian.98zw.com/),有这要一个需求,想从多音字duoyinzi字段值提取第一个拼音 ...

  5. request.setCharacterEncoding 和常用内置对象 跳转

    1.直接转码 new String(name.getBytes("ISO8859_1"),"GBK") 2. request.setCharactorEncod ...

  6. JavaScript常用内置对象（window、document、form对象）

    由于刚开始学习B/S编程,下面对各种脚本语言有一个宏观的简单认识. 脚本语言(JavaScript,Vbscript,JScript等)介于HTML和C,C++,Java,C#等编程语言之间.它的优势 ...

  7. ASP.NET常用内置对象

    ASP.NET 常用内置对象:Response对象.Request对象.Session对象.Server对象.Application对象 1.Response对象: (1) 用于向浏览器输出信息 常用 ...

  8. Python常用模块中常用内置函数的具体介绍

    Python作为计算机语言中常用的语言,它具有十分强大的功能,但是你知道Python常用模块I的内置模块中常用内置函数都包括哪些具体的函数吗?以下的文章就是对Python常用模块I的内置模块的常用内置 ...

  9. python字符串常用内置方法

    python字符串常用内置方法 定义: 字符串是一个有序的字符的集合,用与存储和表示基本的文本信息. python中引号中间包含的就是字符串. # s1='hello world' # s2=&quo ...

随机推荐

  1. keepalive+Haproxy

    1.keepalive Keepalived 是一款轻量级HA集群应用,它的设计初衷是为了做LVS集群的HA,即探测LVS健康情况,从而进行主备切换,不仅如此,还能够探测LVS代理的后端主机的健康状况 ...

  2. vbox出现Failed to opencreate the internal network错误，无法启动虚拟机

    vbox出现Failed to opencreate the internal network错误,无法启动虚拟机 标签(空格分隔): 未分类 问题 Failed to open/create the ...

  3. UVA11572_Unique Snowflakes

    超级经典的题目,扫描区间,滑动窗口 对这题目的最大感受就是,单独看这个题目,其实不难,但是很多我感觉挺难或者没做出来的题目,都是由这些若干个经典的算法组合而成的 滑动窗口便是一个典型的例子!!!!遇到 ...

  4. linux命令du

    du log2012.log 查看文件大小 du -sh *   当前目录所有文件的大小 du|sort -nr|more 按照空间大小排序 du -c log30.tar.gz log31.tar. ...

  5. JDK动态代理源码剖析

    关键代码: 1.Proxy.newInstance: private static final Class<?>[] constructorParams = { InvocationHan ...

  6. android中的ContentProvider实现数据共享

    为了在应用程序之间交换数据,android中提供了ContentProvider,ContentProvider是不同应用程序之间进行数据交换的标准API.当一个应用程序需要把自己的数据暴露给其他程序 ...

  7. Spring Cloud服务保护

    微服务虽然解决了传统单体式应用各个模块之间强耦合的缺点,但同时也引出了新问题,由于微服务各个服务之间是独立部署的,并且一般情况下一个服务往往会依赖多个其他服务,并且服务之间的调用更多的是依赖不稳定的网 ...

  8. linux常用命令-1系统相关命令

    hostname #计算机名 passwd #修改密码 reboot #重启 shutdown –r now #立刻重启(root用户使用) shutdown –r 10 #过10分钟自动重启(roo ...

  9. SQL server 数据库镜像删除如何操作

    安全性 Permissions 需要对数据库拥有 ALTER 权限. 使用 SQL Server Management Studio 删除数据库镜像 在数据库镜像会话期间,连接到主体服务器实例,然后在 ...

  10. mongodb的学习 （2）

    1.条件查询 查询姓名为小明的学生                            db.local.find({name:'小明'});; 查询英语成绩大于90分的同学            ...