bootstrap今天的学习心得

2019独角兽企业重金招聘Python工程师标准>>>

今天花了一个下午加晚上的时间研究了bootstrap，收获还是很多，首先是进入官方网站http://twitter.github.io/bootstrap/。也有中文的网站，由于个人英文不好，所以就是登录的中文网站http://www.bootcss.com/。

首先我是把点击了入门指南，大概介绍了bootstrap主要包含的那些内容，我们可以用的。

第一肯定是下载

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

第二步是研究了scaffolding

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

贴上一段代码

<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">

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

是不是很简单。

基本的css样式

包括了

• 排版
• 代码
• 表格
• 表单
• 按钮
• 图片
• 图标

这些无论从实现还是理解上都是很简单的，只需要把bootstrap.css里的类放到你的标签的class里面就能实现很好的布局效果了

接下来是一些基本的组件

列表目录也就不用详细写了，因为和基本的样式是样的，最主要的是这个bootstrap是很漂亮的

然后就是javascript插件

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

下载bootstrap是简单的，也可以按你需要的模块进行下载，

后面是lesscss

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

转载于:https://my.oschina.net/u/205358/blog/124142