• bootstrap基础


    下载

    引用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
        <script src="jquery-3.2.1.min.js"></script>
        <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button class="btn btn-info">测试demo</button>
    </body>
    </html>

    Bootstrap中的排版

    标题设置

    <span class="h1">标题一</span><small>小标题</small>        #使用class可直接使用样式

    字体-段落设置

    <!-- mark 标签为做特殊标记(黄色底边) -->
    <!-- del 为删除文本 -->
    <!-- ins 为插入文本,效果为文本多了下划线-->
    <!-- strong 加粗字体-->
    <!-- em 斜体 --> <!-- class="text-left" 文字左对齐(test-right为右对齐,text-center中心对齐 .text-justify:两端对齐)--> <!-- class="text-lowercase" 大写变小写, text-uppercase 小写变大写 text-capitalize 首字母变大写-->

    例:

    <body>
    <p><mark>计算机</mark>科学中,<del>算法的时间</del>复杂度是一个函数,<ins>它定量描述</ins>了该算法的运行时间,
        时间复杂度常用<strong>大O符号</strong>(大O符号(Big O notation)是用于描述函数渐进行为的数学符号</p>
        <p>在计算机科学中,<em>它在分</em>析算法复杂性<i>的方面非常有</i>用。)表述,使用这种方式时,        #这里被<i></i>圈起来的也会是斜体
            时间复杂度可被称为是渐近的,它考察当输入值大小趋近无穷时的情况</p>
        <p class="text-left">test</p>
        <p class="text-center">test</p>
        <p class="text-right">test</p>
        <p class="text-lowercase">SDAE</p>
    </body>

    表格

    <!-- table 基础表格-->
    <!-- table-striped 添加水平线,斑马线表格--> <!-- table-bordered 边框表格--> <!-- table-hover 鼠标经过某个表格时表格变高亮-->
    <!-- table-responsive 响应式表格,窗口大小变化时会自动出现滚动条--> <!-- 行标签里添加class(danger,active,info,warning) --表格产生出颜色-->

    • .text-muted:提示,使用浅灰色(#999)
    • .text-primary:主要,使用蓝色(#428bca)
    • .text-success:成功,使用浅绿色(#3c763d)
    • .text-info:通知信息,使用浅蓝色(#31708f)
    • .text-warning:警告,使用黄色(#8a6d3b)
    • .text-danger:危险,使用褐色(#a94442)

    例:

    <body>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                </tr>
            </thead>
            <tbody>
                <tr class="info">    <!-- 可选有 active waring sucess danger-->
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
               
            </tbody>
        </table>

    表单

    <!-- placeholder=" "   输入框的提示信息-->
    <!-- class="form-control"  表单控件,边框美化,点进输入框,边框会有颜色-->
    <!-- class="form-group"   底边距有15px的距离-->
    <!-- class="form-inline"    水平排列 -->
    <!-- input-lg/input-sm   使输入框变的更大/变小-->
    <!-- class="control-label"   可控制的lable-->
    <!-- class="sr-only"   使提示信息消失-->
    <!-- has-warning   显示报错信息 -->
    <!-- class="form-horizontal" 水平表单,标签居左,表单控件靠右(输入框)-->
    <select>下拉选择</select>
    <textarea>文本域</textarea>

    <type="checkbox">    复选框
    <type='radio'>    单选按钮

    示例:

    <form class="form-inline">
        <div class="form-group has-warning">
            <label class="sr-only control-label" for="">这是一个输入框</label>
            <input type="text" class="form-control" input-lg placeholder="输入。。。"/>
        </div>
    </form>
    <form role="form">
      <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
      </div>
      <div class="form-group has-error">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
      </div>
    </form>  
    <br>
    <br>
    <br>
    <h3>示例2</h3>   
    <form role="form">
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
      </div>
    
    </form>

    按钮

    <!-- class="btn btn-default"   按钮效果-->
    <!-- class="btn btn-success"   改变按钮颜色-->
    <!-- class="btnbtn-lg"   使按钮变大-->
    <!-- class="btn active"   使按钮显示为按下去的状态-->
    <!-- disabled="disabled"   通过disabled 属性使按钮显示为禁止状态-->
    <!-- class="disabled" 通过添加类名禁用按钮-->
    <!-- <input id="disabledTextInput" 表示禁止输入-->
    <!-- <select id="disabledSelect" 表示禁止选择--> <!-- class="btn-block" 按钮全行显示-->
    <!-- class="btn btn-danger/btn-waring"

    示例:

    <body>
    <button class="btn btn-default btn-lg active">默认按钮</button>  btn-lg 表示大型按钮  sm表示小型按钮
    <button class="btn btn-success">成功按钮</button>
    <button class="btn btn-primary btn-block">主要按钮</button>
    <button class="btn btn-warning" disabled="disabled">警告按钮</button>
    <button class="btn btn-danger">危险按钮</button>
    <a class="btn btn-link" href="#">a标签链接按钮</a>        #a标签做按钮
    <a class="btn btn-info">    信息按钮 
    </body>
  • 相关阅读:
    npm切换淘宝镜像
    Linux下安装Node.js环境
    Electron入门
    Grunt实现前端自动化
    Javascript代码复审(review)
    Eclipse启动Tomcat报错:Could not load the Tomcat server configuration at Servers2Tomcat v8.0 Server at localhost-config
    maven常用命令
    Element form表单验证无法生效
    css 绝对定位参考对象
    vscode 不识别 less代码
  • 原文地址:https://www.cnblogs.com/FRESHMANS/p/8466373.html
Copyright © 2020-2023  润新知