Bootstrap教程

Bootstrap教程

一、简介

概述

Bootstrap 是一套现成的 CSS 样式集合（做得还是很友好的）。是两个推特的员工干出来的。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。2011年，twitter 的"一小撮"工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集 -- BootStrap。Bootstrap 由 MARK OTTO 和 Jacob Thornton 所设计和建立，在 github上开源之后，迅速成为该站上最多人 watch&fork 的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap 建设的网站：界面清新、简洁;要素排版利落大方。Bootstrap特别适合那种没有设计师的团队（甚至说没有前端的团队），可以快速的出一个网页。

特点

  1. 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。
  2. 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设
    计，12列格网，样式向导文档。
  3. 自定义 JQuery 插件，完整的类库，bootstrap3 基于Less，bootstrap4 基于 Sass 的 CSS 预处理
    技术
  4. Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，
    给用户提供更好的视觉使用体验。
  5. 丰富的组件

二、下载与使用

下载地址： http://getbootstrap.com/
引入文件：

  • 拷贝 jquery.js到项目 js 中
  • 拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中
  • 拷贝 dist/js 中的 bootstrap.min.js 到项目的 js 中

在HTML中的模板为：

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

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

布局容器：

  • .container 类：用于固定宽度并支持响应式布局的容器。
  • .container-fluid类：用于100% 宽度，占据全部视口（viewport）的容器

栅格网格系统

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

注意：列总和数不能超12，大于12，则自动换到下一行。

四、栅格参数

超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px (一个列的每边分别 15px） 30px（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes 
	//栅格基本结构
	<div class="container">
	   <div class="row">
	      <div class="col-*-*"></div>
	      <div class="col-*-*"></div>      
	   </div>
	   <div class="row">...</div>
	</div>
	<div class="container">....

五、列偏移

语法：在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)

实例：

	<div class="container"> 
		<div class="row"> 
			<div class="col-md-1">居第1列</div> 
			<div class="col-md-1">居第2列</div> 
			//向右偏移8个格子
			<div class="col-md-1 col-md-offset-8">居第11列</div> 
			<div class="col-md-1">居第12列</div> 
		</div> 
	</div>

六、列排序

语法：

  • 添加类名 col-md-push-* (其中星号代表移动的列组合数）
  • 添加类名 col-md-pull-* (其中星号代表移动的列组合数）

注意：pull往左、push往右

实例：

	<div class="container"> 
		<div class="row"> 
			<div class="col-md-1 col-md-push-10">1列</div> 
			<div class="col-md-1 col-md-pull-1">1列</div> 
		</div> 
	</div>

七、列嵌套

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

实例：

	<div class="container"> 
		<div class="row"> 
			<div class="col-md-2"> 我的里面嵌套了一个网格 
				<div class="row"> 
					<div class="col-md-9">9</div> 
					<div class="col-md-3">3</div> 
				</div> 
			</div>
			<div class="col-md-10">我的里面嵌套了一个网格 
				<div class="row"> 
					<div class="col-md-10">10</div> 
					<div class="col-md-2">2</div> 
				</div> 
			</div> 
		</div> 
	</div>

八、表格

在使用Bootstrap的表格过程中，只需要 添加对应的类名就可以得到不同的表格风格。

基础样式：

  • table：基础表格

附加样式：

  • table-striped：斑马线表格
  • table-bordered：带边框的表格
  • table-hover：鼠标悬停高亮的表格
  • table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

针对tr、th、td样式 提供了五种不同的类名，每种类名控制了行的不同背景颜色

类 描述 实例
.active 将悬停的颜色应用在行或者单元格上 #f5f5f5
.success 表示成功的操作 #dff0d8
.info 表示信息变化的操作 #d9edf7
.warning 表示一个警告的操作 #fcf8e3
.danger 表示一个危险的操作 #f2dede

实例：

	<table class="table table-bordered table-hover">
		<tr class="active"> 
			<th>JavaSE</th> 
			<th>数据库</th> 
			<th>JavaScript</th> 
		</tr> 
		<tr class="danger"> 
			<td>面向对象</td> 
			<td>oracle</td>
			<td>json</td> 
		</tr> 
		<tr class="success"> 
			<td>数组</td> 
			<td>mysql</td> 
			<td>ajax</td> 
		</tr> 
	</table>

九、表单

表单中常见的元素主 要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

文本输入框

表单控件： .form-control .input-lg（较大） .input-sm（较小）

	<div class="col-sm-3"> 
		<input type="text" name="" id="" class="form-control" /> 
		<input type="text" name="" id="" class="form-control input-lg" /> 
		<input type="text" name="" id="" class="form-control input-sm" /> 
	</div>

下拉选择框

多行选择设置：multiple="multiple"

	<div class="col-sm-3"> 
		<select class="form-control"> 
			<option>北京</option> 
			<option>上海</option> 
			<option>深圳</option> 
		</select> 
		<select class="form-control" multiple="multiple"> 
			<option>北京</option> 
			<option>上海</option> 
			<option>深圳</option> 
		</select> 
	</div>

单选按钮

  • 垂直显示： .radio

  • 水平显示： .radio-inline

      <!-- 垂直显示 --> 
  <div>
  	<div class="radio"> 
  		<label><input type="radio" >男</label> 
  	</div> 
  	<div class="radio"> 
  		<label><input type="radio" >女</label> 
  	</div> 
  </div> 
  <!-- 水平显示 --> 
  <div>
  	<label class="radio-inline"> 
  		<input type="radio" >男 
  	</label> 
  	<label class="radio-inline"> 
  		<input type="radio" >女 
  	</label> 
  </div>

复选按钮

  • 垂直显示： .checkbox

  • 水平显示： .checkbox-inline

      <!-- 垂直显示 --> 
  <div>
  	<div class="checkbox"> 
  		<label>
  			<input type="checkbox" >游戏
  		</label> 
  	</div> 
  	<div class="checkbox">
  		<label>
  			<input type="checkbox" >学习
  		</label> 
  	</div> 
  </div> 
  <!-- 水平显示 --> 
  <div>
  	<label class="checkbox-inline"> 
  		<input type="checkbox" >游戏 
  	</label> 
  	<label class="checkbox-inline"> 
  		<input type="checkbox" >学习 
  	</label> 
  </div>

按钮

  • 基础样式：.btn

  • 附加样式：.btn-primary .btn-info .btn-success .btn-warning .btn-danger .btn-link .btn-default

  • 按钮禁用：.disabled

  • 按钮大小：.btn-lg、.btn-sm 或 .btn-xs

      <button class="btn">基础按钮</button> 
  <button class="btn btn-danger">按钮</button> 
  <button class="btn btn-primary">按钮</button> 
  <button class="btn btn-info">按钮</button> 
  <button class="btn btn-success">按钮</button> 
  <button class="btn btn-default">按钮</button> 
  <button class="btn btn-warning">按钮</button> 
  <button class="btn btn-link">按钮</button>

十、表单布局

Bootstrap 提供了下列类型的表单布局：

  • 垂直表单（默认）
  • 内联表单
  • 水平表单

垂直表单

创建基本表单的步骤：

  1. 向父<form>元素添加 role="form"。
  2. 把标签和控件放在一个带有 class .form-group 的<div>中。这是获取最佳间距所必需的。
  3. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

实例：

	<form role="form">
	  <div class="form-group">
	    <label for="name">名称</label>
	    <input type="text" class="form-control" id="name" placeholder="请输入名称">
	  </div>
	  <div class="form-group">
	    <label for="inputfile">文件输入</label>
	    <input type="file" id="inputfile">
	    <p class="help-block">这里是块级帮助文本的实例。</p>
	  </div>
	  <div class="checkbox">
	    <label>
	      <input type="checkbox">请打勾
	    </label>
	  </div>
	  <button type="submit" class="btn btn-default">提交</button>
	</form>

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向<form> 标签添加class .form-inline。

	<form class="form-inline" role="form">
	  <div class="form-group">
	    <label class="sr-only" for="name">名称</label>
	    <input type="text" class="form-control" id="name" placeholder="请输入名称">
	  </div>
	  <div class="form-group">
	    <label class="sr-only" for="inputfile">文件输入</label>
	    <input type="file" id="inputfile">
	  </div>
	  <div class="checkbox">
	    <label>
	      <input type="checkbox">请打勾
	    </label>
	  </div>
	  <button type="submit" class="btn btn-default">提交</button>
	</form>

水平表单

如需创建一个水平布局的表单，请按下面的几个步骤进行：

  1. 向父 <form> 元素添加 class .form-horizontal。

  2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。

  3. 向标签添加 class .control-label。

     <form class="form-horizontal" role="form">
   <div class="form-group">
     <label for="firstname" class="col-sm-2 control-label">名字</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
     </div>
   </div>
   <div class="form-group">
     <label for="lastname" class="col-sm-2 control-label">姓</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
     </div>
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
       <div class="checkbox">
         <label>
           <input type="checkbox">请记住我
         </label>
       </div>
     </div>
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
       <button type="submit" class="btn btn-default">登录</button>
     </div>
   </div>
 </form>

十一、布局组件

图标可查阅阿里巴巴矢量图库：https://www.iconfont.cn/

注：其余组件可参照官方文档

十二、插件

Bootstrap 自带 12 种 jQuery 插件，扩展了功能。所有的插件依赖于 jQuery，必须在插件文件之前引用 jQuery。
注：需要使用插件时查阅文档即可很快实现

posted @   Destiny!  阅读(34)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示