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

axiuno 8月前 2599

一、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 class="row justify-content-between m-0">

<div> left </div>

<div> right </div>

</div>

第三种:(推荐)

<div class="d-flex">

<div> Left </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。

<div class="container">

<div class="card-body">

<div class="card-footer">


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="form-group input-group">

<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) { ?>

<nav><ul class="pagination justify-content-center"><?php echo $pagination; ?></ul></nav>

<?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 8月前
    引用 2
    挺好的...
  • Bob_1506321709 8月前
    引用 3
    表示完全看不懂,什么时候可以后台在线升级。
  • nianjin 8月前
    引用 4
    看看
  • mfxer 8月前
    引用 5
    等现成的
  • 燃烧的冰 8月前
    引用 6
    看来需要改的地方还不少呀,要命。
    wellcms插件看来还得需要几天才能发布。
  • 热码者 8月前
    引用 7
    很专业的样子
  • axiuno 8月前
    引用 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

返回
发新帖