bootstrap的属性width_Bootstrap的重置样式

最新推荐文章于 2024-05-12 09:07:18 发布
最新推荐文章于 2024-05-12 09:07:18 发布
阅读量255 收藏
点赞数
文章标签： bootstrap的属性width
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39752788/article/details/113581946
版权

1c8d6171b6990ef3213032194c5c09c8.png

Bootstrap的重置表现为，去掉本身样式，然后给元素添加其它样式，额外的样式需要通过明确的.class类来规范。。

重置CSS的原因：

  • 重置浏览器默认值，使用rem作为尺寸规格单位，代替em用于指定可缩放的组件的间隔与缝隙。
  • 最大化避免使用margin-top,防止使用它造成的垂直外排版（边距）混乱所造成之意想不到结果。更重要的是，一个单一方向的margin是一个简单的构思模型。
  • 为了易于跨设备缩放，block块元素必须使用rem作为margin的单位。
  • 保持font相关属性最小的声明，尽可能地使用inherit属性，不影响容器溢出。

重置CSS中选择覆盖和重定义了哪些元素？

1、table元素

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
		</tr>
	</table>
</body>

</html>

700d28a764f7aa1a30b76dd566111a33.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
		</tr>
	</table>
</body>

</html>

a730a4090b11ffe32f438fdf7b377c66.png

加上额外的样式后：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<table class="table table-bordered">
		<tr>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
		</tr>
	</table>
</body>

</html>

ac913d744a32304c2712486d101a5464.png

2、页面默认元素 html、body

为提供更好的页面展示效果，Bootstrap v4 更新了<html> and<body>元素的一些属性。

  • 全局性地将每一个元素的box-sizing属性(包括*:before、*:after都设置border-box-以确保DIV元素自身定义的宽度不会因为border或padding而超过。
  • <html>根元素没有声明font-size属性，但被假定为16px大小（这是目前Chrome等浏览器默认值)，然后在此基础上采用font-size:1rem的比例应用于<body>上，使媒体查询能够轻松的实现缩放，最大程序保障用户偏好和易于访问。
  • <body>元素被赋予一个全局性的font-family和 line-height，其下面的诸多表单元素也继承此属性，以防止字体大小错位冲突。
  • 为了安全起见，<body>的background-color的默认值赋为#fff。

html：

dcb3f938a94c85b1802c743eaf187539.png

body：

198ff08e0369e609ae95acfba9bc808b.png

根节点元素还被赋予了很多值：

4360115d1ec60b79749707097ca275a1.png

使用方式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}

		.testVal {
			width: 100px;
			height: 100px;
			background: var(--blue);
		}
	</style>
</head>

<body>
	<div class="testVal"></div>
</body>

</html>

1d5fd985b782778d52bcb914b2730924.png

3、标题和段落元素

所有标题和段落元素(如说<h1>以及<p>都被重置，系统移除它们的上外边距margin-top定义，标题添加外边距为margin-bottom: .5rem，段落元素<p>添加了外边距margin-bottom:1rem以形成简洁行距。

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<h1>陈学辉</h1>
	<h2>陈学辉</h2>
	<h3>陈学辉</h3>
	<p>陈学辉</p>
</body>

</html>

a1f3eca462a95b9ea938b2d413868730.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<h1>陈学辉</h1>
	<h2>陈学辉</h2>
	<h3>陈学辉</h3>
	<p>陈学辉</p>
</body>

</html>

e2a35d66e0ceace7330c1b6b1c0ecd0d.png

4、列表元素

移除所有的列表元素(<ul>、<ol>、 and<dl>）的外边距margin-top，并设置为margin-bottom: 1rem，被嵌套的子列表没margin-bottom值。

  • ul：

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<ul>
		<li>red</li>
		<li>
			<ul>
				<li>green</li>
			</ul>
		</li>
	</ul>
</body>

</html>

4f480129d82276008ba0c1ff316b91fb.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<ul>
		<li>red</li>
		<li>
			<ul>
				<li>green</li>
			</ul>
		</li>
	</ul>
</body>

</html>

a850e445bc5ea26bc7fbfcb4c3968826.png
  • ol:

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<ol>
		<li>red</li>
		<li>
			<ol>
				<li>green</li>
			</ol>
		</li>
	</ol>
</body>

</html>

b5e4340f7c71c21a41a6e55ed06fbe18.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<ol>
		<li>red</li>
		<li>
			<ol>
				<li>green</li>
			</ol>
		</li>
	</ol>
</body>

</html>

0fc424dc99cfa84b102737340f7280bc.png
  • dl:

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<dl>
		<dt>穷</dt>
		<dd>穷，汉语常用字，读作qióng或者gōng，最早见于甲骨文，造字本义为身居洞穴，身体被迫弯屈、不自由，后引申为物质上困顿的、不得志的、贫困的，又引申为追究、终结、尽、完等。（基本信息栏参考资料：）</dd>
	</dl>
</body>

</html>

01d35482599611a459449d3255b873e7.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<dl>
		<dt>穷</dt>
		<dd>穷，汉语常用字，读作qióng或者gōng，最早见于甲骨文，造字本义为身居洞穴，身体被迫弯屈、不自由，后引申为物质上困顿的、不得志的、贫困的，又引申为追究、终结、尽、完等。（基本信息栏参考资料：）</dd>
	</dl>
</body>

</html>

811dbf6b36e78b3f9dc4560d9711491e.png

5、pre预先格式化文本元素

  • pre标签可定义预格式化的文本。被包围在pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
  • bootstrap重置了pre元素，移除了它的margin-top属性并用rem作为margin-bottom的单位。

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<pre>&lt;html&gt;
	&lt;head&gt;
	</pre>
</body>

</html>

837e4418acdc80e335aab7c3b53bf422.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<pre>&lt;html&gt;
	&lt;head&gt;
	</pre>
</body>

</html>

2fc7182b6936dd2bb55218197c0c9a02.png

6、表格元素

微调了表格的样式，样式化了<caption>，且确保text-align属性一致。

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
</head>

<body>
	<table>
		<caption>课程表</caption>
		<tr>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
		</tr>
	</table>
</body>

</html>

92da17fa96181d1f99429d79ca4ab97e.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
</head>

<body>
	<table>
		<caption>课程表</caption>
		<tr>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
		</tr>
	</table>
</body>

</html>

ee1ac58011133760ce0694d4777d4b37.png

7、Forms表单元素

  • <fieldset>去除了边框、内填充、外边距属性，所以它们可以轻松地用作单一的输入框或者输入框组的放入容器中使用。
  • <legend>和fieldset字段集一样，也已被重新设计过，显示为不同种类的标题。
  • <label>加上了 display: inline-block属性，从而可以被用户赋予 margin 属性进行布局调用。
  • <input>、 <select>、 <textarea>s、 <button>基本本来都被规范化处理了，同时重置移除了它们的margin，并且设置了inline-height: inherit属性。
  • <textarea>被修改为只能竖直方向上调整大小，因为水平方向上调整大小经常会“破坏”页面布局

原本样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>重置样式</title>
</head>

<body>
	<form>
		<fieldset>
			<legend>标题</legend>
		</fieldset>
		<p>
			<label for="">用户名：</label>
			<input type="text">
		</p>
		<p>
			<button>敢点么</button>
			<select name="" id="">
				<option value="">北京</option>
				<option value="">上海</option>
				<option value="">广州</option>
			</select>
		</p>
		<p>
			<textarea name="" id="" cols="30" rows="10"></textarea>
		</p>
	</form>
</body>

</html>

81fc50105c4b19af8403cba9f7e1eba2.png

使用Bootstrap重置后的样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>重置样式</title>
</head>

<body>
	<form>
		<fieldset>
			<legend>标题</legend>
		</fieldset>
		<p>
			<label for="">用户名：</label>
			<input type="text">
		</p>
		<p>
			<button>敢点么</button>
			<select name="" id="">
				<option value="">北京</option>
				<option value="">上海</option>
				<option value="">广州</option>
			</select>
		</p>
		<p>
			<textarea name="" id="" cols="30" rows="10"></textarea>
		</p>
	</form>
</body>

</html>

c263c239a4209226ab3f6a832af6c7cf.png
weixin_39752788
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap学习3--CSS样式学习之响应式列重置
历程
04-01 1442
在某些阈值时（比如宽屏幕中的某些元素字数较多，窄屏幕中就没有办法放在一行中，就会影响行高），某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。 class="row"> class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3 class="col-xs-6 col-sm-3">.c
bootstrap 图标_Bootstrap的其它公共样式
weixin_35853363的博客
12-23 489
关闭图标 .close使用通用的close关闭图标来关闭 modals模态框提示或alert提示组件的内容。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
bootstrapform表单重置_Bootstrap select2 ,table, 清空表单form
weixin_29927965的博客
12-30 1255
Select2 插件 使用版本 ：4.0.1加载数据：加载时可设置其他参数可以设为多选，最多选择多少个等var jsonData = :[{"id": "0","text": "可用"},{"id": "1","text": "禁用"}]$("mySelect2IDorClass").select2({data:jsonData})获取值：var select2 = $("mySelect2ID...
Bootstrap 5-边框宽度
最新发布
m0_73839298的博客
05-12 108
【代码】Bootstrap 5-边框宽度。
bootstrapform表单重置_bootstrapvalidator表单验证、验证清除重置
weixin_39884323的博客
12-20 510
// 初始化表单验证$(function () {formValidator();});// Modal验证销毁重构$('#add').on('hidden.bs.modal', function () {$("#formValidate").data('bootstrapValidator').destroy();$('#formValidate').data('bootstrapValidat...
Bootstrap 5-实用工具-宽度(width)
m0_73839298的博客
10-08 201
宽度占百分比• w-25• w-50• w-75• w-100代码图效果图宽度自动• w-auto代码图效果图最大宽度占百分比• mw-100代码图效果图最大宽度自动• mw-auto代码图效果图。
bootstrap.rar_bootstrap_bootstrap matlab
07-15
Bootstrap function code
bootstrap中文手册_bootstrap教程_bootstrap_
09-30
bootstrap教程，里面有丰富的CSS样式，可以快速开发网站
bootstrap.zip_bootstrap_bootstrap matlab_bootstrap抽样_bootstrap重抽
07-14
通过重抽样技术，能够将小样本实现扩充的目的
bootstrap-3.3.7_Bootstrap 源码 .zip
04-25
bootstrap-3.3.7_Bootstrap 源码 .zip 免费下载 bootstrap-3.3.7-dist_ 用于生产环境的 Bootstrap .zip 免费下载 bootstrap-4.6.0-dist_用于生产环境的 Bootstrap .zip 免费下载 bootstrap-4.6.0_Bootstrap 源码 ....
0Bootstrap_Bootstrap样式_
10-03
一些界面UI，表格样式，（ IOS6风格，橘黄色，蓝色主题等）
bootstrap 列宽度介绍
hugejihu9的专栏
01-14 840
文章来自：源码在线https://www.shengli.me/css/573.html    
BootStrap 怎样调整<td>的宽度
希哈科技
07-27 4843
//对于 Bootstrap 3.0 For Bootstrap 3.0: // class="col-md-*"  其中的*表示列的宽度 With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.   &lt;tr class="something"&gt; ...
bootstrap的属性width_关于padding被计算在width中问题——box-sizing相关
weixin_42588555的博客
01-28 256
前一阵子遇到一个小问题，在同样的样式（主要是宽高边距之类的）条件下，DIV在移动端和PC端的宽度不一样，排除了绝大多数样式的问题，但是有个比较陌生，就是box-sizing，其实经常看到，只不过没怎么注意过，连具体的值都不知道有哪些，在开发者工具里面试了一下，果然和这个样式有关，因此查了一些资料并记录一下。盒子模型首先，盒子模型大家都知道，W3C标准的Box Model由四部分组成——conten...
bootstrap的属性width_Bootstrap的图片处理方法
weixin_39813200的博客
02-03 1314
响应式图片 .img-fluid在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name...
bootstrap css选择不同的宽度
fduffyyg的博客
01-18 220
bootstrap css选择不同的宽度
Bootstrap系列之尺寸（Sizing）
老__L的博客
06-03 994
尺寸（Sizing）
重置整个FORM控件的值
小鸡快跑。。。
02-28 889
         protected void Page_Load(object sender, EventArgs e)        ...{            foreach (Control ctl in Page.Controls[0].Controls)            ...{                if (ctl.GetType().Name == "Te
bootstrap_go_package
09-18
首先，bootstrap_go_package提供了统一的界面设计和样式，使得开发人员可以快速构建具有一致外观和响应式布局的网页。通过使用bootstrap_go_package提供的CSS样式和JavaScript插件，开发人员可以轻松创建漂亮、易于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值