2018-03-17 bootstrap入门

2018-05-31  本文已影响0人  彭奕泽

1. 下载bootstrap

引用 CSS 和 JS 文件,引用js之前要先引用jquery

2. button

可加的class样式有

1. <button class="btn">提交</button>  
2. <button class="btn-primary">提交</button>
3. 上面两个一起用<button class="btn-primary btn">提交</button> 
4. <button class="btn-block">提交</button> //让button占一整行宽

3. form

可加的class样式有

//可在input里加
<input class="form-control" type="text">

4. 提醒事项

登陆成功,正在跳转
<div class="alert alert-success">登陆成功</div>

5. 栏栅系统(响应式布局)

bootstrap默认每一行是12列

<div class=container>  //自动居中
  <div class=row>  //一行分成12份
    <div class=col-md-1>1</div>  //这两个分别占1份和11份
    <div class=col-md-11>11</div>
  </div>
  <div class=row>  //第二行
    <div class="col-md-9 col-md-offset-3">9</div>  //这样这个div会往右边对齐,因为第二个class代表往右偏3格
  </div>
  <div class=row>  //第三行
    <div class="col-xs-6 col-md-1 col-sm-3">6</div>  
    //在屏幕宽度很小的时候(手机)占6份
    //中等(电脑)的时候占1份
    //小(ipad)的时候占3份
    //超大屏(col-lg-12)
  </div>
</div>

6. 秘诀

直接复制官网的html代码,复杂css组件js组件定制bootstrap可以自己改样式、颜色

7. 小技巧

靠右:不写col-md-...,直接写pull-right

8. 主题

下载的文件里有bootstrap.theme.css

上一篇 下一篇

猜你喜欢

热点阅读