bootstrap学习路线

最新推荐文章于 2024-05-30 15:01:09 发布
最新推荐文章于 2024-05-30 15:01:09 发布
阅读量292 收藏
点赞数
文章标签： bootstrap jquerybootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45545764/article/details/118876881
版权

在这里插入图片描述

一、布局容器和栅格网格系统

导入bootstrap

		<link rel="stylesheet" type="text/css" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />

1.布局容器

1.container类用于固定宽度并支持响应式布局的容器。

		<div class="container" style="background-color: #419641; height: 200px;" >
		</div>

2.container-fluid类用户100%宽度，占据全部视口的容器。

		<div class="container-fluid" style="background-color: #419641; height: 200px;>
		</div>

2.栅格网格系统

1.响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

在这里插入图片描述

2.在行元素列不能超过12列，设置的每一列都会在一行内
		<!--布局容器-->
		<div class="container">
			<!--行元素-->
			<div class="row">
					<!--列元素 col-xs col-sm col-md-->
						<div class="col-md-8" style="background-color: #101010;">4</div>
						<div class="col-md-4" style="background-color: red ;">8</div>
			</div>
		</div>
  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，
  • 以便为其赋予合适的排列（aligment）和内补（padding）。 通过“行（row）”在水平方向创建一组“列（column）”。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*
    栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在，
    也影响大屏幕设备。

在这里插入图片描述
通过使用针对平板设备的 .col-sm- 类，*

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

注意 ：若超过12列，就会自动换到下一行

3.列编译，两个列之间隔距离

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
  <div class="col-md-4">.col-md-4</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-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
4.列排序

通过使用 .col-md-push-* （向右浮动）和 .col-md-pull-* （向左浮动）类就可以很容易的改变列（column）的顺序。（左右浮动）

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
5.列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

3.常用样式

1.标题

在标题内还可以包含《small 》标签或赋予 .small 类的元素，可以用来标记副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

在这里插入图片描述

2.情景文本颜色（强调）
	<body>
		<div class="text-muted">	 提示颜色  </div>
		<div class="text-primary">   主要 蓝色   </div>
		<div class="text-success"> <p>成功 浅绿色</p>  </div>
		<p class="text-info">   通知 浅蓝色  </p>
		<p class="text-warning">  警告 黄色    </p>
		<p class="text-danger">  危险 褐色   </p>
	</body>
3.对齐效果

bootstrap控制文本风格：
text-left：左对齐
text-center:居中对齐
text-right：右对齐
text-justify：两端对齐

		<p style="text-align: right;">313215613213</p>
		<p style="text-right">313215613213</p>
		<p style="text-align: center;">313215613213</p>
		<p style="text-align: left;">313215613213</p>
		<p style="text-align: justify;"></p>
4.列表

1.无序列表

<ul>
  <li>...</li>
</ul>

2.有序列表

<ol>
  <li>...</li>
</ol>

3.无样式列表

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

4.内联列表

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

5.描述

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

6.水平排列的描述

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>
5.表格

1.基本实例
为任意

标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

  • table bootstrap的表格
  • table-bordered 让表格有格子印
  • table-striped 让每隔一行就有明显的印记
  • table-hover 在表格上停留会有高亮
  • table-condensed 让表格更加紧凑写
	<body>
		<table class="table table-bordered table-striped table-hover table-condensed">
			<tr class="success">
				<th>da</th>
				<th>dasdas</th>
				<th>oooooa</th>
			</tr>
			<tr>
				<td>da</td>
				<td>dasdas</td>
				<td>oooooa</td>
			</tr>
			<tr>
				<td>da</td>
				<td>dasdas</td>
				<td>oooooa</td>
			</tr>
			<tr>
				<td>da</td>
				<td>dasdas</td>
				<td>oooooa</td>
			</tr>
			<tr>
				<td>da</td>
				<td>dasdas</td>
				<td>oooooa</td>
			</tr>
		</table>
6.表单

原生效果

			<input type="text" /> <br>
			<select>
				<option selected="">------</option>
				<option>上号</option>
				<option>上海</option>
				<option>北京</option>
			</select><br>
			<textarea></textarea><br>

<div class="container">
				<div class="row">
					<div class="col-md-4">
						<select  class="form-control">
							<option>------</option>
							<option>上号</option>
							<option>上海</option>
							<option>北京</option>
						</select>
					 </div>
					<div class="col-md-4"> 
					 <input type="text" class="form-control input-lg"/> <br>
					 <input type="text" class="form-control input-sm"/> <br>
					 </div>
					 <div class="col-md-4">
						<select  class="form-control" multiple="multiple">
							<option selected>------</option>
							<option>上号</option>
							<option>上海</option>
							<option>北京</option>
						</select>
					  </div>
				</div>
  • form-control 变成bootstrap的表单
  • multiple 设置下拉框多选
7.按钮

样式

<!-- 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>

尺寸

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

按钮禁用
注意 alert(‘hello’) 里面是单引号

		<!-- 按钮禁用 -->
		<!-- 在标签中添加disabled属性 -->
		<button class="btn btn-success" onclick="alert('hello');" disabled="disabled">按钮</button>
<!-- 		在元素标签中添加类名disabled
 -->		<button class="btn btn-success disabled" onclick="alert('hello');">按钮</button>
8.表单布局
1.水平表单

如何聚焦：
在label里添加for属性 如何在表单元素里添加id 保持for的id与表单id一样 就可以聚焦

<div class="form-group">
				<label for="pwd" class="control-label col-md-3">密码</label>
				<div class="col-md-6">
					<input type="text" id="pwd" class="form-control" placeholder="请输入密码"/>
				</div>
			</div>

		<form action="#" class="form-horizontal" >
			<h2 align="center">用户信息表</h2>
			<div class="form-group">
				<label for="usname" class="control-label col-md-3">姓名</label>
				<div class="col-md-6">
					<input type="text" id="usname" class="form-control" placeholder="请输入姓名"/>
				</div>
			</div>
			<div class="form-group">
				<label for="" class="control-label col-md-3">密码</label>
				<div class="col-md-6">
					<input type="text" id="usname" class="form-control" placeholder="请输入姓名"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3">爱好</label>
				<div class="col-md-6 col-md-offset-1">
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" />唱歌
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby"/>跳舞
					</label>
				</div>
			</div>
		</form>
2.内联表单

form-inline

		<form class="form-inline">
			<div class="form-group">
				 <label for="name">姓名</label>
				 <input type="text"id="name" class="form-control" placeholder="请输入姓名"/>
			</div>
			<div class="form-group">
				 <label for="pwd">密码</label>
				 <input type="text"id="pwd" class="form-control" placeholder="请输入密码"/>
			</div>
		</form>
9.下拉菜单

在使用下拉菜单时必须先引入jQuery和bootstrap的js文件

		<!-- 导入bootstrap的css文库 -->
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<!-- 		导入js的原生文件
 -->		<script src="js/jquery-3.6.0.js" text="text/javascript" charset="UTF-8"></script>
			<!-- 导入bootstrap的js文件 -->
		<script src="bootstrap-3.4.1-dist/js/bootstrap.js" text="text/javascript" charset="UTF-8"></script>

**target="_blank"**新开一个窗口

<!-- 		下拉菜单
		1.使用一个类名为dropdown 或 btn-group 的div包裹整个下拉框：
		<div class="dropdown">
		2.默认向下dropdown ，向上弹起加入. dropup即可
		
		3.使用button作为父菜单 ，使用类名：dropdown-toggle 和自定义data-toggle属性
		
		4.在button中使用font 制作下拉箭头
		
		5.下拉菜单项使用一个ul列表，并且定义一个类名“dropdown-menu”
		
		6.分组分割线 ： <li>添加类名“driver” 来实现添加下拉分割线的功能
		<li class="divider"></li>
		7.分组标题 : li 添加类名 ”dropdown-header“来实现分组功能
		<li class="dropdown-header">---1---</li>
		8.对齐方式：
			1）、dropdown-menu-left 左对齐 默认样式
			2）、dropdown-menu-right 右对齐 
		9.激活状态 active 和 禁用状态 disabled -->
		<li class="active"> <a href="https://www.layui.com/demo/button.html" target="_blank">牛逼</a></li>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				喜欢的频道
<!-- 				设置下拉箭头
 -->				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">---1---</li>
				<li class="active"> <a href="https://www.layui.com/demo/button.html" target="_blank">牛逼</a></li>
				<li class="divider"></li>
				<li class="dropdown-header">---1---</li>
				<li> <a href="https://www.layui.com/demo/button.html" target="_blank">牛逼1</a></li>
				<li> <a href="https://www.layui.com/demo/button.html" target="_blank">牛逼2</a></li>
				
			</ul>
		</div>
10.模态框

1.通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置
data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有
2.id=“identifier”）。 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有
id=“identifier” 的模态框：

打开模态框 ：$('#identifier').modal('show')

关闭模态框 ：$(’#identifier’).modal(‘hide’)

		<h2>创建模态框（Modal）</h2>
		<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
		            </div>
		            <div class="modal-body">在这里添加一些文本</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary">提交更改</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
程序员爱何
关注
Bootstrap从入门到精通（全）
码农研究僧的博客
11-22 6万+
目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式 前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通（全） css属性从入门到精通（全） JavaScript从入门到精通（全） 这篇文章的学习主要通过 2021最新完整版Bootstrap教程（最给力的前端框架）bootstrap框架讲解-快速上手,最适合后端开发人员的bootstrap保姆级使用教程 关于Bootstrap的主要作用 是⼀套现成的 CSS 样
从搬砖工到架构师，Java全栈学习路线总结
zhangxia_的博客
05-07 2万+
Java 全栈开发技术是一种整合多种技术的开发方式，涉及众多领域，如：前端、后端、数据库等。Java 全栈开发技术的全面普及，使得该领域成为了就业和职业发展的焦点。为了快速入门 Java 全栈开发，我们可以从下面的路线开始学习。 Java 全栈开发需要不断地学习和实践，掌握优秀的编程习惯和实现技巧非常重要。在 Java 全栈开发的旅途中，我们需要关注技术的动态发展，随时更新自己的技能和知识体系。
bootstrap4学习路线
SCUhzs
07-28 364
前言：本文主要参考的课程视频资料 Bootstrap4从入门到精通 ----------------------------------正文分割线---------------------------------------------------------- 一、布局 1.1 Bootstrap介绍_栅格系统 1.2 禁用响应式_响应式分界点 二、内容 2.1 排版_代码 2.2 图片_图片框 2.3 表格 三、公共样式 6.边框_浮动 7.颜色_Display显示属性 8.文本处理_垂直对齐
Bootstrap基础6（路径导航）
dibisha5159的博客
05-22 118
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no...
BOOTSTRAP初学者如何学习
weixin_34307464的博客
10-26 145
为什么80%的码农都做不了架构师？>>> ...
Bootstrap的学习
liaowenxiong的博客
12-09 711
文章目录概念入门 概念 一个前端开发的框架，Bootstrap，来自Twitter， 是目前很受欢迎的前端框架。Bootstrap 是基于HTML、 CSS、 JavaScript 的，它简洁灵活，使得Web开发更加快捷。 框架： 一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。 好处： 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2.响应式布局。同一套页面可以兼容不同分辨率的设备。 入门 1.下载 Bootstrap，地址：https:
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
最新发布
lbcbjtlhmjq的博客
05-30 1411
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
入门前端？前端学习路线图汇总.md
10-15
### 入门前端：前端学习路线图汇总 #### 前言 对于许多希望进入前端领域的初学者来说，面对纷繁复杂的技术栈可能会感到迷茫。本文旨在为那些想要入门前端开发的朋友提供一份清晰的学习路线图，帮助大家系统地了解...
Python学习路线（课程大纲+Python视频教程+下载地址）
热门推荐
程序员日常
01-05 16万+
最新Python学习路线+千锋Python课程大纲+Python视频教程+Python学习资料下载地址大合集 目前Python已经成为最受欢迎的程序设计语言之一。Python的设计哲学是“优雅”、“明确”、“简单”。 Python的优点（来自百科） 简单：Python是一种代表简单主义思想的语言。阅读一个良好的Python程序就感觉像是在读英语一样。它使你能够专注于解决问题而不是去搞明白...
如何快速轻松学习bootstrap
weixin_30532759的博客
07-19 247
我以前也是通过看一些视频教程来学的，比如慕课网上的，比如51cto上的那些零基础入门bootstrap什么的，还有一些培训班里流传出来的，感觉晕乎乎的，不知所云。 还是在后面不断使用的过程中慢慢体会到它的价值。相信很多没有什么基础的初学者学习它定会感到无从下手、云里雾里、难以把控。最后实在是看不出它好在哪里，学了也就相当于白学了，也就逐渐的放弃了。 你学不好它是因为对自己要求太完美，同时对它又...
开发人员路线图：Bootstrap 5和Material Design 2.0 UI KIT
02-01
开发人员路线图：Bootstrap 5和Material Design 2.0 UI KIT
bootstrap详细学习课件文档
11-12
bootstrap是由美国twitter公司开发的，目前最受欢迎的前端框架。bootstrap是基于HTML，CSS，JAVASCRIPT的前端框架，简单灵活，可以大大提高web开发效率
BootStrap基础
刘索隆ʕ•ᴥ•ʔ的博客
08-29 363
模板： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述.
Bootstrap框架学习
2023也要一起加油鸭
03-01 660
文章目录1.Bootstrap的概念2.Bootstrap的好处3.快速入门知识讲解4.Bootstrap的响应式布局5.CSS样式和JS插件（具体使用去Bootstrap中文官网查找）5.1 全局CSS样式5.2 组件5.3 轮播图6.Bootstrap练习 1.Bootstrap的概念 一个前端开发框架，Bootstrap 基于 HTML、CSS、JavaScript 的，它简洁灵活，......
跟我一步一步学习bootstrap
zhengun的专栏
05-03 268
关于作者： 郑云飞(天放), 程序员Java weibo：@tianFang blog: zhengyunfei.iteye.com email: zhengyunfei8@gmail.com 学习路线图        bootstrap在网页中使用        bootstrap布局        bootstrap响应式布局       由于工作需要，下班之余，就自...
Bootstrap基础学习
weixin_52031422的博客
07-07 788
这是对Bootstrap基础的学习，其中将会通过实现小案例的形式结合对知识点进行掌握
Bootstrap学习方法及案例分享
guaishushu1ss的博客
08-25 833
前言： 　　本文将分享一下自己学习Bootstrap时的一点经验，希望能对正在开始与Bootstrap作战的小伙伴们一点点帮助，避免一些不必要的曲折。 　　一、官网 　　学习一款框架，最开始，学习途径一定是它的官方网站，几乎每一款框架都有非常详细且清晰的文档，虽然网上关于该框架的学习资源很多，但是也都不是自创的，追其根源，全部都是来自于官网。与其花费动辄十几个小时去看别人的视频，不如自己去官
BootStrap简单学习
秋雨绵绵
03-04 1366
本文是关于BootStrap的简单学习，适合后端开发者查阅。
Bootstrap框架菜鸟入门教程
weixin_30648587的博客
09-16 1146
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 一、栅格系统 ...
java学习路线速成
05-29
以下是Java学习路线速成： 1. 入门：掌握Java基础语法和面向对象编程思想，包括数据类型、运算符、流程控制、类、对象、继承、多态等。 2. 进阶：深入学习Java API，掌握常用类库，如集合框架、IO、多线程等。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值