Bootstrap

最新推荐文章于 2021-10-24 12:48:05 发布

小野爱梨

最新推荐文章于 2021-10-24 12:48:05 发布

阅读量263

点赞数

文章标签： bookstrap4

本文链接：https://blog.csdn.net/BoBo2333/article/details/102833901

版权

文字排版

① HTML里面的h1等标签在bookstrap4中可以正常使用，bookstrap4另外提供了四个 display来控制标题的样式，两者代码对比如下：

    <div class="container">
            <h1>125</h1>    
    </div>    
    <div class="container">        
    	    <h1 class="display-1">123</h1>    
    </div>

运行结果如下：
在这里插入图片描述
②small元素用于创建字号更小的副标题，使用方法：<small>ashdjh</small>，注意：当small和display一起使用的时候会发现使用了small的字体并没有比原字体颜色浅，代码及效果如下：

<body>    
	<div class="container">        
		<h1 class="display-3">123<small>124</small></h1>    
	</div>
</body>

在这里插入图片描述
通过调试我们可以发现，small本来font-weight是400，但是前面有一个diaplay-3，所以继承了display-3的font-weight属性。前面的123本来是h1，也继承了display-3的font-weight属性，所以这两个数字都是以diaplay-3的font-weight显示的，然而small标签里面的字体大小会变为原来的80%，所以在相同的粗细条件下，small的字体更小，看起来就更粗。（f12键可以帮助我们更好的调试）
在这里插入图片描述

③mark用来标记高亮文本，mark的默认属性是黄色背景，可以改变样式。

<style>   mark {        
	color: blueviolet;        
	background-color: brown;    
	       } 
</style>
<body>
    <div>        
    <p>first <mark>homework</mark></p>    
    </div>
</body>

运行结果如下
在这里插入图片描述
④abbr在文本底部显示一条虚线，注意在使用的时候的格式。

    <div class="container">        
    <p>kkkkkkkkkkkk            
    <abbr title="123">llll</abbr>kkkkkkkkkkkk</p>    
    </div>

运行结果：
在这里插入图片描述
⑤blockquote 标记长的引用，blockquote之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

⑥dl

    <div class="container">        
    <dl>
    	<dt>koooo
    		<dd>looooo</dd>    
   	</dt>            
    	<dt>booooo
    		<dd>olo </dd>
    	</dt>        
    </dl>    
    </div>

运行结果：
在这里插入图片描述
⑦code 使用格式：<code>span</code>在两个标签中插入代码即可。
⑧kbd

    <style>        
    kbd {            
    color: blueviolet;            
    background-color: burlywood;
        }    
        <div class="container">        
        	<p>5666666<kbd>56565656</kbd>566666</p>    
        </div>

运行结果：
在这里插入图片描述
kbd里面文本默认是黑色背景白色字体，可以自己改变样式。

⑨更多文本样式设计（截图来源：菜鸟教程）
在这里插入图片描述

颜色

①一些有意义的文字颜色

    <div class="container" style="background-color: black;">        
    <h2>代表指定意义的文本颜色</h2>        
    <p class="text-muted">柔和的文本。</p>        
    <p class="text-primary">重要的文本。</p>
    <p class="text-success">执行成功的文本</p>        
    <div>

运行结果
在这里插入图片描述
链接的话是相同的使用方法，把前面的p变成a加上相应的链接即可。
背景颜色亦是如此，这节主要是掌握一些有特殊意义的颜色。

表格

①表格设计和之前相似，不同在于这个的表头要用thead标签，内容部分使用tbody标签。一行还是使用tr标签，th标签括住表头名字，td括住内容。

            <thead>                
              <tr>                    
            	<th>Firstname</th>                    
            	<th>Lastname</th>                    
            	<th>Email</th>                
              </tr>            
            </thead>            
            <tbody>                
              <tr>                    
              	<td>John</td>                    
              	<td>Doe</td>                    
              	<td>john@example.com</td>
              </tr>
            </tbody>

运行结果：
在这里插入图片描述
如果要给表格添加一些条纹的话，<table class="table table-striped">，给table加上这个class就可以实现，效果图如下：
给表格加上边框<table class="table table-bordered">效果图：
鼠标在边框上悬停，出现悬停效果<table class="table table-hover">，作用效果和a:hover这种类似，不再贴图。
表格的背景变成黑色的：<table class="table table-black">
黑色的条纹表格：<table class="table table-dark table-striped">效果图：在这里插入图片描述
上面介绍的属性可以联合搭配使用，table-hover也可以和table-dark搭配着一起使用，注意书写的时候的格式。

      <tr class="table-primary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>

bookstrap颜色之前已经有介绍，不再赘述。在单元格或者单元行的设计中也可以通过这种方法单独的设计某一行或者某一个单元格的颜色。大致效果如下图：
在这里插入图片描述

在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。灰色背景如下图：
在这里插入图片描述

.table-sm 类用于通过减少内边距来设置较小的表格,<table class="table table-bordered table-sm"> 在这里插入图片描述
.table-responsive用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）