笔者是在做项目的过程中接触到bootstrap，关于css 的框架有很多，之前接触过的还有element ui 和vuetify。 Bootstrap 好处是有自带的icon库，包含很多icon，还有css的样式。Bootstrap缺点是引用起来比较麻烦，而且需要对它的基本设置有一定的了解才能运用自如。

Element UI感觉用起来比较方便，拿到即可上手，非常快。但是很多icon需要再引入。【Element UI 笔者还不太熟悉，后面也会加深理解。】

Bootstrap 是以mobile 为优先的，也可以运用于电脑桌面端，所以如果做手机端app 和网页也很方便。

运用bootstrap 首先还是要了解它的基本设定，才能准确达到自己想要的样式。

第一点需要注意的就是Breakpoint

举个例子，就是bootstrap 设定的class里面的内容：下面.col-lg-2 中的lg.

    <div class="col col-lg-2">1 of 3</div>

Breakpoint 是指获取的不同时候的浏览器（or 手机端）的media的分辨率，从而处理app的layout。处于某个临界点的时候，layout会自动改变自己的render样式。

是以表格为主的页面中，非常重要的部分。

默认值是：

也可以自己设定min-width 和max-width （Sass）【这里待后续研究】

在使用breakpoint的时候，手机端也需要考虑手机的分辨率状态。

Bootstrap CSS Layout (1) - Breakpoint相关推荐

html css bootstrap,CSS Bootstrap是什么？
bootstrap是什么?bootstrap有什么用?bootstrap是框架吗?对于刚刚接触bootstrap的学生来说,对bootstrap并不了解.下面本篇文章就来给大家介绍一下bootstra ...
ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素
ASP.NET MVC使用Bootstrap系统(2)--使用Bootstrap CSS和HTML元素阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Boots ...
bootstrap -- css -- 表格
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. < ...
angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习...
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
bootstrap css选择不同的宽度
刚开始使用bootstrap css开源项目.遇到一个问题,默认的input 宽度太大,需要找小一点的. 其实只需要在input tag中选用预定义的较小的宽度即可.比如: <input typ ...
移动端html右滑空白,BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法...
最近的一个项目前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽).一直在Chrome的仿真机测试 ...
回炉再造Css Layout
大家好,我叫张文轩,这是我的第5篇分享初衷有次看了篇文章,文章有句话对我印象深刻,这句话是废掉一个人的最好方式,就是让他忙的停不下来.意思就是在前进的过程中,如果只知道不停的奔跑,而不间歇性的停下 ...
DevTools 无法加载源映射：无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404，net::ERR_HTT
DevTools 无法加载源映射: 无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404,net::ERR_HTT ...
城市简码_如何使用简码在WordPress中添加Twitter Bootstrap CSS
城市简码 Adding CSS elements like tooltips, colorful buttons, and roll-over effects can help your conten ...

Bootstrap CSS Layout (1) - Breakpoint

第一点需要注意的就是Breakpoint

Bootstrap CSS Layout (1) - Breakpoint相关推荐

最新文章

热门文章