zoukankan      html  css  js  c++  java
  • Bootstrap框架常用总结

    Bootstrap框架常用标签:
        标题标签:<h1>-<h6>
            bootstrap中也设置的相同的样式  - 若要使用 必须使用空标签来定义 比如<span  class="h1"></span>
        文本排版 : <p>
            bootstrap中对于文本的排版重新做了优化和定义。。
                <mark>咕咕咕</mark> 用这个标签修饰  “咕咕咕” 这个文字会稍微有些字体背景变黄。
                <del> 咕咕咕<del> 用这个标签修饰  “咕咕咕” 这个文字以删除线的方式显示。
                <ins>咕咕咕</ins> <u>咕咕咕</u>  这个标签修饰会显示文字下划线
                <small>咕咕咕</small> 使文字变小
            bootstrap中对文本进行对齐:
                <p  class="text-left">咕咕咕</p>  文本向左对齐
                <p  class="text-center">咕咕咕</p>  文本居中对齐
                <p  class="text-right">咕咕咕</p>  文本向右对齐
            bootstrap对字母进行大小写规范:
                <p class="text-lowercase">  所有字母全部小写
                <p class="text-uppercase">所有字母小写
                <p class="text-capitalize"> 首字母大写

        <footer class="blockquote-footer">From WWF's website</footer>文字变小并且颜色浅

        <kbd>ctrl + p</kbd>  变成黑色  

        <code>文字变红</code>,

    .font-weight-bold 加粗文本 尝试一下
    .font-weight-normal 普通文本 尝试一下
    .font-weight-light 更细的文本 尝试一下
    .font-italic 斜体文本 尝试一下
    .lead 让段落更突出 尝试一下
    .small 指定更小文本 (为父元素的 85% ) 尝试一下
    .text-left 左对齐 尝试一下
    .text-center 居中 尝试一下
    .text-right 右对齐 尝试一下
    .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 尝试一下
    .text-nowrap 段落中超出屏幕部分不换行 尝试一下
    .text-lowercase 设定文本小写 尝试一下
    .text-uppercase 设定文本大写 尝试一下
    .text-capitalize 设定单词首字母大写 尝试一下
    .initialism 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 尝试一下
    .list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) 尝试一下
    .list-inline 将所有列表项放置同一行 尝试一下
    .pre-scrollable 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条


        表格样式修改  <table class="样式">   <tr class="danger"> // red warning // yellow info // blue success // green
               以下是对table标签的class进行修饰 Bootstrap中的表格:
               .table-bordered 带边框
               .table-striped 条纹
              .table-hover 悬停变色
             .table-condensed 紧凑

      颜色:

        详情请看:http://www.runoob.com/bootstrap4/bootstrap4-colors.html

  • 相关阅读:
    NOIP 2008 立体图
    JDOJ 1606 数字三角形
    JDOJ 1133 分段公司利润
    NOIP 2011 选择客栈
    NOIP 2014 无线网络发射器选址
    USACO Party Invitations
    NOI 2001 食物链
    NOI 2002 银河英雄传说
    BOI 2003 团伙
    NOIP 2017 奶酪
  • 原文地址:https://www.cnblogs.com/gu-bin/p/10105970.html
Copyright © 2011-2022 走看看