年底没什么项目做了,整理下最近做的网站使用到的bootstrap知识

一、导入bootstrap样式和脚本

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap.min.js" type="text/javascript"></script>

二、导航条

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand pull-left" href="#">RenderKa
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<div class="icon_home"><a href="Index.aspx" target="_blank">CN</a>/EN</div>
<ul id="nav-list" class="nav pull-right">
<li><a href="#price">Price</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#workflow">Workflow</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>

1、.navbar class 添加 class .navbar-fixed-top:表示让导航栏固定在页面的顶部

2、.brand class: 以不同的方式显示

3、.pull-left: 靠左对齐

4、为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为.nav-collapse <div> 中的元素。

三、布局容器

<div class="container  container-fluid">
<div class="row-fluid" id="workflow">
<h1 class="page-title" >Workflow
<a href="#price" class="arrow-top">
<img src="img/arrow-top.png">
</a>
</h1>
<div class="span2" style="font-size:13px;"><img src="img/kefu1.jpg" />
contact our customer service via Skype or email to place your order
</div>
<div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>
<div class="span2" style="font-size:13px;"><img src="img/wendong1.jpg" />
upload your archived scene file including all materials and setups
</div>
<div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>
<div class="span2" style="font-size:13px;"><img src="img/times1.jpg" />
we will send testframes to confirm that everything works fine at our end after your confirmation we will proceed start rendering
</div>
<div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>
<div class="span2" style="font-size:13px;"><img src="img/xiazai1.jpg" />
after we received the payment we will send the files via dropbox or ftp
</div>
</div>
</div>

1、.container class: 用于固定宽度并支持响应式布局的容器

2、.container-fluid: 用于 100% 宽度,占据全部视口(viewport)的容器

3、1个row里最多12个span

四、滚动监听

1、引入js:<script src="js/bootstrap-scrollspy.js" type="text/javascript"></script>

2、(1)向您想要监听的元素(通常是 body)添加 data-spy="scroll",然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target

(2)

$("#nav-list li, #scroll_up").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).children("a").attr("href")).offset().top
},);
});

bootstrap知识小点的更多相关文章

  1. java基础知识小总结【转】

    java基础知识小总结 在一个独立的原始程序里,只能有一个 public 类,却可以有许多 non-public 类.此外,若是在一个 Java 程序中没有一个类是 public,那么该 Java 程 ...

  2. $Django 路飞之显示视频,Redis存购物车数据,优惠卷生成表,优惠卷的一个领取表。(知识小回顾)

    知识小回顾之json序列化问题 精髓:支持python的几种数据类型(注意不是对象,不能放对象),其次是tuple变list. ensure_ascii:默认值True,如果dict内含有non-AS ...

  3. java基础知识小小结

    java基础知识小总结 在一个独立的原始程序里,只能有一个 public 类,却可以有许多 non-public 类.此外,若是在一个 Java 程序中没有一个类是 public,那么该 Java 程 ...

  4. Oracle常用知识小总结

    永不放弃,一切皆有可能!!! 只为成功找方法,不为失败找借口! Oracle常用知识小总结 1. 创建自增主键 对于习惯了SQL SERVER的图形化界面操作的SQLer,很长一段时间不用oracle ...

  5. web前端体系-了解前端,深入前端,架构前端,再看前端。大体系-知识-小细节

    1.了解前端,深入前端,架构前端,再看前端.大体系-知识-小细节 个人认为:前端发展最终的导向是前端工程化,智能化,模块化,组件化,层次化. 2.面试第一关:理论知识. 2-1.http标准 2-2. ...

  6. 关于H5框架之Bootstrap的小知识

    浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 &l ...

  7. bootStrap的小知识

    代码模块 <code> 内联代码 <kbd> 用户输入 <pre>代码段 <var>数学字符 <samp>程序输出 表格 <thead ...

  8. 知识小罐头06(tomcat8请求源码分析 中)

    更正上一篇一个小错误,Connector中首先是将socket请求过来的信息封装成一个普通的Request对象(上一篇我写成HttpRequest对象,失误失误,根本就木有HttpRequest这样的 ...

  9. bootstrap的小图标

    bootstrapt的小图标  关于bootstrap的<i>小图标,需要几个要素.<i class="icon-search"></i>形式第 ...

随机推荐

  1. [ActionScript 3.0] AS3.0 动态加载显示内容

    可以将下列任何外部显示资源加载到 ActionScript 3.0 应用程序中: 在 ActionScript 3.0 中创作的 SWF 文件 — 此文件可以是 Sprite.MovieClip 或扩 ...

  2. python 迭代器、生成器、装饰器

    一,迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,知道所有的元素被访问完结束.迭代器只能往前不会后退. 特点: 访问者不需要关心迭代器内部的结构,仅需通过next()方 ...

  3. MSSQL中的随机函数

    随机函数:rand()在查询分析器中执行:select rand(),可以看到结果会是类似于这样的随机小数:0.36361513486289558,像这样的小数在实际应用中用得不多,一般要取随机数都会 ...

  4. router os

    http://www.oschina.net/news/47568/router-operation-system

  5. WPS去掉键入时自动进行句首字母大写更正

    1.单击左上角的菜单选项 2.选择上图中的“选项”按钮

  6. OC基础(20)

    Protocol基本概念 Protocol注意事项 Protocol类型限制 代理设计模式 *:first-child { margin-top: 0 !important; } body > ...

  7. 你不知道的JavaScript 二

    词法作用域 上次说到作用域,将其定义为一套规则,这套规则用来管理引擎如何在当前作用 域以及嵌套的子作用域中根据标识符名称进行变量查找. 作用域共有两种主要的工作模型.第一种是最为普遍的,被大多数编程语 ...

  8. js对象3--工厂方法加深引出原型--杂志

    继续上一章的案例讲解: <script type="text/javascript"> function createPreason(name,sex){ //他的怪癖 ...

  9. 用C#编写游戏脚本

    大学宿舍玩游戏的时候,为了简化重复的键鼠动作,有学习过按键精灵和TC脚本开发工具,并做了一些小脚本,基本达到了当时的需求.不知不觉,已经毕业了3年了,无聊之余又玩起了游戏,对于一些无趣的重复行为,于是 ...

  10. sublimeText3-EOFError: EOF when reading a line

    最近在自学python,练习网上教程代码的时候遇到: EOFError: EOF when reading a line 发现原因是sublime的console不支持输入,安装SublimeREPL ...