Bootstrap 4.0 alpha 4 升级到正式版升级指南。-插件-修罗开源轻论坛程序

Bootstrap 4.0 alpha 4 升级到正式版升级指南。文档教程

axiuno 10月前 2898

一、BS4 beta3 变化

1. 引入了 flex 布局，一些地方写法发生了变化

hidden-md-down hidden-md-up 废弃掉了，以下代替：
hidden-md hidden-lg (在 md lg 下隐藏）

hidden-sm hidden-md (在 sm md 隐藏）

2. 重命名 m-x-1 ...
m-x-1, m-y-1, m-l-1, m-r-1...

p-x-1, p-y-1, p-l-1, p-r-1...

改为：

mx-1, my-1, ml-1, mr-1...

px-1, px-1, pl-1, pr-1...

注意，间距不同了，beta3 开始 1 2 3 4 比之前的间距要更合理了。

3. 抛弃了 center-block，用 mx-auto 代替，

4. flex 两列布局，一列自动撑开：

第一种：
<div class="media">
<div> left </div>

<div class="media-body"> right .... </div>

</div>

第二种：

另外一种左右对齐的方式，跟上面不同的式，它类似 inline 模式，内缩，而不是撑满：

<div> right </div>

</div>

第三种：（推荐）

<div class="col"> Right, Full Fill </div>

</div>

5. card-block 改名为 card-body，并且不在允许并列写，必须嵌套。
<div class="card">

<div class="card-body"> ...

6. .row 必须放到有 padding 的元素中，否则它的负 margin 会让内容撑开。值为 1rem。

7. <progress> 改为了 <div>
<progress class="progress progress-success" value="1" max="100" id="progress">0%</progress>

<div class="progress mt-2">

<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="avatar_progress"></div>

</div>

JS 操作改为：

jprogress.width(percent+'%');

8. 取消了 -xs- ，手机屏幕用 -sm- ， col-xs-12 改为 col-12，或者 col-sm-12

9. 两列布局的表单，没什么变化，但是有图标的有变化：

<div class="input-group-prepend">

<span class="input-group-text"><i class="icon-lock"></i></span>

</div>

<input type="text" class="form-control" id="password_new_repeat" name="password_new_repeat" placeholder="<?php echo lang('password_new_repeat');?>" required="">

<div class="invalid-feedback">请重复输入新密码</div>

</div>

10. 另外 XN 对它进行了一些扩充，增加了以下常见的 class，用来显示文本信息：

.line-height-1, .line-height-2, .line-height-3

11. 因为 flex 过于强大，所以废弃了 dl dt dd （之前用于 2 列布局）

12. flex 布局需要了解的几种对齐方式：

父元素上设置：

垂直对齐：align-items-start align-items-center align-items-end

水平对齐：justify-content-start justify-content-center justify-content-end

子元素对自己进行微调：

垂直：align-self-start align-self-center align-self-end

13. text-bold 改名为：font-weight-bold，font-weight-normal

14. 抛弃了 tether.js，采用 popper.js 来驱动 BS4 内部的弹出框。

15. 翻页居中对齐：

<?php if($pagination) { ?>

<?php } ?>

二、UI 规范：

为了降低学习成本，XN 尽可能少的定义新的 class，尽量使用 BS4 自带的 class。

CSS 分两大块：色彩和布局

色彩：

色彩上使用 BS 预定义的颜色，在合适的时候用，每个色彩有自己的含义，正常情况不允许使用色彩。

bg-xxx

text-xxx

alert-xxx

https://getbootstrap.com/docs/4.0/utilities/colors/

布局：

使用 container row col , media media-body, card card-body 基本能满足正常的布局。BS4 的间距是经过精心设计的，一定要深刻理解。不是特殊情况，不要自己写 style，如果有 style，检查一下看能否全部改为 class 代替。

最新回复 (8)

ins 10月前

引用 2楼

挺好的...
Bob_1506321709 10月前

引用 3楼

表示完全看不懂，什么时候可以后台在线升级。
nianjin 10月前

引用 4楼

看看
mfxer 10月前

引用 5楼

等现成的
燃烧的冰 10月前

引用 6楼

看来需要改的地方还不少呀，要命。
wellcms插件看来还得需要几天才能发布。
热码者 10月前

引用 7楼

很专业的样子

axiuno 10月前

8楼

批量升级脚本：

<?php
// 递归遍历目录
function glob_recursive($pattern, $flags = 0) {
	$files = glob($pattern, $flags);
	foreach(glob(dirname($pattern).'/*', GLOB_ONLYDIR|GLOB_NOSORT) as $dir) {
		 $files = array_merge($files, glob_recursive($dir.'/'.basename($pattern), $flags));
	}
	return $files;
}
// 文件后缀名，不包含 .
function file_ext($filename, $max = 16) {
	$ext = strtolower(substr(strrchr($filename, '.'), 1));
	$ext = xn_urlencode($ext);
	strlen($ext) > $max AND $ext = substr($ext, 0, $max);
	if(!preg_match('#^\w+$#', $ext)) $ext = 'attach';
	return $ext;
}
function xn_urlencode($s) {
    $s = urlencode($s);
    $s = str_replace('_', '_5f', $s);
    $s = str_replace('-', '_2d', $s);
    $s = str_replace('.', '_2e', $s);
    $s = str_replace('+', '_2b', $s);
    $s = str_replace('=', '_3d', $s);
    $s = str_replace('%', '_', $s);
    return $s; 
}
$dir = empty($argv[1]) ? './*' : $argv[1] ;
$files = glob_recursive("$dir");
foreach ($files as $file) {
	$ext = file_ext($file);
	if(strpos($file, $_SERVER['PHP_SELF']) !== FALSE) continue;
	if($ext != 'htm' && $ext != 'php' && $ext != 'js') continue;
	$content = file_get_contents($file);
	$s = $content;
	$s = str_replace('m-l-0', 'ml-0', $s);
	$s = str_replace('m-r-0', 'mr-0', $s);
	$s = str_replace('m-t-0', 'mt-0', $s);
	$s = str_replace('m-b-0', 'mb-0', $s);
	$s = str_replace('m-x-0', 'mx-0', $s);
	$s = str_replace('m-y-0', 'my-0', $s);
	
	$s = str_replace('m-xs', 'm-1', $s);
	$s = str_replace('m-l-xs', 'ml-1', $s);
	$s = str_replace('m-r-xs', 'mr-1', $s);
	$s = str_replace('m-t-xs', 'mt-1', $s);
	$s = str_replace('m-b-xs', 'mb-1', $s);
	$s = str_replace('m-x-xs', 'mx-1', $s);
	$s = str_replace('m-y-xs', 'my-1', $s);
	
	$s = str_replace('m-sm', 'm-2', $s);
	$s = str_replace('m-l-sm', 'ml-2', $s);
	$s = str_replace('m-r-sm', 'mr-2', $s);
	$s = str_replace('m-t-sm', 'mt-2', $s);
	$s = str_replace('m-b-sm', 'mb-2', $s);
	$s = str_replace('m-x-sm', 'mx-2', $s);
	$s = str_replace('m-x-sm', 'my-2', $s);
	
	$s = str_replace('m-1', 'm-3', $s);
	$s = str_replace('m-l-1', 'ml-3', $s);
	$s = str_replace('m-r-1', 'mr-3', $s);
	$s = str_replace('m-t-1', 'mt-3', $s);
	$s = str_replace('m-b-1', 'mb-3', $s);
	$s = str_replace('m-x-1', 'mx-3', $s);
	$s = str_replace('m-y-1', 'my-3', $s);
	
	
	$s = str_replace('p-xs', 'p-1', $s);
	$s = str_replace('p-l-xs', 'pl-1', $s);
	$s = str_replace('p-r-xs', 'pr-1', $s);
	$s = str_replace('p-t-xs', 'pt-1', $s);
	$s = str_replace('p-b-xs', 'pb-1', $s);
	$s = str_replace('p-x-xs', 'px-1', $s);
	$s = str_replace('p-y-xs', 'py-1', $s);
	
	$s = str_replace('p-sm', 'p-2', $s);
	$s = str_replace('p-l-sp', 'pl-2', $s);
	$s = str_replace('p-r-sp', 'pr-2', $s);
	$s = str_replace('p-t-sp', 'pt-2', $s);
	$s = str_replace('p-b-sp', 'pb-2', $s);
	$s = str_replace('p-x-sp', 'px-2', $s);
	$s = str_replace('p-x-sp', 'py-2', $s);
	
	$s = str_replace('p-1', 'p-3', $s);
	$s = str_replace('p-l-1', 'pl-3', $s);
	$s = str_replace('p-r-1', 'pr-3', $s);
	$s = str_replace('p-t-1', 'pt-3', $s);
	$s = str_replace('p-b-1', 'pb-3', $s);
	$s = str_replace('p-x-1', 'px-3', $s);
	$s = str_replace('p-y-1', 'py-3', $s);
	
	$s = str_replace('p-l-0', 'pl-0', $s);
	$s = str_replace('p-r-0', 'pr-0', $s);
	$s = str_replace('p-t-0', 'pt-0', $s);
	$s = str_replace('p-b-0', 'pb-0', $s);
	$s = str_replace('p-x-0', 'px-0', $s);
	$s = str_replace('p-y-0', 'py-0', $s);
	
	$s = str_replace('col-xs-', 'col-', $s);
	
	$s = str_replace('center-block', 'mx-auto', $s);
	$s = str_replace('card-block', 'card-body', $s);
	$s = str_replace('text-bold', 'font-weight-bold', $s);
	$s = str_replace('pull-left', 'float-left', $s);
	$s = str_replace('pull-right', 'float-right', $s);
	
	$s = str_replace('hidden-md-up', 'hidden-md hidden-lg', $s);
	$s = str_replace('hidden-md-down', 'hidden-sm hidden-md', $s);
	
	$s = str_replace('avatar-xs', 'avatar-1', $s);
	$s = str_replace('avatar-sm', 'avatar-2', $s);
	$s = str_replace('logo-xs', 'logo-1', $s);
	$s = str_replace('logo-sm', 'logo-2', $s);
	
	if($s != $content) {
		echo $file."\r\n";
		file_put_contents($file, $s);
	}
}

使用方法，保存为 bs4.php，假定你要升级的目录名为 my_dir，执行，：php bs4.php /my_dir

发新帖

axiuno

主题数
824

帖子数
5796

精华数
0

注册排名
1

Bootstrap 4.0 alpha 4 升级到正式版升级指南。 文档教程

一、BS4 beta3 变化

二、UI 规范：

色彩：

布局：

axiuno

Bootstrap 4.0 alpha 4 升级到正式版升级指南。文档教程