当前位置: 首页 > 工具软件 > Pure.css > 使用案例 >

响应式布局框架 Pure-CSS 5.0 示例中文版-中

宰修能
2023-12-01

8. 表单 Form

在 form 标签中添加 .pure-form 类,可生成单行表单(inline)

效果图:

 

代码:

<form class="pure-form">

    <fieldset>

        <legend>A compact inline form</legend>

 

        <input type="email" placeholder="Email">

        <input type="password" placeholder="Password">

 

        <label for="remember">

            <input id="remember" type="checkbox"> Remember me

        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>

    </fieldset>

</form>

 

在 form 标签中添加 .pure-form-stacked 类,可生成栈型表单

效果图:

 

代码:

<form class="pure-form pure-form-stacked">

    <fieldset>

        <legend>A Stacked Form</legend>

 

        <label for="email">Email</label>

        <input id="email" type="email" placeholder="Email">

 

        <label for="password">Password</label>

        <input id="password" type="password" placeholder="Password">

 

        <label for="state">State</label>

        <select id="state">

            <option>AL</option>

            <option>CA</option>

            <option>IL</option>

        </select>

 

        <label for="remember" class="pure-checkbox">

            <input id="remember" type="checkbox"> Remember me

        </label>

 

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>

    </fieldset>

</form>

在 form 标签中添加 .pure-form-aligned 类,可生成排型表单

效果图:

 

代码:

<form class="pure-form pure-form-aligned">

    <fieldset>

        <div class="pure-control-group">

            <label for="name">Username</label>

            <input id="name" type="text" placeholder="Username">

        </div>

 

        <div class="pure-control-group">

            <label for="password">Password</label>

            <input id="password" type="password" placeholder="Password">

        </div>

 

        <div class="pure-control-group">

            <label for="email">Email Address</label>

            <input id="email" type="email" placeholder="Email Address">

        </div>

 

        <div class="pure-control-group">

            <label for="foo">Supercalifragilistic Label</label>

            <input id="foo" type="text" placeholder="Enter something here...">

        </div>

 

        <div class="pure-controls">

            <label for="cb" class="pure-checkbox">

                <input id="cb" type="checkbox"> I've read the terms and conditions

            </label>

 

            <button type="submit" class="pure-button pure-button-primary">Submit</button>

        </div>

    </fieldset>

</form>

 

通过与响应式网格(responsive-grids)结合,可生成多列表单

效果图:

 

代码:

<form class="pure-form pure-form-stacked">

    <fieldset>

        <legend>Legend</legend>

 

        <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="first-name">First Name</label>

                <input id="first-name" type="text">

            </div>

 

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="last-name">Last Name</label>

                <input id="last-name" type="text">

            </div>

 

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="email">E-Mail</label>

                <input id="email" type="email" required>

            </div>

 

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="city">City</label>

                <input id="city" type="text">

            </div>

 

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="state">State</label>

                <select id="state" class="pure-input-1-2">

                    <option>AL</option>

                    <option>CA</option>

                    <option>IL</option>

                </select>

            </div>

        </div>

 

        <label for="terms" class="pure-checkbox">

            <input id="terms" type="checkbox"> I've read the terms and conditions

        </label>

 

        <button type="submit" class="pure-button pure-button-primary">Submit</button>

    </fieldset>

</form>

 

通过对 fieldset 增加 .pure-group 类, 可对元素分组

效果图:

 

代码:

<form class="pure-form">

    <fieldsetclass="pure-group">

        <input type="text" class="pure-input-1-2" placeholder="Username">

        <input type="text" class="pure-input-1-2" placeholder="Password">

        <input type="email" class="pure-input-1-2" placeholder="Email">

    </fieldset>

 

    <fieldset class="pure-group">

        <input type="text" class="pure-input-1-2" placeholder="Another Group">

        <input type="text" class="pure-input-1-2" placeholder="More Stuff">

    </fieldset>

 

    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>

</form>

控制表单元素大小,可以通过增加 .pure-input-* 类实现,如 pure-input-2-3 代表宽度为 66.6%

 

为输入项增加 required 属性,使其具有必填提示

<input type="email" placeholder="Requires an email"required>

 

为输入项增加 disabled 属性,使其不可用

<input type="text" placeholder="Disabled input here..."disabled>

 

为输入项增加 readonly 属性,使其只读

<input type="text" value="Readonly input here..."readonly>

 

为输入项增加pure-input-rounded 属性,使其变圆角

<input type="text" class="pure-input-rounded">

 

复选框(checkbox)和单选框(radio),增加 .pure-checkbox 和 .pure-radio,保持其样式整齐

效果图:

 

代码:

<form class="pure-form">

    <label for="option-one" class="pure-checkbox">

        <input id="option-one" type="checkbox" value="">

        Here's option one.

    </label>

 

    <label for="option-two" class="pure-radio">

        <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>

        Here's a radio button. You can choose this one..

    </label>

 

    <label for="option-three" class="pure-radio">

        <input id="option-three" type="radio" name="optionsRadios" value="option2">

        ..Or this one!

    </label>

</form>

 

9. 按钮

在 a 或 button 标签中添加类 .pure-button

 

<aclass="pure-button" href="#">A Pure Button</a>

<buttonclass="pure-button">A Pure Button</button>

 

禁用的按钮 Disabled Button

 

<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>

<button class="pure-button pure-button-disabled">A Disabled Button</button>

 

激活的按钮 Active Button,同按下状态

 

<a class="pure-button pure-button-active" href="#">An Active Button</a>

<button class="pure-button pure-button-active">An Active Button</button>

 

高亮按钮 Primary Button

 

<a class="pure-button pure-button-primary" href="#">A Primary Button</a>

<button class="pure-button pure-button-primary">A Primary Button</button>

 

自定义按钮

 

<div>

    <style scoped>

 

        .button-success,

        .button-error,

        .button-warning,

        .button-secondary {

            color: white;

            border-radius: 4px;

            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

        }

 

        .button-success {

            background: rgb(28, 184, 65); /* this is a green */

        }

 

        .button-error {

            background: rgb(202, 60, 60); /* this is a maroon */

        }

 

        .button-warning {

            background: rgb(223, 117, 20); /* this is an orange */

        }

 

        .button-secondary {

            background: rgb(66, 184, 221); /* this is a light blue */

        }

 

    </style>

 

    <button class="button-success pure-button">Success Button</button>

    <button class="button-error pure-button">Error Button</button>

    <button class="button-warning pure-button">Warning Button</button>

    <button class="button-secondary pure-button">Secondary Button</button>

</div>

 

按钮大小

 

<div>

    <style scoped>

 

        .button-xsmall {

            font-size: 70%;

        }

 

        .button-small {

            font-size: 85%;

        }

 

        .button-large {

            font-size: 110%;

        }

 

        .button-xlarge {

            font-size: 125%;

        }

 

    </style>

 

    <button class="button-xsmall pure-button">Extra Small Button</button>

    <button class="button-small pure-button">Small Button</button>

    <button class="pure-button">Regular Button</button>

    <button class="button-large pure-button">Large Button</button>

    <button class="button-xlarge pure-button">Extra Large Button</button>

</div>

 

图标按钮

要使用图标按钮,需添加 CSS 字体文件,比如 Font-Awesome 

 

 

<button class="pure-button">

    <i class="fa fa-cog"></i>

    Settings

</button>

 

<a class="pure-button" href="#">

    <i class="fa fa-shopping-cart fa-lg"></i>

    Checkout

</a>

 类似资料: