zoukankan      html  css  js  c++  java
  • Boot_Strap基础

    1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:

    <div class="container">
     <div class="row"></div>
    </div>

    2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:

    <div class="container">
    <div class="row">
     <div class="col-md-4"></div>
     <div class="col-md-8"></div>

    3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

    4 列偏移  .col-md-offset-*可以将列偏移到右侧

    5 列嵌套

    6 定制你的bootstrap

    7 bootstrap表格

          table caption 标题 thead tbody

    8 有序列表和无序列表

          ol  ul  list-style-type属性  none:不使用项目符号。
    disc:实心圆。
    circle:空心圆。
    square:实心方块。
    demical:阿拉伯数字。
    lower-alpha:小写英文字母。
    upper-alpha:大写英文字母。
    lower-roman:小写罗马数字。
    upper-roman:大写罗马数字。

    去点列表 ,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格

    .list-unstyled {
    padding-left: 0;
    list-style: none;
    }

      项目列表
            <ol class="list-unstyled">
            <li>不带项目编号</li>
            <li>不带项目编号</li>
            </ol>

    9 from表单

         from-inline form-group form-control 

    简单登录form表单

    <form class="form-inline">
    <div class="form-group">
    <label >用户名</label>
    </div>
    <div class="form-group">

    <input class="form-control" type="text" placeholder="输入用户名"/>
    </div>
    <div class="form-group">
    <label>密码</label>
    </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="输入密码"/>
    </div>
    <div class="form-group">
    <label><input type="checkbox"/>记住密码</label>
    </div>
    <div class="form-group">
    <button type="submit" class="btn btn-default">登录</button>
    </div>
    </form>

    简单form表单登录

    <form>
           <fieldset>
             <legend>用户登录</legend>
             <div class="form-group">
                 <label>登录账户</label>
                 <input type="email" class="form-control" placeholder="请输入你
                     的用户名或Email">
             </div>
             <div class="form-group">
                 <label>密码</label>
                 <input type="text" class="form-control" placeholder="请输入你的密码">
             </div>
             <div class="checkbox">
                 <label><input type="checkbox">记住密码</label>
             </div>
             <button type="submit" class="btn btn-default">登录</button>
           </fieldset>
        </form>

  • 相关阅读:
    python 关于mysql 的 API pymysql
    Mysql
    Django的流程和命令行工具
    float属性 与position(定位)
    CSS的优先级与继承
    CSS的引入方式及选择器
    Html5 杂项
    Spring AOP之注解实现
    Spring AOP之xml 配置实现
    Java 正则表达式
  • 原文地址:https://www.cnblogs.com/yachao1120/p/8695128.html
Copyright © 2011-2022 走看看