Bootstrap

最新推荐文章于 2024-07-15 13:12:20 发布
最新推荐文章于 2024-07-15 13:12:20 发布
阅读量115 收藏
点赞数
文章标签： html bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49775354/article/details/109229280
版权

Bootstrap之十二栅格系统/Bootstrap排版

  • Bootstrap栅格参数
屏幕超小屏幕手机（<768px）小屏幕平板（>=768px）中等屏幕桌面显示器（>=992px）大屏幕大桌面显示器（>=1200px）
栅格系统行为总是水平排列开始时堆叠在一起，当大于这些阙值时将变为水平排列
.container最大宽度None（自动）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列数12
最大列宽自动62px81px97px
槽宽30px(每列左右均有15px)
可嵌套是
偏移是
列排序是
  • 实现原理
    1. 一行数据（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）
    2. 使用行（row）在水平方向创建一组列（column）
    3. 具体内容应该放在列（colunm）中，而且只有列（column）可以作为行（row）的直接子元素
    4. 可以使用 .row 和 .col-xs-4 这样的样式来快速定义创建栅格布局
  • 十二栅格系统
    1. 列组合
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
			</div>
			
			<div class="row">
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-8">col-md-8</div>
			</div>
			
			<div class="row">
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-4">col-md-4</div>
			</div>
		</div>
	</body>

列组合
2. 列偏移

	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
			</div>
			
			<div class="row">
				<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
			</div>
			
			<div class="row">
				<div class="col-md-6 col-md-offset-6">col-md-6 col-md-offset-6</div>
			</div>
		</div>
	</body>

列偏移

  1. 列嵌套
在这里插入代码片
  1. 列排序

表单

  • css样式
样式描述
table在这里插入图片描述
table-striped
table-bordered在这里插入图片描述
table-hover鼠标移入变色
table-condensed行高缩短了
table-responsive

列表

  • 一般用于做导航栏
  • class样式
样式描述
nav nav-tabs在这里插入图片描述
nav-pills使每个 li 分开
nav-justified自适应页面
glyphicon glyphicon-home添加图标
  • 下拉列表
  • 格式
<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">更多栏目
				<span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">学员案例</a></li>
			<li><a href="#">免费体验</a></li>
			<li><a href="#">英语胶囊</a></li>
			<li><a href="#">精彩动态</a></li>
		</ul>
</li>

	<body>
		<div class="container">
			<ul class="nav nav-tabs nav-pills nav-justified">
				<li>
					<a href="#">
						<span class="glyphicon glyphicon-home"></span>首页
					</a>
				</li>
				<li>
					<a href="#"><span class="glyphicon glyphicon-gift"></span>通用英语</a>
				</li>
				<li>
					<a href="#"><span class="glyphicon glyphicon-pencil"></span>海外考试</a>
				</li>
				<li>
					<a href="#"><span class="glyphicon glyphicon-globe"></span>青少英语</a>
				</li>
				<li>
					<a href="#"><span class="glyphicon glyphicon-send"></span>行业英语</a>
				</li>
				<li>
					<a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>在线购买</a>
				</li>
				<li>
					<a href="#"><span class="glyphicon glyphicon-user"></span>全球师资</a>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">更多栏目
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">学员案例</a></li>
						<li><a href="#">免费体验</a></li>
						<li><a href="#">英语胶囊</a></li>
						<li><a href="#">精彩动态</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

在这里插入图片描述

表单

横向表单

样式描述
.form-inline使所有的元素都处于一行，控制表单元素水平排列
.form-horizontal设置了padding 和 margin 的值，使文字在左，表单控件在右
form-control正常大小控件
input-lg form-control大控件
input-sm form-control小控件
	<body style="background: black;color: #FFFFFF;">
		<form action="#" class="form-inline">
			<div class="form-group">
				姓名：
				<input type="text" class="form-control" placeholder="请输入您的姓名" />
			</div>
			<div class="form-group">
				邮箱：
				<input type="email" class="form-control" placeholder="请输入您的邮箱" />
			</div>
			<input type="submit" class="form-control" value="提交" />
		</form>
	</body>

横向表单

内联表单

样式描述
.form-group
.form-horizontal		margin-right : -15px;
margin-left : -15px;
.form-control文本框样式
	<body style="background: black;">
		<div>
			<form action="#" class="form-group">
				<div class="form-group">
					<label>账号</label>
					<input type="text" class="form-control" placeholder="请输入您的账号">
				</div>
				<div class="form-group">
					<label for="">密码</label>
					<input type="password" class="form-control" placeholder="请输入您的密码">
				</div>
				<button type="button" class="btn btn-danger btn-block">提交</button>
			</form>
		</div>
	</body>

竖向表单

Bootstrap按钮

  • button样式
样式描述
btn btn-defaultdefault（灰色）
btn btn-primaryprimary （深蓝色）
btn btn-successsuccess（绿色）
btn btn-infoinfo（天蓝色）
btn btn-warningwarning（黄色）
btn btn-dangerdanger（红色）
btn btn-linklink（链接）
	<body>
		<input type="button" class="btn btn-default" value="灰色按钮" />
		<input type="button" class="btn btn-primary" value="深蓝色按钮" />
		<input type="button" class="btn btn-success" value="绿色按钮" />
		<input type="button" class="btn btn-info" value="天蓝色按钮" />
		<input type="button" class="btn btn-warning" value="黃色按钮" />
		<input type="button" class="btn btn-danger" value="红色按钮" />
		<input type="button" class="btn btn-link" value="超链接按钮" />
	</body>

按钮

Bootstrap图片

样式描述
.img-responsive让图片支持响应式布局；width=100%,height=auto,display=block;
.img-rounded圆角
.img-circle圆形
.img-thumbnail圆角边框
	<body>
		<img src="../IMG/logo6.png" class="img-circle" style="border: 1px solid black;"/>
		<img src="../IMG/logo6.png" class="img-rounded img-responsive" style="border: 1px solid black;"/>
		<img src="../IMG/logo6.png" class="img-thumbnail" style="border: 1px solid black;"/>
	</body>

在这里插入图片描述

GitXiaoYan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap使用
m0_57774967的博客
04-24 5131
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-table,当前行鼠标悬停样式
不懂不懂
08-24 9994
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { color:blue; cursor: pointer; } id="dataTable" data-class="table table-hover" data-sort-name="createTime" data-s
Bootstrap简介
归兮的博客
08-18 8341
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1742
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 5131
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 5028
bootstrap网页作业
Bootstrap educoder
qq_46675545的博客
06-12 3670
Bootstrap Bootstrap入门
Bootstrap基础知识
li_peng_yuan的博客
11-14 5125
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
Bootstrap自适应
weixin_44112242的博客
04-04 8992
Bootstrap是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使web开发跟家快捷 能制作响应式网页. bootstrap自适应: Bootstrap根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列 对应屏幕宽度为: 超小屏幕(手机):0-768px 对应设置 class=col-xs-number 小屏幕(平板):768-...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
html 关闭信息窗口
cuisidong1997的博客
07-14 214
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
HTML 学习指南：从入门到精通
英英的博客
07-09 473
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
CH15-DOM元素属性
IT技术类博客
07-13 1012
DOM 元素
什么是HTML？
最新发布
m0_65696193的博客
07-15 485
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript js。- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。- 重要的原则：页面三层分离(HTML,css，js书写的时候分开来写)。
bootstrap
06-01
, int size) { this.name = name; this.color = color; this.size = size; } public String getName() { return name;...Bootstrap最初由Twitter的前端工程师开发，现已成为最流行的前端框架之一。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值