bootstrap今天的学习心得

今天花了一个下午加晚上的时间研究了bootstrap,收获仍是不少,首先是进入官方网站http://twitter.github.io/bootstrap/。也有中文的网站,因为我的英文很差,因此就是登陆的中文网站http://www.bootcss.com/ javascript

首先我是把点击了入门指南,大概介绍了bootstrap主要包含的那些内容,咱们能够用的。 css

第一确定是下载

而后就是目录介绍,由于bootstrap是个轻量级的框架,目录不是不少,因此很容易理解,主要有用的就是三个文件,bootstrap.js,bootstrap.css,bootstrap-responsive.css(是响应是布局才须要引入的css)。很简单,要用全部的功能,就所有引入本身的html页面里面。而后还能够看一看它官方给出的一些模版,固然模版咱们参考就是了,copy是没有意义的。 html

第二步是研究了scaffolding

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

贴上一段代码 git

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
响应事布局须要引入下面两端代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
而后就能够进行本身的响应时布局了,而后能够经过如下一些类来判断不一样的屏幕宽度来对应显示到浏览器最佳的内容,能够经过这些类来进行选项

是否是很简单。 github

基本的css样式

包括了 bootstrap

  • 排版
  • 代码
  • 表格
  • 表单
  • 按钮
  • 图片
  • 图标
这些不管从实现仍是理解上都是很简单的,只须要把bootstrap.css里的类放到你的标签的class里面就能实现很好的布局效果了

接下来是一些基本的组件

列表目录也就不用详细写了,由于和基本的样式是样的,最主要的是这个bootstrap是很漂亮的 浏览器

而后就是javascript插件

这个插件用起来仍是很简单,只须要在一些如tab,nav,弹框啊,下拉框啊,这些带有事件的组建的实现动态效果,简单的说,也很简单,只要拿到class就能拿到节点,而后用bootstrap封装好的方法调用一个方法就可以轻松的实现了。 框架

下载bootstrap是简单的,也能够按你须要的模块进行下载, less

后面是lesscss

这个我也没具体的看,有点高端,可是很强大...加油吧,今天收获不少,还研究完了javascript密码花园里的js常见的错误,和容易忽略的问题。学到不少经验,总的来讲今天是有收获的,虽然今天地震了,心情很沉重,逝者安息!

相关文章
相关标签/搜索