bootstrap笔记

最新推荐文章于 2024-05-08 10:24:25 发布
最新推荐文章于 2024-05-08 10:24:25 发布
阅读量306 收藏 3
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_virus/article/details/119810090
版权

文章目录

Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的。 Bootstrap 目前的最新版本是 Bootstrap4，利用我们提供的 Sass 变量和大量
mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app

Bootstrap 安装与使用

引入 Bootstrap 的css JS Bootstrap的JS是基于jQuery 所以在 引入 Bootstrap的JS前
引入 JQ

Bootstrap 的模板

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

流式布局容器

  • .container 类基于固定宽度并支持响应式式的布局容器 俩侧有留白
  • .container-fluid类用于100%宽度 占据全部视口(viewport)的容器
		<div class="container" style="background-color: burlywood; height: 100px;">
			 .container 类基于固定宽度并支持响应式式的布局容器 俩侧有留白
		</div> 

	    <div class="container-fluid" style="background-color: thistle; height: 100px;">
			.container-fluid类用于100%宽度 占据全部视口(viewport)的容器
		</div>

栅格系统

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下
Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内（padding）。`通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 类似 .row 和
.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值
margin 从而抵消掉为 .container 元素设置的
padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 负值的
margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在，
也影响大屏幕设备。

在这里插入图片描述

在这里插入图片描述

	<!-- 布局容器 -->
		<div class="container">
			<!-- 行元素 -->
			<div class="row">
				<!-- 列元素-->
				<!-- 如果一“行（row）”中包含了的“列（column）”大于 12，
				多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 -->
				<div class="col-md-4" style="background: palegoldenrod;">4</div>
				<div class="col-md-8" style="background-color: bisque;">8</div>
			</div>
		</div>

列偏移

这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。偏移数+网格数不要超过12 否则会自动换行 （.col-md-offset-* ）

<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-1"  style="background: palegoldenrod;">4</div>
		<div class="col-md-4 col-md-offset-1" style="background-color: bisque;">4</div>
	</div>
</div>

的方式

列排序

列排序其实就是改变列的方向 就是改变左右浮动 并且设置浮动距离，如果目标位置有标签 会按照HTML 加载顺序后加载的会覆盖先加载的通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。（* 代表位数 1-11）

  • .col-md-push-* 向右排序
  • .col-md-pull-* 向左排序
<div class="container">
	<div class="row">
		<div class="col-md-1  col-md-push-1"  style="background: palegoldenrod;">5</div>
		<div class="col-md-2 col-md-pull-4" style="background-color: bisque;">2</div>
	</div>
</div>

列嵌套

将整行分为12份 取中其中X份 再将分为12分取其中X份

 	<div class="container">
		<div class="row">
			<div class="col-md-6"  style="background: red;">
					<div class="col-md-6" style="background-color: #000000;">列嵌套 </div>
		   </div>
	</div>
</div>

自动识别使用那个使用那个样式

<div class="container">
		<div class="row">
			<!--如果是大屏幕 使用col-md-6  如果是小屏幕使用col-sm-6  等等-->
			<div class="col-md-6 col-sm-6" style="background-color: #000000;"></div>
		</div>
</div>

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1 class="h1"> 主标题
	<small>副标题</small>
</h1>

文本

被删除的文本

<del>This line of text is meant to be treated as deleted text.</del>

带下划线的文本

<u>This line of text will render as underlined</u>

小号文本

<small>This line of text is meant to be treated as fine print.</small>

着重

<strong>rendered as bold text</strong>

斜体

<em>rendered as italicized text</em>

对齐

<p class="text-left">左对齐</p>
<p class="text-center">右对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>

文本颜色

  • text-muted：柔和文本（很淡的灰）
  • text-primary：重要文本（蓝色）
  • text-success：执行成功的文本（绿色）
  • text-info：提示信息（很淡的蓝）
  • text-warning：警告文本（黄色）
  • text-danger：危险文本（红色）
  • text-dark：深灰色文字
  • text-light：浅灰色文本
  • text-white:白色文本

列表

 - 有序列表  <ul><li></li></ul>
 - 无序列表  <ol><li></li></ol>
 - 定义列表 <tl><dt></tl></dt>

无样式列表 (.list-unstyled)

<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表 让其水平排序

<ul class="list-inline">
  <li>...</li>
</ul>

代码风格

<code>单行代码风格</code>
<!-- 快捷键风格 -->
<p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>保存</p>
<!-- 多行代码风格 会出现滚动条 加入(pre-scrollable) -->
<pre  class="pre-scrollable">
public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}	
}
</pre>

在这里插入图片描述

表格

条纹状表格 通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。

<table class="table table-striped">
  ...
</table>

带边框的表格 添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
  ...
</table>

鼠标悬停 通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
  ...
</table>

紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">
  ...
</table>

状态类 通过这些状态类可以为行或单元格设置颜色。Class 描述

  • .active 鼠标悬停在行或单元格上时所设置的颜色
  • .success 标识成功或积极的动作
  • .info 标识普通的提示信息或动作
  • .warning 标识警告或需要用户注意
  • .danger 标识危险或潜在的带来负面影响的动作

表单

表单要配合栅格使用 要不然占整行

文本框

  • .form-control 表单元素的样式
  • input-lg input-sm 控制表单的大小
<div class="row">
			<div class="col-md-3">
				<input type="text" class="form-control" />
				<input type="text" class="form-control input-lg" />
				<input type="text" class="form-control input-sm" />
			</div>
		</div>

下拉框

<div class="row">
		<div class="col-md-3" >
		<!-- form-control 控制样式  multiple="multiple" 设置多选 -->
			<select class="form-control" multiple="multiple">
				<option >请选择城市</option>
				<option >上海</option>
				<option >北京</option>
				<option >大连</option>
			</select>
		</div>
	</div>

复选框

	<!-- 复选框垂直显示 -->
		<div class="row">
			<div class="col-md-3" >
				<!-- checkbox 设置垂直显示 -->
				<div class="checkbox">
					<label>
						<input type="checkbox" name="hobby" />唱歌
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" name="hobby" />跳舞
					</label>
				</div>
			</div>
		</div>
		
		<!-- 复选框水平显示 -->
		<div class="row">
			<div class="col-md-3" >
				<!-- checkbox-inline 设置水平显示 -->  
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" />唱歌
					</label>	
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" />跳舞
					</label>		
			</div>
		</div>

单选框

<!-- 单选框垂直显示 -->

	<div class="row">
		<div class="col-md-3" >
			<!-- checkbox 设置垂直显示 -->
			<div class="radio">
				<label>
					<input type="radio" name="hobby" />唱歌
				</label>
			</div>
			<div class="radio">
				<label>
					<input type="radio" name="hobby" />跳舞
				</label>
			</div>
		</div>
	</div>
	
	<!-- 单选框水平显示 -->
	<div class="row">
		<div class="col-md-3" >
			<!-- checkbox-inline 设置水平显示 -->  
				<label class="radio-inline">
					<input type="radio" name="hobby" />唱歌
				</label>	
				<label class="radio-inline">
					<input type="radio" name="hobby" />跳舞
				</label>		
		</div>
	</div>

表单

基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 form-group 分组

<form>
  <div class="form-group">
	    <label for="exampleInputEmail1">Email address</label>
	    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
	    <label for="exampleInputPassword1">Password</label>
	    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
	    <label for="exampleInputFile">File input</label>
	    <input type="file" id="exampleInputFile">
	    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
 	 <button type="submit" class="btn btn-default">Submit</button>
</form>

内联表单

为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。 可能需要手动设置宽度 在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。 一定要添加 label 标签 如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

<form class="form-inline">
  <div class="form-group">
	    <label for="exampleInputName2">Name</label>
	    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
	    <label for="exampleInputEmail2">Email</label>
	    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  		<button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

内联单选和多选框

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

下拉菜单

单选

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

多选

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

禁用与只读

被禁用的 fieldset 为 设置 disabled 属性,可以禁用 中包含的所有控件。

为输入框设置 readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

按钮

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

居中与快速浮动

<div class="center-block">...</div>
<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

@Comp

MR-LHW
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 笔记
qq_42316056的博客
08-23 288
Bootstrap 小白笔记
bootstrap使用笔记
weixin_59263248的博客
04-09 606
1 导包 在官方网站上下载安装包，在script标签上引入。需要引入三个包 <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquer
Bootstrap【学习笔记】
weixin_52487106的博客
01-18 338
学习笔记
Bootstrap笔记大全
认真学习前端的博客
03-07 1505
Bootstrap笔记大全
2024年最新Bootstrap学习笔记，菜鸟物流java面试
最新发布
2401_84103344的博客
05-08 319
由于篇幅限制，小编在此截出几张知识讲解的图解本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录需要这份系统化的资料的朋友，可以点击这里获取@media screen and (min-width: 768px){//大于等于3.bootstrap里格式，定义都是事先定义好了的，必须使用正确才能正确调用。4…container容器。.container-fluid是百分百宽度。5.栅格系统。
适合初学者的BootStrap笔记，全网最全
qq_42176665的博客
11-02 842
最全面的BootStrap的知识点，适合新手和小白
Bootstrap学习笔记
sako_77的博客
04-19 209
前端页面框架
BootStrap笔记
weixin_42979539的博客
09-22 150
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式...
Bootstrap笔记
04-15
bootstrap笔记总结
12-29
Bootstrap 笔记总结 Bootstrap 是一个流行的前端框架，用于快速构建响应式的 web 应用程序。下面是 Bootstrap 相关的知识点总结： Base CSS * Bootstrap 提供了一个基本的 CSS 框架，使得开发者可以快速构建响应...
bootstrap笔记（每一个知识点都有单独的示例）非常全
09-19
bootstrap笔记（每一个知识点都有单独的示例）非常全，容易上手，学习bootstrap的利器
Bootstrap栅格系统学习笔记
09-01
主要为大家详细介绍了Bootstrap栅格系统学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
BootStrap学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 935
二、安装和使用 参考API：http://v3.bootcss.com/css/ 类用于100% 宽度，占据全部视口（viewport）的容器 02 栅格网格系统 BootStrap 提供了一套响应式、移动设备优先的流式栅格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或
BootStrap笔记参考（全）-优极限
weixin_51717662的博客
04-16 1641
BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3.2栅格网格系统 4.常用样式 4.1排版 4.2 表单 4.3 缩略图 4.4 面板 5.BootStrap插件 5.1 导航 5.2分页导航 5.3 下拉菜单 5.4模态框

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值