前端后端分离知识点学习(一)
前端基础知识点学习
一、选择器
作用：查找html标签并且对html标签的样式进行更改
二、绝对定位和相对定位
三、盒子模型
四、Bootstrap的用法
1、.container 容器和.container-fluid容器
.container 类用于固定宽度并支持响应式布局的容器。左右边对齐，有margin对齐。
<div class="container">Container</div>
.container-fluid 类用于 100% 宽度，没有pading和margin的间隔。
<div class=".container-fluid">Container-fluid</div>
2、栅格模型
每一行是12列，cal的用法
<div class=".container-fluid">
<div class ="row">
<div class="col-2">1</div>
<div class="col-2">2</div>
<div class="col-2">3</div>
<div class="col-2">4</div>
<div class="col-2">5</div>
<div class="col-4">6</div>
</div>
</div>
当放不下的时候就会自动跳转到下一行，如果只有cal相当于获取所有剩下的。
offset的用法(相当于左间隔)
<div class ="row">
<div class="col-2 offset-2">1</div>
<div class="col-2">2</div>
<div class="col-2">3</div>
<div class="col-2">4</div>
<div class="col-2">5</div>
</div>
3、Table表的样式
4、按钮格式
<input type="button" value="按钮继承父标签大小" class="btn btn-outline-primary btn-block">
<div>
<input type="submit" class="btn btn-primary" value="登录"/>
<input type="button" class="btn btn-success" value="注册"/>
<input type="button" class="btn btn-link" value="按钮转连接"/>
<a href="#" class="btn btn-success">a标签按钮</a>
<input type="button" value="轮廓按钮" class="btn btn-outline-primary">
<input type="button" value="按钮变大" class="btn btn-outline-primary btn-lg">
<input type="button" value="按钮变小" class="btn btn-outline-primary btn-sm">
<input type="button" value="不可点击" class="btn btn-outline-primary" disabled="disabled">
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">按钮组1</button>
<button type="button" class="btn btn-primary">按钮组2</button>
<button type="button" class="btn btn-success">按钮组3</button>
</div>
5、表单样式
texrbox框的form-control样式，form-control-lg和form-control-sm也可控制文本框大小
<input type="text" class="form-control" name="username" value=""/>
radius样式,inline
<div class="from-group">
<div class="col-10 offset-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"/>
<label class="form-check-label" for="flexRadioDefault1">
男
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
女
</label>
</div>
</div>
</div>
check样式
<div class="from-group col-10 offset-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
篮球
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
编程
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
其他
</label>
</div>
</div>
注释标签
<small class="from-text text-muted col-10 offset-2">账号是6位数，其中包含字母和数字</small>
扩展输入框
<div class="from-group row">
<label class="col-2 col-form-label">备注</label>
<div class="col-8">
<textarea class="form-control"></textarea>
</div>
</div>
选择框
<div class="from-group row">
<label class="col-2 col-from-label">部门</label>
<div class="col-8">
<select class="from-control " aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">go语言开发</option>
<option value="2">py语言开发</option>
<option value="3">结构工程师</option>
<option value="4">运维工程师</option>
</select>
</div>
</div>
ul和li做左侧菜单
<div class="row">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item active">首页</li>
<li class="list-group-item">个人信息</li>
<li class="list-group-item">首页</li>
<li class="list-group-item">啊啊十大非常</li>
<li class="list-group-item">大苏打页</li>
<li class="list-group-item">个啊实打实信息</li>
</ul>
</div>
</div>
NAV标签
如果看完对自己有所帮助，请点赞支持