第一肯定是下载

然后就是目录介绍,因为bootstrap是个轻量级的框架,目录不是很多,所以很容易理解,主要有用的就是三个文件,bootstrap.js,bootstrap.css,bootstrap-responsive.css(是响应是布局才需要引入的css)。很简单,要用所有的功能,就全部引入自己的html页面里面。然后还可以看一看它官方给出的一些模版,当然模版我们参考就是了,copy是没有意义的。

第二步是研究了scaffolding

这个是bootstrap的布局相关的,bootstrap的布局很简单,只要在你的div里面加上class属性,然后再把bootstrap.css里的class加上去就能够实现布局了,很简单,介绍两种很流行的布局,流体布局和响应事布局,都是基于bootstrap的栅格系统

贴上一段代码

1
2
3
4
5
6
7
8
9
10
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
1
2
3
响应事布局需要引入下面两端代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"

然后就可以进行自己的响应时布局了,然后可以通过以下一些类来判断不同的屏幕宽度来对应显示到浏览器最佳的内容,可以通过这些类来进行选项 

bootstrap学习和使用的经验总结的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习(3)

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

  3. BootStrap学习(2)

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  4. Bootstrap 学习(1)

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  5. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  6. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  7. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  9. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

随机推荐

  1. 窗口的子类化与超类化——子类化是窗口实例级别的,超类化是在窗口类(WNDCLASS)级别的

    1. 子类化 理论:子类化是这样一种技术,它允许一个应用程序截获发往另一个窗口的消息.一个应用程序通过截获属于另一个窗口的消息,从而实现增加.监视或者修改那个窗口的缺省行为.子类化是用来改变或者扩展一 ...

  2. ListView getView中放置多个item和getItemViewType的用法

    ListView 和 Adapter 的基础 工作原理: ListView 针对List中每个item,要求 adapter “给我一个视图” (getView). 一个新的视图被返回并显示 如果我们 ...

  3. struts2结合生成验证码

    import java.util.Arrays; /** * 工具类,生成随机验证码字符串 * @version 1.0 2012/12/01 * @author shiyz * */ public ...

  4. 转:二十一、详细解析Java中抽象类和接口的区别

    转:二十一.详细解析Java中抽象类和接口的区别 http://blog.csdn.net/liujun13579/article/details/7737670 在Java语言中, abstract ...

  5. ♫【CSS】命名颜色

    color: aqua; 每个浏览器都支持一套它能识别且能正确渲染的命名颜色.这些颜色包括: aqua 浅绿色 #00ffffblack 黑色 #000000blue 蓝色 #0000fffuchsi ...

  6. 论游戏中Buff的实现 [转]

    论游戏中Buff的实现 分类: C/C++ 游戏开发2012-09-13 14:30 574人阅读 评论(6) 收藏 举报 c++游戏开发 源地址:http://blog.codingnow.com/ ...

  7. Ruby入门教程和技巧

    转自:http://blog.csdn.net/cqfz123/article/details/1349050   Ruby真的比Java更好? Ruby On Rails 创始人:对Java 说再见 ...

  8. android报错——findViewById报错

    通過ID找到Layout的 VIEW控件.,比如你的控件Button ID為"@+id/button01"   就可以通過這樣Button btn=(Button)findView ...

  9. [LeetCode] 76. Minimum Window Substring 解题思路

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  10. ln命令

    图形化界面创建ln 命令行界面创建ln 命令行界面创建ln 后续,更新