zoukankan      html  css  js  c++  java
  • bootstrap笔记

    1

    Bootstrap是移动设备优先的。

    通过加入.img-responsive class能够让Bootstrap 3中的图片对响应式布局的支持更友好。

    使用.col-md-offset-*能够将列偏移到右側。

    2.

    bootstrap经常使用栅栏格式写法:

    <div class="row">
    
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
    
             </div>
    
    </div>

    3.

    Bootstrap将全局font-size设置为14pxline-height1.428

    这些属性直接赋给<body>和全部段落元素。

    4.

    将不论什么.table包裹在.table-responsive中就可以创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。

    当屏幕大于768px宽度时,水平滚动栏消失。

    5

    5.

    单独的表单控件会被自己主动赋予一些全局样式。

    全部设置了.form-control<input><textarea><select>元素都将被默认设置为 100%;

    label和前面提到的这些控件包裹在.form-group中能够获得最好的排列。

    6.

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

    7.

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

    8.

    通过将.checkbox-inline  .radio-inline应用到一系列的checkboxradio控件上,能够使这些控件排列在一行。

    9.

    加入.has-warning.has-error.has-success到这些控件的父元素就可以。

    不论什么包括在此元素之内的.control-label.form-control.help-block都将接受这些校验状态的样式。

    10.

    <button type="button" class="btn btn-link">Link</button类似于a的链接

    <div class="center-block">...</div内容区域居中

    假设是用于对齐导航条上的组件,请务必使用.navbar-left  .navbar-right

    <button type="button" class="close" aria-hidden="true">×</button>

    关闭button

    <div class="jumbotron">大屏幕介绍



  • 相关阅读:
    ubuntu lock
    ubuntu 源
    ubuntu server版 ssh配置有时没有sshd_config文件或者空文件的情况
    pip3 install tensorflow==2.2
    tensorflow安装提示load 失败
    wXgame上某游戏封包分析
    lazarus 使用微软detour库 delphi
    dll函数导出
    Error: Duplicate resource: Type = 24, Name = 1, Lang ID = 0000
    Tests run: 3, Failures: 0, Errors: 3, Skipped: 0, Time elapsed: 0.065 s <<< FAILURE!
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/7100572.html
Copyright © 2011-2022 走看看