bootstrap学习笔记之二

学习表单时还是有些吃力的，主要感觉有些结构有些复杂，没有自己亲手去操作就感觉似懂非懂，所以还得自己亲手测一下。

现在开始按钮的学习。

可作为按钮使用的标签和元素有：  <a>、<button> 和 <input> 。为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

按钮相对表单来说就太简单啦，就几个class名，都非常简单。

第一、针对颜色的，btn-primary，btn-default，btn-success，btn-info，btn-warning，btn-danger，btn-link，这和表格中的success，info，warning，danger和表单中的has-success，has-warning，has-danger类是一样一样的。

第二，控制按钮的大小，btn-lg，btn-sm，btn-xs类。使用btn-block可以是按钮拉伸为父级元素100%的宽度。

第三，控制按钮的状态，.active为激活状态，disable类为禁用状态。

 

继续图片的学习

　　响应式图片的学习：　　　

img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.img-circle {
  border-radius: 50%;
}

　　　由上可知，img已经默认垂直居中了，且响应式图片width为100%，height为自动。img-circle，img-rounded，img-thumbnail的样式就是上面所述。很简单。

　　辅助类，

　　1、情景文本颜色，设定文本颜色，text-muted，text-primary，text-success，text-info，text-warning，text-danger。

　　2、情景背景颜色，设定文本背景，bg-primary，bg-success，bg-info，bg-warning，bg-danger

　　3、关闭按钮，有默认效果，<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

　　4、三角符号，<span class="caret"></span>

　　5、快速浮动，pull-left，pull-right类可以让元素快速浮动，还可以给元素设定!important来设定css样式的优先级，说明很重要嘛。不过不能用于导航栏组件中，导航栏组件用navbar-left和navbar-right。

　　6、让内容块居中，center-block，.center-block{display: block; margin-left: auto; margin-right: auto;}


　　7、清除浮动，为父元素添加.clearfix可以很容易的清除浮动。

　　8、show和hide，只对块级元素有用。

　　9、响应式工具，感觉这才是干货，最有用的东西。

　　

　　10、关于sass、less以及minxin的内容，感觉自己应该涉及不到，到以后用得着的时候再学吧。