前端bootstrap项目(自用)

634 阅读2分钟

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.栅格系统的运用

官网 v3.bootcss.com/css/#grid

专门用来做响应式布局的,就是在不同的屏幕显示不一样的样子。

一般是用meta媒体查询来给项目做三套代码的展示,在原生中,在项目中,利用bootstrap框架的栅格直接做一个响应式的展示。

image.png

栅格系统则是

image.png

后面的* 填写参数,一行又12列,大家均分,用数字控制,int,小数没用,可以改写样式

.col-xs-* 超小屏幕

.col-md-* 中等屏幕

.col-sm-* 平板屏幕

.row 另起排列

image.png

3. 响应式图片

image.png


<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一起联合开发的

官网 v4.bootcss.com/

这次用到的也是栅格系统,做响应式

image.png

图片做响应式

image.png

表格也可以,还有可以隐藏和显示,来控制不同的大小显示不同的样式。

10.响应式的显示和隐藏

先上链接 www.cnblogs.com/hgnulb/p/10…

核心图片

image.png

在项目中用到的 大屏幕显示。

 <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>