• 表格布局


    BootStrap提供了垂直表单、内联表单、水平表单

    基本表单的步骤:1、向父<form>元素添加role=“form”

                                 2、把标签和控件放在一个带有class.form-group的<div>中

                                 3、向所有的文本元素<input>、<textarea>和<select>添加class="form-control"

    BootStrap支持最常见的表单控件,主要是:input、textarea、checkbox、radio、select。

    BootStrap提供了所有原生的Html5的input类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、URL、search和tel

    禁用一个输入框,添加disable属性即可

    对<fieldset>添加disable属性来禁用<fieldset>

    BootStrap按钮

    任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。

    以下样式可用于<a>,<button>,<input>:

    描述
    .btn 为按钮添加基本样式
    .btn-default 默认、标准按钮
    .btn-primary 原始按钮样式
    .btn-success 成功的动作
    .btn-info 要弹出信息的按钮
    .btn-danger 危险动作的按钮操作
    .btn-link 按钮看起来像个链接
    .btn-lg 制作一个大按钮
    .btn-xs 一个超小按钮
    .btn-sm 一个小按钮
    .btn-block 块级按钮
    .active 按钮被点击
    .disable 禁用按钮

    设置垂直方向的按钮.btn-group-vertical

    设置自适应大小的按钮:.btn-group-justified

    BootStrap图片

    BootStrap提供了三个可对图片应用简单样式的class:

    1、.img-rounded:添加border-radius:6px来获得图片圆角

    2、.img-circle:添加border-radius:50%来让整个图片变成圆形

    3、.img-thumbnail:添加一些内边距(padding)和一个灰色的边框

    <img>类

    描述
    .img-rounded 为图片添加圆角
    .img-circle 将图片变为圆形
    .img-thumbnail 缩略图功能
    .img-responsive 图片响应式

    其他类

    描述
    .pull-left 元素浮动到左边
    .pull-right 元素浮动到右边
    .center-block 设置元素为display:block并居中显示
    .clearfix 清除浮动
    .show 强制元素显示
    .hidden 强制元素隐藏
    .sr-only  
    .sr-only-focusacble 与.sr-only类结合使用,在元素获取焦点时
    .text-hide 将页面元素所包含的文本内容替换为背景图
    .close 显示关闭按钮
  • 相关阅读:
    第五周学习总结-20175218
    第一周测试总结分析
    第四周学习总结-20175218
    第三周学习总结-20175218
    第二周学习任务-20175218
    第一周学习总结-20175218
    20175213 2018-2019-2 《Java程序设计》第11周学习总结
    数据结构-排序(选做)
    20175213 2018-2019-2 《Java程序设计》第10周学习总结
    2018-2019-2 20175213实验三《敏捷开发与XP实践》实验报告
  • 原文地址:https://www.cnblogs.com/cye9971-/p/10605789.html
Copyright © 2020-2023  润新知