第一肯定是下载

然后就是目录介绍,因为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. 远程仓库版本回退方法 good

    1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况,于是做了一下研究,写下这篇博客. 2 问题 如果提交了一个错误的版本,怎么回退版本? 如果提交了一个错误的版本到远程分支,怎么回退远程分支 ...

  2. [cocos2d]cocos2d 2.1与ios 6.0

    最近把xcode升级到4.5了,ios也编程6.0 mark一下需要修改的地方(针对于cocos2d 2.1版本),虽然都是warning,但是对于强迫症患者来说无法忍受啊~ 修改一 libs-Coc ...

  3. 处理 insert 字段内容包含 单引号 的问题

    问题:postgreSQL insert 字段包含单引号,如:insert into table values('1001','tom'cat'),执行报错: 解决:将单引号替换为两个单引号,如 de ...

  4. pcDuino 刷系统-LiveSuit

    准备: pcduino : 点此购买 支持HDMI的显示器:点此购买  或参考无显示器刷机与使用.至少1张4G microSD卡,如果内存卡不大,可以用内存卡刷内核,用u盘刷系统   LiveSuit ...

  5. 【转】c++重载、覆盖、隐藏——理不清的区别

    原文网址:http://blog.sina.com.cn/s/blog_492d601f0100jqqm.html 再次把林锐博士的<高质量c++编程指南>翻出来看的时候,再一次的觉得这是 ...

  6. [C# 网络编程系列]专题六:UDP编程

    转自:http://www.cnblogs.com/zhili/archive/2012/09/01/2659167.html 引用: 前一个专题简单介绍了TCP编程的一些知识,UDP与TCP地位相当 ...

  7. 转载--C++中struct与class

    转自:http://www.cnblogs.com/york-hust/archive/2012/05/29/2524658.html 1. C++中的struct对C中的struct进行了扩充,它已 ...

  8. linux下svn使用及查看杀掉进程

    ps –aux ubuntu下安装subversion客户端: sudo apt-get install subversion svn正在checkout时候无法退出操作,shift+ctrl+t新建 ...

  9. basic mongodb

    basic mongodb */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola," ...

  10. openstack liberty 版本按照官方文档手动整合 完成后 基于dashboard-horizon 创建虚拟机报错 用CL却是成功的 网络等验证都是正确的通过启动的虚拟实例测试以成功