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

原文地址:https://www.cnblogs.com/gu-bin/p/10105970.html