zoukankan      html  css  js  c++  java
  • bootStrap小结3

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!--屏幕和设备的屏幕保持一致,初始缩放为100%,禁止用户缩放-->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
        <title>表单</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-theme.css">
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-2.0.3.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="js/bootstrap.min.js"></script>
    
    </head>
    <body style="background-color: gray">
    <div class="container-fluid" style="background-color: white;">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="cemail">邮箱</label>
                <input type="email" name="cemail" id="cemail" class="form-control"/>
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" name="pwd" id="pwd" class="form-control"/>
            </div>
            <div class="form-group">
                <label for="tel">手机</label>
                <input type="text" name="tel" id="tel" class="form-control"/>
            </div>
            <div class="form-group">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby"/>唱歌</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby"/>跳舞</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby"/>旅游</label>
                <label class="checkbox-inline disabled">
                    <input type="checkbox" name="hobby" disabled="disabled"/>敲代码</label>
            </div>
            <div class="form-group">
                <label class="radio-inline">
                    <input type="radio" name="sex"/>男</label>
                <label class="radio-inline disabled">
                    <input type="radio" name="sex" disabled="disabled"/>女</label>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">搜索</span>
                    <input type="search" name="sc" id="sc" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="search" name="sear" id="sear" class="form-control"/>
                    <div class="input-group-addon">查询内容</div>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                    <input type="text" name="username" id="username" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                    <input type="password" name="password" id="password" class="form-control"/>
                </div>
            </div>
            <!--到bootstap官网去“组件”菜单去找-->
            <span class="glyphicon glyphicon-euro"></span>
            <span class="glyphicon glyphicon-pencil"></span>
            <br/>
            <input type="button" value="按钮" class="btn"/>
            <button class="btn">按钮</button>
            <a href="#" class="btn">按钮</a>
            <br/>
            <button class="btn btn-primary">按钮</button>
            <button class="btn btn-default">按钮</button>
            <button class="btn btn-info">按钮</button>
            <button class="btn btn-warning">按钮</button>
            <button class="btn btn-danger">按钮</button>
            <button class="btn btn-success">按钮</button>
            <button class="btn btn-link">按钮</button>
            <a href="#" class="btn btn-success active">激活按钮</a>
            <br/>
            <button class="btn btn-lg">按钮</button>
            <button class="btn">按钮</button>
            <button class="btn btn-sm">按钮</button>
            <button class="btn btn-xs">按钮</button>
            <br/>
            <div class="btn-group">
                <button class="btn btn-warning">按钮1</button>
                <button class="btn btn-success">按钮2</button>
                <button class="btn btn-primary">按钮3</button>
            </div>
        </form>
    </div>
    
    </body>
    <div class="container-fluid" style="background-color: white">
        栅格系统
        <!--xs超小型,适合手机-->
        <!--sm小型,适合平板-->
        <!--md中等,适合PC-->
        <!--lg大型,适合大桌面显示器-->
        <div class="row">
            <div class="col-md-1">col-1</div>
            <div class="col-md-1">col-2</div>
            <div class="col-md-1">col-3</div>
            <div class="col-md-1">col-4</div>
            <div class="col-md-1">col-5</div>
            <div class="col-md-1">col-6</div>
            <div class="col-md-1">col-7</div>
            <div class="col-md-1">col-8</div>
            <div class="col-md-1">col-9</div>
            <div class="col-md-1">col-10</div>
            <div class="col-md-1">col-11</div>
            <div class="col-md-1">col-12</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <img src="fig.jpg" class="img-responsive img-thumbnail"/>
                <h3 class="page-header">h3</h3>
                <p>句子句子句子句子句子句子句子句子句子</p>
            </div>
            <div class="col-md-4">
                <img src="fig.jpg" class="img-responsive img-thumbnail"/>
                <h3 class="page-header">h3</h3>
                <p>句子句子句子句子句子句子句子句子句子</p>
            </div>
            <div class="col-md-4">
                <img src="fig.jpg" class="img-responsive img-thumbnail"/>
                <h3 class="page-header">h3</h3>
                <p>句子句子句子句子句子句子句子句子句子</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">col-1</div>
            <div class="col-md-6">col-2</div>
        </div>
        <div class="row">
            <div class="col-md-2">col-1</div>
            <div class="col-md-3">col-2</div>
            <div class="col-md-7">col-3</div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
        </div>
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>
        <div class="row">
            <div class="col-md-4">4</div>
            <div class="col-md-2 col-md-offset-3">2</div>
        </div>
    
        <div class="row">
            <div class="col-md-4 col-md-push-8">4</div>
            <div class="col-md-8 col-md-pull-4">8</div>
        </div>
    </div>
    
    </body>
    </html>
    
  • 相关阅读:
    .NET 几种数据绑定控件的区别
    .NET 使用 Highcharts生成扇形图 柱形图
    使用Jquery1.9 版本 来实现全选
    30款jQuery常用网页焦点图banner图片切换
    MVC中使用MVCPager简单分页
    HttpWebRequest 以及WebRequest的使用
    C#中的事件机制
    如何向妻子解释OOD (转)
    linux 设置时间
    git 使用操作
  • 原文地址:https://www.cnblogs.com/zhengyb/p/10007868.html
Copyright © 2011-2022 走看看