• bootstrap初识


    Bootstrap

    Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。

    <head>之中添加viewport元数据标签。添加user-scalable=no可以禁用其缩放(zooming)功能。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    使用了Normalize

    用container包裹元素使其居中。

    栅格系统布局:

    表格

    为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。

    利用.table-bordered为表格和其中的每个单元格增加边框。

    利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

    利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

    利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

    通过状态class可以为行货单元格设置颜色:

    将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

    表单

    单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control<input><textarea><select>元素都将被默认设置为 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。

    为左对齐和inline-block级别的控件设置.form-inline,可以将其排布的更紧凑。

    通过为表单添加.form-horizontal,并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再使用.row了。

    被支持的控件

    大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

    在水平布局的表单中,如果需要将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可。

    输入焦点

    我们移除了某些表单控件的默认outline样式,并对其:focus状态赋予了box-shadow样式。

    被禁用的输入框

    为输入框设置disabled属性可以防止用户输入,并能改变一点外观,使其更直观。

    被禁用的fieldset

    <fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。

    校验状态

    Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning.has-error.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label.form-control.help-block都将接受这些校验状态的样式。

  • 相关阅读:
    Linux学习笔记21——线程同步的两种方式
    Linux学习笔记20——第一个多线程程序
    Linux学习笔记19——信号2
    Linux学习笔记18——信号1
    Linux学习笔记17——输入输出重定向
    Linux学习笔记16——wait函数
    Linux学习笔记15——GDB 命令详细解释【转】
    Linux学习笔记14——使用fcntl实现文件锁定
    Linux学习笔记13——使用curses函数库
    Linux学习笔记12——Unix中的进程
  • 原文地址:https://www.cnblogs.com/lurending0417/p/7471713.html
Copyright © 2020-2023  润新知