第一肯定是下载

然后就是目录介绍,因为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. python中 __name__及__main()__的使用

    python中 __name__及__main()__的使用 #hello.py def sayHello(): str="hello" print(str); if __name ...

  2. USACO3.34Home on the Range(DP)

    之前做过一道类似的 国际象棋盘神马的.. 统计出以每个1作为右下角的最大正方形 那么以大于二到这个最大值之间为边的正方形都可以以这个为右下角 累加就可以了 dp[i][j] = min(dp[i-1] ...

  3. linux kernel API and google android compile guide

    (1)linux kernel API website: http://docs.knobbits.org/local/linux-doc/html/regulator/index.html http ...

  4. HDOJ--1698

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. 关于 Unity NavMesh 数据的访问

    目前的工作需要加入自动寻路,后来决定使用 unity 自带的 NavMesh,但有个问题是这个寻路数据,服务器也是需要的,那么我就要把这个数据导出为服务器所用才行.      但 NaveMesh 暂 ...

  6. Delphi的四舍五入函数

    一.四舍五入法    四舍五入是一种应用非常广泛的近似计算方法,其有算术舍入法和银行家舍入法两种.    所谓算术舍入法,就是我们通常意义上的四舍五入法.其规则是:当舍去位的数值大于等于5时,在舍去该 ...

  7. Maven的安装与使用(ubuntu)

    一.安装Maven 1.下载Maven,http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.3.9/binaries/apache-m ...

  8. python Day 1 - 搭建开发环境

    搭建开发环境 首先,确认系统安装的Python版本是2.7.x: $ python --version Python 2.7.5 然后,安装开发Web App需要的第三方库: 前端模板引擎jinja2 ...

  9. hdoj 1035 Robot Motion

    Robot Motion Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  10. 关于PHP开发的9条建议

    这篇文章主要介绍了关于PHP开发的9条建议,都是个人的一些经验总结,有需要的小伙伴可以参考下. 本文只是个人从实际开发经验中总结的一些东西,并不是什么名言警句,写出来有两个目的:一是时刻提醒自己要按照 ...