Bootstrap学习 (一)

夜至江南

已于 2022-04-27 17:27:35 修改

阅读量274

点赞数 1

文章标签： bootstrap html 前端

于 2022-02-03 18:50:31 首次发布

本文链接：https://blog.csdn.net/ljlxwc/article/details/122738461

版权

Bootstrap学习（一）

准备

1.需要下载的资源

HBuilder下载链接: HBuilder.
BootStrap下载链接: BootStrap.
jQuery-3.4.1下载链接: jQuery-3.4.1.网盘密码：echo

2.参考资源

菜鸟教程链接: 菜鸟教程Bootstrap.
Bootstrap视频链接: Bootstrap.
Bootstrap API: bootcss.
Bootstrap缩略图字体图标链接: Bootstrap字体图标.

1. HBuilder快捷键设置

[
	//重复插入选区或当前行（备份用于没有insert键的键盘）
	{
   "key":"ctrl+shift+r","command":"editor.action.duplicate"},
	
	//删除行
	{
   "key":"ctrl+d","command":"editor.action.deleteLines","override":true},
	
	//重命名文件（焦点在项目管理器中）
	{
   
		"key": "f2",
		"command": "renameFile"
	},
	//剪切文件（焦点在项目管理器中）
	{
   
		"key": "ctrl+x",
		"command": "filesExplorer.cut"
	},
	//复制文件（焦点在项目管理器中）
	{
   
		"key": "ctrl+c",
		"command": "filesExplorer.copy"
	},
	//粘贴文件（焦点在项目管理器中）
	{
   
		"key": "ctrl+v",
		"command": "filesExplorer.paste"
	},
	//复制
	{
   
		"key": "ctrl+c",
		"command": "editor.action.clipboardCopyAction"
	},
	//复制文件路径
	{
   
		"key": "ctrl+shift+alt+c",
		"command": "editor.action.clipboardCopyPathAction"
	},
	//剪切
	{
   
		"key": "ctrl+x",
		"command": "editor.action.clipboardCutAction"
	},
	//粘贴
	{
   
		"key": "ctrl+v",
		"command": "editor.action.clipboardPasteAction"
	},
	//撤销
	{
   
		"key": "ctrl+z",
		"command": "undo"
	},
	//重做
	{
   
		"key": "ctrl+y",
		"command": "redo"
	},
	{
   
		"key": "ctrl+shift+z",
		"command": "redo"
	},
	//关闭当前标签卡
	{
   
		"key": "ctrl+f4",
		"command": "workbench.action.closeActiveEditor"
	},
	//关闭所有标签卡
	{
   
		"key": "ctrl+shift+f4",
		"command": "workbench.action.closeAllEditors"
	},
	//新建
	{
   
		"key": "ctrl+n",
		"command": "workbench.action.menu.new"
	},
	//打开外部文件
	{
   
		"key": "ctrl+o",
		"command": "workbench.action.files.openFile"
	},
	//保存
	{
   
		"key": "ctrl+s",
		"command": "-workbench.action.files.save"
	},
	//全部保存
	{
   
		"key": "ctrl+shift+s",
		"command": "workbench.action.files.saveAll"
	,"override":true},
	//向下插入行
	{
   
		"key": "ctrl+enter",
		"command": "editor.action.insertLineAfter"
	},
	//向上插入行
	{
   
		"key": "ctrl+shift+enter",
		"command": "editor.action.insertLineBefore"
	},
	//上移一行
	{
   
		"key": "ctrl+up",
		"command": "editor.action.moveLinesUpAction"
	},
	//下移一行
	{
   
		"key": "ctrl+down",
		"command": "editor.action.moveLinesDownAction"
	},
	//注释/反注释
	{
   
		"key": "ctrl+/",
		"command": "editor.action.commentLine"
	},
	//块注释
	{
   
		"key": "ctrl+shift+/",
		"command": "editor.action.blockCommentLine"
	},
	//格式化
	{
   
		"key": "shift+alt+f",
		"command": "editor.action.format",
		"override": true
	},
	//注释/反注释
	{
   
		"key": "ctrl+/",
		"command": "editor.action.commentLine"
	},
	//块注释
	{
   
		"key": "ctrl+shift+/",
		"command": "editor.action.blockCommentLine"
	},
	//运行
	{
   
		"key": "ctrl+r",
		"command": "app.action.rundevice"
	},
	//重新运行
	{
   
		"key": "ctrl+f5",
		"command": "workbench.action.debug.restart",
		"when": "isDebugConsoleViewVisible"
	},
	//停止运行
	{
   
		"key": "ctrl+shift+f5",
		"command": "workbench.action.debug.stop",
		"when": "isRunning"
	}, //光标后退
	{
   
		"key": "ctrl+q",
		"command": "workbench.action.navigateBack",
		"override": true
	},
	//光标前进
	{
   
		"key": "alt+right",
		"command": "workbench.action.navigateForward"
	}
]

2. Bootstrap的使用

2.1 01-BootStrap的页面模板代码

		viewport表示用户数是否可以缩放页面；
		width 指定书取得逻辑宽度
		device-width指示视区宽度应为设备的而屏幕宽度；
		ubutuak-scal指令用于设置微博页面的初始缩放比例
		initial-scale=1 则将显示未经缩放的Web文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<!--
			viewport表示用户数是否可以缩放页面；
			width 指定书取得逻辑宽度
			device-width指示视区宽度应为设备的而屏幕宽度；
			ubutuak-scal指令用于设置微博页面的初始缩放比例
			initial-scale=1 则将显示未经缩放的Web文档 -->
			
		<meta name="viewport" content="width=device-width,initial-scale=1"/>	
		<title>Bootstrap的HTML标标准模板</title>
		<!-- 载入Bootstrap 的css -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<h1>Hello,World!</h1>
		
		
		<!-- 如果要使用Bootstrapde js插件，必须先调入jQuery,因为bootstrap是依赖于jQuery的 -->
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

注意：
目前不使用jquery的插件可以不引入js文件，这里是为了保证模板的完整性

2.2 参考API

Bootstrap API: bootcss.

3. 布局容器和栅格网格系统

3.1布局容器

1、 .container类用于固定宽度并支持响应式布局

<div class="container">
	...
<div>

2、.container-fluid类用于100%宽度，占据全部视口（viewport）的容器

<div class="container">
	...
<div>

3.1.1 02-布局容器代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局容器</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 
			布局容器
				1、 .container类用于固定宽度并支持响应式布局，即不占据100
				<div class="container"><div>
				2、.container-fluid类用于100%宽度，占据全部视口（viewport）的容器
				<div class="container"><div>
		 -->
		 
<!-- 		<div class="container" style="background-color: thistle;height: 500px;">  
			.container类用于固定宽度并支持响应式布局
		<div> -->
			
		<div class="container-fluid" style="background-color: thistle;height: 500px;">
			.container-fluid类用于100%宽度，占据全部视口（viewport）的容器
		</div>
	</body>
</html>

3.2 栅格网格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
栅格网格布局

	container、row、xs (xsmall phones),sm (small tablets)，md (middle desktops),Ig (larger desktops)
即:超小屏(自动)，小屏(750px)，中屏(970px)和大屏(1170px)

	数据行(.row)必须包含在容器(.container)中，以便为其赋予合适的对齐方式和内距(padding)。

	在行(.row)中可以添加冽(.column),只有列(column)才可以作为行容器,(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。
如果大于12,则自动换到下一行。

	具体内容应当放置在列容器(column）之内

<div class="container">
	<div class="row">
		<div class="col-md-4" >4列</div>
		<div class="col-md-8" >8列</div>
	</div>
</div>

栅格参数

3.2.1列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12，则自动换到下一行。）。有点类似与表格的colspan属性

			<div class="row">
				<div class="col-md-4" style="background-color: #5CB85C;">1</div>
				<div class="col-md-4" style="background-color: #0000ff;">1</div>
				<div class="col-md-4" style="background-color: #ff5500;">1</div>
			</div>

3.2.2 列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset)功能来实现。
使用列偏移也非常简单，只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加"col-md-offset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。

			<div class="row">
				<div class="col-md-1" style="background-color: #5CB85C;">1</div>
				<div class="col-md-1 col-md-offset-1" style="background-color: #ffff00;">1</div>
				<div class="col-md-1" style="background-color: #ff5500;">1</div>
				<div class="col-md-1" style="background-color: #0000ff;">1</div>
			</div>

3.2.3 列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-和col-md-pull-(其中星号代表移动的列组合数)。往前pull，往后push。

			<!-- 列排序 -->
			<div class="row">
				<div class="col-md-1" style="background-color: #5CB85C;">1</div>
				<div class="col-md-1 col-md-push-10" style="background-color: #ffff00;">1</div>
				<div class="col-md-1 col-md-pull-1" style="background-color: #ff5500;">1</div>
				<div class="col-md-1" style="background-color: #0000ff;">1</div>
			</div>

3.2.4 列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列。

			<div class="row">
				<div class="col-md-6" style="background-color: #ff55ff;">
					<div class="row">
						<div class="col-md-1" style="background-color: #46B8DA;">1</div>
						<div class="col-md-6" style="background-color: #55ffff;">9</div>	
					</div>
				</div>
			<div class="col-md-6" style="background-color: #ff3d40;">		
				6
			</div>

4. 常用样式

4.1 排版

4.1.1 标题

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。
为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题<smal1></sma71>或使用.small

<h1>标题1 <small>副标题

最低0.47元/天解锁文章

夜至江南

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习 (一)

Bootstrap学习（一）需要下载的资源1. HBuilder快捷键设置2. Bootstrap的使用2.1 01-BootStrap的页面模板代码2.2 参考API3. 布局容器和栅格网格系统3.1布局容器3.1.1 02-布局容器代码3.2 栅格网格系统栅格参数3.2.2 列偏移3.2.3 列排序3.2.4 列嵌套4. 常用样式4.1 排版4.1.1 标题需要下载的资源HBuilder下载链接: HBuilder.BootStrap下载链接: BootStrap.jQuery-3.4.1下
复制链接

扫一扫