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">大屏幕介绍



  • 相关阅读:
    显示文件本地文件夹
    Select Dependencies选择依赖项
    搜索小技巧
    783. Minimum Distance Between BST Nodes BST节点之间的最小距离
    5. Longest Palindromic Substring 最长的回文子串
    12. Integer to Roman 整数转罗马数字
    3. Longest Substring Without Repeating Characters 最长的子串不重复字符
    539. Minimum Time Difference 最小时差
    43. Multiply Strings 字符串相乘
    445. Add Two Numbers II 两个数字相加2
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/7100572.html
Copyright © 2011-2022 走看看