Bulma居中布局

Bulma居中布局,在实现登录框之前,首先设置布局:将登录框设置为水平垂直居中

  • container:确保容器具有最大宽度,在更宽的视口中不会到达页面边缘。
  • columns:列的父级容器。
  • column:水平居中的列。
  • box:具有白色背景和阴影,使得在这个青绿色的网页上便于阅读内容。
<section class="hero is-primary is-fullheight">      
    <div class="hero-body">      
    <div class="container">     
    <div class="columns is-centered">       
    <div class="column">     
        <form class="box">
        Login
        </form>         
    </div>          
    </div>    
    </div>  
    </div>    
</section>

输出如下:
Bulma居中布局

尽管其中使用了is-centered修饰符,但是内容区域看起来并没有水平居中,这是因为Bulma的列会自动调整大小以铺满整个水平空间,这里只有一列,所以这一列会占据100%的宽度。

提示:尝试添加第2列并观察它们是否各占据50%的水平空间。

由于不希望登录框太宽,因此需要调整此列的大小。

调整列的大小,这里只需要一列,并且希望它是居中响应式的。Bulma提供了用于居中列的修饰符,并能为每个断点指定不同的列大小。

要实现这一点,请在表单容器中添加下面的修饰符,每一个都有特定作用。

  • is-5-tablet:在平板设备(窗口宽度大于769像素)上,限制列占5/12的宽度。
  • is-4-desktop:在桌面设备(窗口宽度大于1024像素)上,限制列占4/12的宽度。
  • is-3-widescreen:在宽屏显示器(窗口宽度大于1216像素)上,限制列占3/12的宽度。

由于Bulma的设计优先考虑移动设备,因此无须向表单容器添加手机端修饰符。默认情况下,在移动设备上为全宽。

给column添加上面几种设备的修饰符,效果如图所示。

<div class="column is-5-tablet is-4-desktop is-3-widescreen">     
    <form class="box">       
    Login      
    </form>   
</div>

Bulma居中布局

做完上述改动后,调整浏览器窗口大小即可看到列会根据设置的断点大小自动调整宽度。

完整代码如下:

<! DOCTYPE html>    
<html>      
    <head>  
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">        
        <title>Login</title>      
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">     
    </head>     
    <body>        
    <! -- 在此处编写页面内容代码 -->      
    <section class="hero is-primary is-fullheight">      
        <div class="hero-body">      
        <div class="container">     
        <div class="columns is-centered">       
        <div class="column is-5-tablet is-4-desktop is-3-widescreen">     
            <form class="box">
            Login
            </form>         
        </div>          
        </div>    
        </div>  
        </div>    
    </section>
    </body>    
</html>
赞(2)

评论 抢沙发

评论前必须登录!