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

巴特西

Bootstrap框架常用总结

最新文章

热门文章