1. bootstrap是一个基于jquery的框架
用的时候一定要引入jquery或者,直接在项目框架中开发。
rel="stylesheet"一定要用不然样式出不来,好久没写原生了。一定要记得!
<link rel="stylesheet" href="../assembly/bootstrap-3.4.1/css/bootstrap-theme.min.css">
<linkrel="stylesheet"href="https://cdn.staticfile.org/twitterbootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/usercenter.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../assembly/bootstrap-3.4.1/js/bootstrap.min.js"></script>
2.栅格系统的运用
专门用来做响应式布局的,就是在不同的屏幕显示不一样的样子。
一般是用meta媒体查询来给项目做三套代码的展示,在原生中,在项目中,利用bootstrap框架的栅格直接做一个响应式的展示。
栅格系统则是
后面的* 填写参数,一行又12列,大家均分,用数字控制,int,小数没用,可以改写样式
.col-xs-* 超小屏幕
.col-md-* 中等屏幕
.col-sm-* 平板屏幕
.row 另起排列
3. 响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
4.写了好久小程序都忘记了行内元素我们常用的span....
5. label和input 联合使用
记得用id不是用name,name是提交的时候用的,现在不用了。以前的form表单提交。
<div>
<p>修改手机号码</p>
<div>
<label for="phone"> 手机号</label>
<input id="phone" type="text">
</div>
<div>
<label for="code">验证码 </label>
<input id="code" type="text">
</div>
</div>
这样点击名字就聚焦了。
6.去除input默认样式
input{
background:none;
outline:none;
border:none;
}
7.半透明的样式
opacity: 0.5; 会继承
rgba(0,0,0,0.5) 不继承好用。
8. 你引入的jquery必须在你的js之前,不然用不了。
———————————————————————————————————————分割线—————————————————————————————————————————————
9 .新的更新
之前用的是bootstrap3。
不得不说这是之前做jq项目的时候用到的,现在用到了bootstrap4并且是和angular一起联合开发的
这次用到的也是栅格系统,做响应式
图片做响应式
表格也可以,还有可以隐藏和显示,来控制不同的大小显示不同的样式。
10.响应式的显示和隐藏
先上链接 www.cnblogs.com/hgnulb/p/10…
核心图片
在项目中用到的 大屏幕显示。
<div class="d-none d-xl-block zhanwei"></div>
大屏幕显示(flex元素)
<div class="d-none d-sm-none d-xl-flex "></div>
小屏幕显示
<div class="d-sm-block d-xl-none "></div>