weui学习1

weui 邓文星
文章标签: weui

微信截图_20180810174750.png

<div class="weui-flex">
            <div class="weui-flex__item">
                <div >weui</div>
            </div>
        </div>
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
        </div>
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
        </div>
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">weui</div>
            </div>
        </div>

看到上面的效果图和代码本人感觉到一种熟悉的感觉

有些类似于bootstrap中的列表组

<ul class="list-group">
    <li class="list-group-item">Web前端开发</li>
    <li class="list-group-item">Java后台开发</li>
    <li class="list-group-item">Python大数据</li> 
</ul> 

结合两段代码以及weui代码的效果图不难知道这一段定义一个列表组或者说时列表行的代码

<ul class="list-group">

定义一个列表组

 <li class="list-group-item">Web前端开发</li>

定义一个列表项

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性

那么结合起来就是

<div class="weui-flex">

定义一个弹性布局的列表行

<div class="weui-flex__item">

定义一个弹性布局的列表行中弹性列表项

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :