后端小白的Bootstrap笔记（二）

水平对齐:#

添加样式 justify-content-start (左对齐)/ center (居中对齐) / end (右对齐) / around (等距对齐) / between (两边对齐)

 div class container 

 !--.row限制一行-- 

 div class row justify-content-end style border:3px solid;height: 100px 

 div class col-3 style background: #ff6262 炽焰 /div 

 div class col-3 style background: #5b9df9 冰蓝 /div 

 div class col-3 style background: #2c7d59 青草 /div 

 /div 

 /div 

**注意点, 就是说, 如果想看到水平对齐的效果的话, 前提是, 当前row里面的 col 不要把12列占满, 试想一下 ,如果他把12列全部占满了, 肯定是看不看水平移动的效果的, 因此我上面的row里三个div的 col都为3 **

右对齐的效果如下:

同样可以配合断点使用

 div class container 

 !--.row限制一行-- 

 div class row justify-content-xl-end style border:3px solid;height: 100px 

 div class col-3 style background: #ff6262 炽焰 /div 

 div class col-3 style background: #5b9df9 冰蓝 /div 

 div class col-3 style background: #2c7d59 青草 /div 

 /div 

 /div 

配置断点使用, 还是那个套路, 就是我们在上面添加的断点很明显就是 xl , 意思就是说只有当我的浏览器的可视长度大于1200px时,class justify-content-xl-end 水平右对齐生效 , 效果如下:

但是当我的浏览器的可视长度小于1200px时, class justify-content-xl-end 失效, 于是row里面的四个div按照积极默认的属性布局, 就成了下面的样子

换行#

 div class container-fluid 

 !--.row限制一行-- 

 div class row 

 div class col style background: #ff6262 炽焰 /div 

 div class col style background: #5b9df9 冰蓝 /div 

 div class w-100 /div 

 div class col style background: #2c7d59 青草 /div 

 div class col style background: #8E2DE2 江户 /div 

 div class col style background: #2c7d59 青草 /div 

 /div 

 /div 

可以使用 class w-100实现换行

效果图

间距沟槽的清除#

还是下面的这段html

 div class container 

 !--.row限制一行-- 

 div class row justify-content-end 

 div class col style background: #ff6262 炽焰 /div 

 div class col style background: #5b9df9 冰蓝 /div 

 div class col style background: #2c7d59 青草 /div 

 div class col style background: #8E2DE2 江户 /div 

 /div 

 /div 

效果如下: 汉字和div两边是存在一个间距的

**通过属性 .no-gutters 去除这个间距 **

 div class row no-gutters 

重排列#

添加 order-number 可以实现重排序

还是这段html

 div class container 

 !--.row限制一行-- 

 div class row no-gutters 

 div class col order-0 style background: #ff6262 炽焰 /div 

 div class col style background: #5b9df9 冰蓝 /div 

 div class col order-2 style background: #2c7d59 青草 /div 

 div class col style background: #8E2DE2 江户 /div 

 /div 

 /div 

order的默认是0 , order-number number越大, 整体就越往后排, 上面我 设置赤焰的order-0 它的顺序没变, 将青草设置为 order-2 它就排在了最后一位上, 效果如下

此外, 如果想直接排在最前面, 可以设置 order-first

偏移#

.offset-number ; number是偏移的格子数

还是这段html

 div class container 

 !--.row限制一行-- 

 div class row no-gutters 

 div class col order-0 style background: #ff6262 炽焰 /div 

 div class col offset-3 style background: #5b9df9 冰蓝 /div 

 div class col style background: #2c7d59 青草 /div 

 /div 

 /div 

我设置冰蓝的偏移量是3个单位

效果如下:

同样, 偏移可以配合断点使用,

布局#

可以使用 ml-auto 或者 mr-auto 进行布局

还是这段html

 div class container 

 !--.row限制一行-- 

 div class row no-gutters 

 div class col-3 style background: #ff6262 炽焰 /div 

 div class col-3 ml-auto style background: #5b9df9 冰蓝 /div 

 div class col-3 style background: #2c7d59 青草 /div 

 /div 

 /div 

当我们设置ml-auto 其实就是 margin-left-auto , 格子的左边自动对齐, 格子被挤到了右边

效果如下:

列嵌套#

 div class container 

 !--.row限制一行-- 

 div class row no-gutters 

 div class col-3 style background: #ff6262 炽焰 /div 

 div class col-3 style background: #5b9df9 冰蓝 /div 

 div class col-3 style background: #2c7d59 青草 /div 

 div class col-3 style background: #2c7d59 

 div class row 

 div class col-xl-8 style background: #8E2DE2 江户 /div 

 div class col-xl-4 style background: #5b9df9 冰蓝 /div 

 /div 

 /div 

 /div 

 /div 

我们在一个row里面的 col中, 可以嵌套row , 同样可以结合 断点使用

效果图:

并且, 当我的浏览器的宽度小于1200px时, xl 失效, 每个col都单独占行, 最外面的row的高度也会被撑开. 如下

响应式的分界点#

 !--.row限制一行-- 

 div class row no-gutters 

 div id myP Bootstrap /div 

 /div 

可以通过 media设置响应式的分界点

/*当min-width大于768px时生效*/

 media (min-width: 768px) {

 #myP{

 font-size: 32px;

 color: #ffc107;

 }

更多的使用方式:

 media all { }

 media (min-width: 576px)and(max-width: 767px) { }

 media (min-width: 768px)and(max-width: 991px) { }

 media (min-width: 992px)and(max-width: 1199px) { }

 media (min-width: 1200px) { }

后端工程师入门安卓开发笔记(一) 我是daxia，一个做了8年多的后端开发，对前端一直仅限于Web页面开发，对移动端开发和小程序开发基本零基础； 有时候想做一些有意思的东西出来，用网页实现对手机支持现在是不理想，忙里偷闲学了学安卓，把一些我觉得是重点内容做一个笔记，也希望笔记对其他人有所帮助。
微信小程序+java后端整合笔记 用到的工具和技术. 1.微信web开发工具小程序版 2.Myeclipse 2014 3.WebSocket 4.Maven 3.3.9 5.Tomcat 7 1.安装配置Maven,使用Myeclipse创建web project 使用Maven项目结构.