bootstrap基础功能演示---2019年5月27日22时05分 - 前端作业

Home > List of blog posts > bootstrap基础功能演示---2019年5月27日22时05分

Blogger Information

Blog 35

fans 0

comment 0

visits 25283

Special Recommendation

More>

Related recommendations

实例

表格.png

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <!--表格:基类 修饰类1/主题1 修饰类2/主题2 ...-->
            <table class="table table-bordered table-hover text-center">
                <caption class="h3 text-center">我的表格</caption>
                <!--表头-->
                <thead>
                <tr class="info">
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr class="danger">
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr class="success">
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td class="warning">X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

默认垂直表单.png

实例

<form class="form-inline">
    <div class="form-group">
        <label for="email" class="sr-only">邮箱:</label>
        <input type="text" class="form-control" id="email" name="email" placeholder="Email">
    </div>

    <div class="form-group">
        <label for="password" class="sr-only">密码:</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox"> 记住密码
        </label>
    </div>

    <button class="btn btn-primary">登录</button>
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

水平表单.png

实例

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 class="text-center">用户登录</h3>
            <!--水平表单: -->
            <form action="" class="form-horizontal">
                <div class="form-group">
                <label for="email" class="col-sm-2 control-label">邮箱:</label>
                <div class="col-sm-10">
                    <input type="email" id="email" class="form-control" placeholder="Email">
                </div>

            </div>
                <div class="form-group has-error input-lg">
                    <label for="password" class="col-sm-2 control-label">密码:</label>
                    <div class="col-sm-10">
                        <input type="password" id="password" class="form-control" placeholder="Password">
                    </div>

                </div>

                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="" id="" checked> 记住密码
                            </label>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button class="btn btn-primary btn-block">登录</button>
                    </div>
                </div>



            </form>
        </div>
    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190606221026.png

实例

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form class="form-horizontal">
                <h3 class="text-center">编辑用户</h3>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="account">用户:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" placeholder="Account" id="account">
                        <!--静态控件-->
<!--                        <p class="form-control-static">admin</p>-->
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label" for="role">身份:</label>
                    <div class="col-sm-8">
                        <!--只读控件-->
                        <input type="text" class="form-control" id="role" placeholder="超级管理员" value="超级管理员"  readonly>
                    </div>
                </div>

                <div class="form-group">
                    <div class="checkbox col-sm-8 col-sm-offset-2">
                        <input type="checkbox" id="change" disabled> <label for="change">更改</label>
                    </div>
                </div>

                <div class="col-sm-8 col-sm-offset-2">
                    <button class="btn btn-primary btn-lg btn-block">保存</button>
                </div>

            </form>
        </div>
    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190606221104.png

实例

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <h3>1.可以用作按钮的元素:button,input:button,a</h3>
            <button type="button" class="btn btn-info" role="button">button按钮</button>
            <input type="button" class="btn btn-default" role="button" value="input按钮">
            <a href="http://www.php.cn" class="btn btn-primary">a标签按钮</a>

            <h3>2.按钮的预定义样式</h3>
            <button type="button" class="btn btn-default" role="button">default默认灰</button>
            <button type="button" class="btn btn-primary" role="button">primary首选蓝</button>
            <button type="button" class="btn btn-success" role="button">success成功绿</button>
            <button type="button" class="btn btn-info" role="button">info提示浅蓝</button>
            <button type="button" class="btn btn-warning" role="button">waring警告橙黄色</button>
            <button type="button" class="btn btn-danger" role="button">danger危险红</button>
            <button type="button" class="btn btn-link" role="link">Link链接</button>

            <h3>3.预定义的按钮大小</h3>
            <button type="button" class="btn btn-default btn-lg" role="button">大按钮</button>
            <button type="button" class="btn btn-primary" role="button">默认大小按钮</button>
            <button type="button" class="btn btn-success btn-sm" role="button">小按钮</button>
            <button type="button" class="btn btn-success btn-xs" role="button">极小按钮</button>

            <h3>4.按钮状态: 激活</h3>
            <button type="button" class="btn btn-info">未激活</button>
            <button type="button" class="btn btn-info active">激活</button>
            <h3>5.按钮状态:禁用</h3>
            <button type="button" class="btn btn-primary btn-lg">启用</button>
            <button type="button" class="btn btn-primary btn-lg disabled">禁用</button>
            <a href="http://www.php.cn" class="btn btn-warning disabled">php中文网</a>

        </div>

    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">

            <h3>1.响应式图片: 随屏幕大小可以自动缩放</h3>
            <!--center-block: 块居中-->
            <img src="static/images/girl.jpg" alt="氧气美女" class="img-responsive center-block" width="500">
            <h3>2.图片的基本类样式</h3>
            <img src="static/images/girl.jpg" alt="氧气美女" class="img-rounded" width="400">
            <img src="static/images/girl.jpg" alt="氧气美女" class="img-circle" width="400">
            <img src="static/images/girl.jpg" alt="氧气美女" class="img-thumbnail" width="400">

        </div>
    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190606221640.png

实例

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h3>1.前景色: 文本</h3>
            <!--正常状态 -->
            <p class="text-muted">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="text-primary">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="text-info">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="text-success">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="text-warning">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="text-danger">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>

            <h3>2.背景色</h3>
            <p class="bg-primary">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="bg-info">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="bg-success">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="bg-warning">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
            <p class="bg-danger">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>

            <button type="button" class="close" aria-label="close">X</button>
            <hr>
            <span class="caret"></span>
            <hr>
            <div class="pull-right" style="float:left">我是左边的内容</div>
            <div class="pull-left" style="float:right">我是右边的内容</div>
            <!--清除浮动-->
            <!--<div style="clear:both"></div>-->
            <div class="clearfix"></div>


        </div>
    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190606221705.png

实例

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h2 class="text-center">用户登录</h2>
                <form action="" class="form-horizontal">
                    <div class="form-group">
<!--                        label不用文字,用一个字全图标来表示, 更直观吸引人-->
                        <label for="email" class="control-label col-sm-2 col-sm-offset-2">
<!--                            可以自定义字体图标大小, 因图标非图片,所以会自动无损放大-->
                            <span class="glyphicon glyphicon-envelope text-success" style="font-size: 2rem"></span>
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="email">
                        </div>
                    </div>
                </form>

        </div>
    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190606221724.png

实例

<div class="dropdown" style="margin-top: 200px;">
    <!--按钮-->
    <button type="button" class="btn btn-default" data-toggle="dropdown">
        前端开发 <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
<!--        可选:下拉菜单的标题/辅助性说明文字-->
        <li class="dropdown-header">必备基础</li>
        <li><a href="">HTML5</a></li>
        <li><a href="">CSS3</a></li>
        <li><a href="">JavaScript</a></li>
        <!--可选的分隔条,当下拉项过多时,可以进行分组管理-->
        <li class="divider"></li>
        <li class="dropdown-header">常用框架</li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Bootstrap</a></li>
    </ul>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190606221743.png

实例

<div class="btn-toolbar">
    <!--按钮组-->
    <div class="btn-group btn-group-vertical btn-group-sm">
        <button type="button" class="btn btn-default">编辑</button>
        <button type="button" class="btn btn-default">删除</button>
        <button type="button" class="btn btn-default">撤消</button>
    </div>

    <div class="btn-group  btn-group-lg">
        <button type="button" class="btn btn-info">复制</button>
        <button type="button" class="btn btn-success">粘贴</button>
        <button type="button" class="btn btn-warning">剪切</button>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-info">前端技术</button>
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu">
            <!--        可选:下拉菜单的标题/辅助性说明文字-->
            <li class="dropdown-header">必备基础</li>
            <li><a href="">HTML5</a></li>
            <li><a href="">CSS3</a></li>
            <li><a href="">JavaScript</a></li>
            <!--可选的分隔条,当下拉项过多时,可以进行分组管理-->
            <li class="divider"></li>
            <li class="dropdown-header">常用框架</li>
            <li><a href="">jQuery</a></li>
            <li><a href="">Bootstrap</a></li>
        </ul>

    </div>


</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

本地环境的搭建以及HTML的基础知识总结—2019年4月22日19:06

2019-04-23 19:27:37