1.如何设置一行两列?

<div class="container">

<div class="row">

<div class="col-lg-3 col-md-3 col-xs-3"></div>

<div class="col-lg-9 col-md-9 col-xs-9"></div>

</div>

</div>

下面看结构

效果

标签嵌套循环都写在 里面

2.bootstrap中后台动态生成li等标签 无法添加col-lg-4 、col-md-4、col-xs-4等情况使用flex布局

兼容情况

IE 10+

红框是居中 justify-content:center

flex布局display flex

flex-warp换行

flex-direction默认是row 从左到右排列

3.bootstarp 中元素居中对齐

div{

float:none;

display:flex;

margin-left:auto;

margin-right:auto;

}

同时这个div 还添加别的类 比如col-lg-8

4.flex居中

实现

div{

display:flex;

justify-content:center

}

这时候父级元素继续上面的样式  就可以实现居中效果

结构

效果

bootstrap 使用总结的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap(二)

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap(一)

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器,基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. java内部类(二)

    静态内部类 定义: static修饰的内部类就是静态内部类. 特点: 1.静态内部类不能直接访问外部类的非静态成员,但可以通过new 外部类().成员 的方式访问. 2.如果外部类的静态成员与内部类成 ...

  2. 具有相同名称 的类/接口已在使用。请使用类定制设置来解决此冲突。java调用第三方的webservice应用实例

    WSDLToJava Error: http://10.96.84.124:81/BTRPWebServiceForSMB/OnSMBOrderService.svc?xsd=xsd0 [0,0]: ...

  3. Elasticsearch冷热集群搭建

    ES版本:6.2.4 集群环境:7台机器,每台部署一个master节点.其中3台部署2个hot节点,另外4台部署2个warm节点.共21个节点. 1. 挂盘 按实际情况分盘,一个机子上的2个data节 ...

  4. numexpr low version warning

    runing https://colab.research.google.com/notebooks/mlcc/first_steps_with_tensor_flow.ipynb?hl=zh-cn# ...

  5. iOS/MAC 数据压缩与解压缩及常用算法 LZMA、ZLIB

    苹果提供的常用的数据压缩算法LZMA.ZLIB.LZ4等: 这三种算法也是苹果建议的,可跨平台使用: 定义如下: /* Commonly-available encoders */ COMPRESSI ...

  6. 各种OJ网站汇总

    acmicpc.info acmicpc.info http://acmicpc.info/archives/224 此网站聚合了各种ICPC相关信息. 国内Online Judge 用户体验极佳的v ...

  7. Centos 7.x nginx隐藏版本号

    一.打开配置文件 #vim /etc/nginx/nginx.conf 二.增加一行: server_tokens    off; 三.重启nginx #nginx -s reload 四.效果

  8. 解決中文地址Uri.IsWellFormedUriString返回false

    數字和大小寫字母都ok,但是中文地址就會有問題 public bool IslocalURL(string url) { if (string.IsNullOrEmpty(url)) { return ...

  9. 根据IP查地理位置信息

    IP地址库下载地址: https://www.ipip.net/product/ip.html 使用方式(Python): https://github.com/ipipdotnet/datx-pyt ...

  10. Replication基础(六) 复制中的三个线程(IO/SQL/Dump)

    Reference:  https://blog.csdn.net/sun_ashe/article/details/82181811?utm_source=blogxgwz1 简介在MySQL复制技 ...