关于BoostStrap中的css框架设计
bootstrap 快速搭建一个网页的前端框架 ,页面是一个响应式布局
何为响应式布局:
响应式布局 :一个网站能够兼容多个终端(手机,iPad等),而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的;
表格 class前缀
Class中的类似 .row
和 .col-xs-4
这种预定义的类,可以用来快速创建栅格布局。 并且可以根据界面大小自适应调整
关于上面参数详解(col-lg-2 col-sm-2)
col —列 md —屏幕分辨率
数字 ----占比(可能不太理解这个占比是什么意思,就是说比如表格分为总共四列,最终列表格大小不同)
详见地址:https://v3.bootcss.com/css/
Button按钮Class样式设置:
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
分别对应Button按钮的Class值以及颜色
关于From表单的Class属性设置:
~~**<form class="form-inline">**~~
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
会出现以下的内联式样式
From中如果Class不设置属性的话:
From表单设置为form-horizontal
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
关于input输入框的设置:
<input type="text" class="form-control" placeholder="Text input">
关于img中Class样式设置:
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">