怎么学习Bootstrap：[2]登录界面案例

使用bootstrap做一些小的例子, 如果光靠看一些知识点, 是没有办法快速的去学习一些知识的. 这里讲解怎么去做一个简单的登录案例. Let's go!

工具/原料

• bootstrap框架.

• 文本编辑器(这里随意, 不过推荐使用带有语法高亮的编辑器, 写代码比较方便, 还容易找错误)

方法/步骤1

1. 第一篇的经验已经告诉我们怎么使用一个Bootstrap的基础模版, 然后我们这个实例也是按照之前的那个基础模版修改增进过来的. 然后先看效果图, 他的好处是, 你可以写一个页面, 在不同的设备上都实用. 只需要使用定义好的class样式, 当然这个样式一样自己可以去写这个. 

   

2. 看一下具体的代码. 这里需要注意的是, 那个模版, 是在系列教程一中.

   class="container" 让页面能够做到居中.注意该标签不能嵌套使用. 

   role属性是html5中新增的一个属性,可以让你更好的自定义一些属性供你使用.

   class="form-control" 该标签是把一些表达标签的width都设置为100%. 

   其中btn是bootstrap中默认定义的一个button也就是按钮的样式. 

   其中btn-lg是指最大的样式.还有btn-xs, btn-sm, btn-md. 分别对应不同的设备. 手机, 平板, pc等.

   

3. 这里又重新写了2个样式, 一个是表单的最大width. 设置成了330px.是因为登录不需要太过宽, 要不然不太好看. 第二个样式, 是因为在默认的btn-lg是占一行, 所以, 就会把两个表单文本框放在各自的行上. 但是紧挨着太狠. 所以, 做了一个3px的下间距.

   

4. 不同的btn大小展示, 从图就可以看出来这几个的区别. 怎么试用? 你动手做一下就明白了. 

   

5. 学习bootstrap之前, 最起码你要有html, css,和一些js的基础知识, 因为该框架也是在这些基础上做出来的预定义的效果而已. 上面的有一定的基础. 学习这个事半功倍.