使用bootstrap做一些小的例子, 如果光靠看一些知识点, 是没有办法快速的去学习一些知识的. 这里讲解怎么去做一个简单的登录案例. Let's go!
工具/原料
-
bootstrap框架.
-
文本编辑器(这里随意, 不过推荐使用带有语法高亮的编辑器, 写代码比较方便, 还容易找错误)
方法/步骤：
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大小展示, 从图中就可以看出来这几个的区别.
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> <button class="btn btn-xs btn-primary btn-block" type="submit">登录</button> <button class="btn btn-sm btn-primary btn-block" type="submit">登录</button> <button class="btn btn-md btn-primary btn-block" type="submit">登录</button>
5、学习bootstrap之前, 最起码你要有html, css,和一些js的基础知识, 因为该框架也是在这些基础上做出来的预定义的效果而已. 上面的有一定的基础. 学习这个事半功倍.