第一肯定是下载

然后就是目录介绍,因为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. java.lang.String内部结构的变化

    原文:http://java-performance.info/changes-to-string-java-1-7-0_06/ 作者:Mikhail Vorontsov IMPORTANT: Jav ...

  2. WordPress RokMicroNews插件‘thumb.php’ 多个安全漏洞

    漏洞名称: WordPress RokMicroNews插件‘thumb.php’ 多个安全漏洞 CNNVD编号: CNNVD-201309-384 发布时间: 2013-09-24 更新时间: 20 ...

  3. JS 利用数组拼接html字符串

    var cc = []; cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;&qu ...

  4. 【转】 Android快速开发系列 10个常用工具类 -- 不错

    原文网址:http://blog.csdn.net/lmj623565791/article/details/38965311 转载请标明出处:http://blog.csdn.net/lmj6235 ...

  5. Cookies和Session理论总结

    今天主要学习了Cookies和Session,网络上关于这方面的知识可谓很多,让人眼花缭乱,在此作一个小结.本文不讲多,不讲什么高大上的,只是抛出一块砖,讲三个问题:①什么是Cookies和Sessi ...

  6. 畅通工程2 HDOJ--1863

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. 同时连接多台Android设备进行Monkey Test

    事情多了就会乱,时间久了就会忘. adb -s remount id(devices ID) adb -s shell id monkey -p package name -v count

  8. 编译Hadoop源码

    背景: 在阅读hadoop源代码过程中会发现部分类或者函数无法找到,这是由于Hadoop2.0使用了Protocol Buffers定义了RPC协议, 而这些Protocol Buffers文件在Ma ...

  9. 关于理解《C++ 对象模型》中:把单一元素的数组放在末尾,struct可以拥有可变大小的数组

    这一章在第19页,写的好深奥,我竟然没看明白在说什么--之后再看了几遍,终于明白了. 原文: C程序员的巧计有时候却成为c++程序员的陷阱.例如把单一元素的数组放在一个struct的末尾,于是每个st ...

  10. Bzoj 3289: Mato的文件管理 莫队,树状数组,逆序对,离散化,分块

    3289: Mato的文件管理 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 1539  Solved: 665[Submit][Status][Di ...