bootstrap基础样式

最新推荐文章于 2022-05-02 16:51:11 发布
最新推荐文章于 2022-05-02 16:51:11 发布
阅读量227 收藏
点赞数
分类专栏： javaweb学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43386754/article/details/86556841
版权
  • 在bootstrap里面针对于各种的组件几乎都有提供样式,直接使用即可

标题样式

  • 对于标题信息往往使用h1–h6标签表示,但是有些人不愿意使用这个标签,因为搜索引擎在检索的时候会根据h1-h6的内容来确定文章标题

  • 所以如果现在既要使用h1-h6的标签效果,但是不希望使用原生标题标签,那么我们就可以使用bootstrap中的标题样式来实现同样的效果.

  • 示例:使用标题样式

	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<span class="h1">www.maoshu.com</span>
			</div>
		</div>	
		<div class="row">
			<div class="col-md-12 ">
				<span class="h2">www.maoshu.com</span>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 ">
				<span class="h3">www.maoshu.com</span>
			</div>
		</div>
	<div>

在这里插入图片描述

段落样式

  • 在进行一些文章查看的时候,会发现标题很大,而后面的正文文字相对较小,所以可以使用".lead"样式实现

  • 示例:定义段落

	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="lead">我爱你中国</div>
				<span>我爱你胜过爱自己,我在这片土地上奋斗,努力着,为了自己的理想,为了家人的生活</span>
			</div>
		</div>	
		
	<div>

在这里插入图片描述

文本样式

  • 在bootstrap之中存在有许多的文本样式,这些文本样式有以下许多种

  • 文本对齐

  • 对于文本的对齐显示,bootstrap中提供一下几种样式

文本靠左.text-left
文本靠右.text-right
文本居中.text-center
  • 示例:定义文本显示
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="text-left">我爱你胜过爱自己</div>
				<div class="text-right">我爱你胜过爱自己</div>
				<div class="text-center">我爱你胜过爱自己</div>
			</div>
		</div>	
		
	<div>

在这里插入图片描述

  • 如果在开发中分页组建可能放在右边

文本颜色

  • 对于文本样式有如下几种样式
柔和灰text-muted
重要蓝text-primary
成功绿text-success
信息蓝text-info
禁告黄text-warniing
危险红text-danger
  • 示例:文本颜色
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="text-primary">我爱你胜过爱自己</div>
				<div class="textsuccess-">我爱你胜过爱自己</div>
				<div class="text-info">我爱你胜过爱自己</div>
				<div class="text-warning">我爱你胜过爱自己</div>
				<div class="text-danger">我爱你胜过爱自己</div>
			</div>
		</div>	
	<div>

在这里插入图片描述

  • 此时信息的重要心实际上就可以通过这些岩石进行区分.

文字背景颜色

  • 文字除了自己的颜色之外,还有背景颜色
重要蓝bg-primary
成功绿bg-success
信息蓝bg-info
禁告黄bg-warniing
危险红bg-danger
  • 示例:设置文字背景
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="text-primary bg-primary">我爱你胜过爱自己</div>
				<div class="text-success bg-success">我爱你胜过爱自己</div>
				<div class="text-info bg-info">我爱你胜过爱自己</div>
				<div class="text-warning bg-warning">我爱你胜过爱自己</div>
				<div class="text-danger bg-danger">我爱你胜过爱自己</div>
			</div>
		</div>	
	<div>

在这里插入图片描述

  • 返现颜色靠近的时候可以进行一些反色的设置

文本标签

  • 文本标签不是背景,有如下的几种标签
灰色.label-default
蓝色.label-primary
绿色lable-success
蓝色lable-info
黄色lable-warning
红色lable-danger
  • 示例文本标签
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="label-default">我爱你胜过爱自己</div>
				<div class="label-primary">我爱你胜过爱自己</div>
				<div class="label-success">我爱你胜过爱自己</div>
				<div class="label-info">我爱你胜过爱自己</div>
				<div class="label-warning">我爱你胜过爱自己</div>
				<div class="label-danger">我爱你胜过爱自己</div>
			</div>
		</div>	
	<div>

在这里插入图片描述

  • 这个时候发现比之前的背景要深

  • 如果将div改为用span元素可能效果会更好

在这里插入图片描述

多行文本样式

  • 如果要做一个文章的管理系统,那么一定要进行文章信息的显示,可是如果文章显示空间很大,会严重影响布局,所以在bootstrap中提供有如下样式
  • 示例:多行文本显示
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<pre class="pre-scrollable">
				有网友爆料称，在上海回北京的复兴号上，后面突然追上来个和谐号，齐头并进了两分钟。网友:歪，喂，交警队吗，有两辆高铁在飙车！还管不管了？ 
@警民直通车-上海 表示：管不了，也追不上。
				</pre >
				
			</div>
		</div>	
	<div>

在这里插入图片描述

图像显示

  • 在bootstrap里面考虑到用户可能出现头像问题,例如:如果要显示图片应该使用正常方式,如果要显示头像,要使用圆形,所以在bootstrap之中提供有如下几个样式

    • img-rounded:以带弧度边角来显示图片
    • img-thumbnail:以缩略图的方式显示图片
    • img-circle:以圆形方式显示图片

  • 示例:图片显示

<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<img class="img-rounded" src="img/gd.jpg" style="width:auto;height:auto;max-height:200px;"/>
				<img class="img-thumbnail" src="img/gd.jpg" style="width:auto;height:auto;max-height:200px;"/>
				<img class="img-circle" src="img/gd.jpg" style="width:auto;height:auto;max-height:200px;"/>
			</div>
		</div>	
	<div>
  • 显示效果

在这里插入图片描述

表格样式

  • 最初在DIV还不盛行的时代,都是用表格来进行基础布局,但是后来这种结构混乱,现在表格都是使用表格显示数据了,bootstrap中提供了一堆表格的操作样式
  1. 在bootstrap里面最基础的表格样式是.table样式
  • 示例:定义表格
<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<table class="table">
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
				</table>
			</div>
		</div>	
	<div>
  • 效果图

在这里插入图片描述

  • 表格里面也可以进行条纹切换:那么可以使用table-striped的样式

  • 示例:设置条纹表格

<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<table class="table table-striped">
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr>
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
				</table>
			</div>
		</div>	
	<div>

在这里插入图片描述

  • 在进行表格样式设置的时候,".table"是作为一个基础样式必须存在的.

  • 也可以为表格设置边框:使用table-bordered样式完成

<table class="table table-striped table-bordered">
  • 也可以实现表格的切换动画:使用table-hover样式完成
				<table class="table table-hover table-striped table-bordered">
  • 在表格里面也有一些提示信息样式
<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<table class="table table-hover table-striped table-bordered">
					<tr class="success">
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr class="warning">
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr class="info">
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
					<tr class="danger">
						<td>部门编号</td>
						<td>部门名称</td>
						<td>部门位置</td>
					</tr>
				</table>
			</div>
		</div>	
	<div>

在这里插入图片描述

  • 开发中表格以简介为主,不要使用过多的颜色
{[("青椒盖饭")]}
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap基础视频教程
07-22
内容包括Bootstrap起步、Bootstrap全局css样式概览、Bootstrap全局css样式_栅格、Bootsrtap全局css样式_排版、Bootstrap全局css样式_代码、Bootstrap组件_字体图标、Bootstrap组件_按钮组等。 资源太大，传百度网盘...
​网格系统布局基本用法
weixin_34097242的博客
03-19 287
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap 行使用的样式为row 列使用的col-md-数字 范围1-12
信天鸽博客
07-26 1万+
Bootstrap前端开发框架
m0_67771087的博客
05-02 471
一.前端开发轮播图实现 代码： <div class="col-12 col-md-9"> <div class="row"> <!-- 右侧区域 --> <!-- 第一行 轮播图 --> <!-- 轮播图核心 carousel --> <!-- 小按钮 --> <div class="col"> <div id="ca
Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法
热门推荐
知行合一，跬步致远
03-24 7万+
概括 一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式。 关键字 1、col是column简写：列； 2、xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （&lt;768px）时使用；     ...
Bootstrap基础
m0_47256303的博客
09-18 328
1、container/container-fluid的区别 容器类： .container 类用于固定宽度并支持响应式布局的容器 .container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器 网格类: Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
两款漂亮的bootstrap分页样式
12-13
这是两款漂亮的bootstrap分页样式。他们在元素bootstrap3分页样式的基础上，通过简单的CSS3代码来对它进行美化，生成漂亮的分页样式。
Bootstrap使用基础教程详解
11-25
　提供一套完整的CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件表 灵活的响应式删格系统 移动先行 基于Less和Sass开发。 三：使用Bootstrap 　1.　第一步： 　到http://www.bootcss.com/下载最新的boot
Bootstrap的class样式小结
09-01
本文给大家总结了bootstrap的class样式，由基础到内涵给大家介绍的非常详细，需要的的朋友可以参考下
Bootstrap零基础入门教程(三)
12-10
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap ...
Bootstrap常用的公共样式
lihui61357457的博客
11-06 622
详情可见 1.文字颜色 1.文字颜色 柔和灰（text-muted） 主要蓝（text-primary） 次要灰（text-secondary） 成功绿（text-success） 危险红（text-danger） 警告黄（text-warning） 危息绿（text-info） 黑白对比（text-dark） 注意点: .text-white 、 .text-muted这两个样式不支持链接上使用 <p class="tex
html设置col-md-,bootstrap栅格布局中的css的col-xs-*,col-sm-*,col-md-* 的应用
weixin_42143161的博客
06-19 2157
摘要: bootstrap 栅格布局 css中的col-xs-,col-sm-,col-md-* 的意义：.col-xs-超小屏幕手机(768px), .col-sm-小屏幕平板(≥768px), .col-md-*中等屏幕桌面显示器首先说明：1、col-列；2、xs-maxsmall，超小；sm-small，小；md-medium，中等；3、-表示占列，即占自动每行row分12列栅格系统比；...
bootstrap里col-xs , col-sm ,col-md,col-lg的区别
weixin_38383877的博客
07-28 5907
前言         对于一些初学boostrap的同学来说，肯定也像我一样傻傻的搞不懂col-××-*都是要怎么使用吧，我刚开始也表示一脸懵逼，后来查阅了这篇文章才搞懂了他们之间的区别，我整理了一下供大家一起学习。 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 、col-lg-*的意义： .col-xs-* 超小屏幕 手机 (&lt;76...
bootstrap如何大于12栅格 12栅格不够怎么办 row嵌套
tanzongbiao的专栏
01-24 576
<!--bootstrap如何大于12栅格--> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-6">333333333333333333333 </div&gt.
bootstrap里面col-xs , col-sm ,col-md,col-lg的使用
Jason
05-10 2万+
col-lg一般用于大屏设备，(min-width:1200px);col-md一般用于中屏设备，(min-width：992px);col-sm一般用于小屏设备，(min-width：768px);col-xs用于超小型设备，(max-width：768px);后面跟数字是几，也就是占几份,比如是4，也就是一行可以显示3个;或者12，就是一行可以显示1个。关于使用，一般设置的话四个属性都用到会比...
bootstrap中的col-md-*
爱的叹息的专栏
01-02 1739
一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式 1、col是column简写：列 2、xs是maxsmall简写：超小，sm是small简写：小， md是medium简写：中等，lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （<768px）时使用； .col-sm-* 小屏幕如平板 （768px ≤ 宽度 ＜992px）时使用； .col-md-* 中等屏幕如普通...
Bootstrap3:栅格系统的基本用法
C_755028787的博客
05-05 2597
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 简介： 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。 栅格选项： bootstrap3.x使用了四种栅格选项来形成...
bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义
lzf的博客
05-24 1478
摘要: bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义：.col-xs-*超小屏幕手机(768px),.col-sm-*小屏幕平板(≥768px),.col-md-*中等屏幕桌面显示器 首先说明： 1、col-列； 2、xs-maxsmall，超小；sm-small，小；md-medium，中等； 3
导入Bootstrap基础样式文件bootstrap.min.css
最新发布
06-02
可以使用以下代码将Bootstrap基础样式文件bootstrap.min.css导入到HTML文件中： ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css"> ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值