bootstrap学习总结

小威编程

于 2022-07-26 13:36:07 发布

阅读量770

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap 学习前端

本文链接：https://blog.csdn.net/dawfwafaew/article/details/125911563

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

BootStrap入门

1.主要内容

BootStrap模板

<!DOCTYPE html>
<html lang="en">
	<head>
		<!--设置当前HTML文件的字符编码-->
		
		<!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
		
		<!--声明当前网页在移动端浏览器展示的相关设置-->
		<!-- 
			viewport表示用户是否可以缩放页面
			width指定视区的逻辑宽度
			device-width指定视区宽度应为设备的屏幕宽度
			initial-scale指令用于设置Web页面的初始化缩放比例
			initial-scale-1则将显示未经缩放的Web文档
		 -->
		
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap基本的HTML模板</title>
		<!--引入Bootstrap核心样式表(CSS)文件-->
		<link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
		<!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
		<!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
		<!--[if It IE 9]>
		<script src="html5shiv/html5shiv.min.js"></script>
		<script src="Respond/respond.min.js"></script>
		<![endif]-->
		<!--自己写的CSS样式文件放head最下面-->
	</head>
	<body>
		<div><h1>Hello,world!</h1></div>
		<!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
		<script src="js/jquery.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!--自己写的js文件放在body最下面-->
	</body>
</html>

2.安装和使用

参考API：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

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

// 做一个页面最先要做一个布局

3.1.布局容器

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

// 固定宽度，会有留白

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

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

<div class="container-fluid">
    ...
</div>

3.2.栅格网格系统

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

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。

注意：网格系统必须使用到CSS

container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops），即

超小屏（自动），小屏（750px），中屏（970px）和大屏（1170px）

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

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

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

<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则自动换刀下一行

3.2.2.列偏移

@*列偏移 offset-md-4*使用 offset-md-4* 类可以将列向右侧偏移*@

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

3.2.3.列排序

改变列的方向，就是改变左右浮动

4.排版

4.1标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
@*不管是不是标题加类名h1就可以*@
<div class="h1">你好啊</div>

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

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

    <div class="small">谢谢</div>
    <small>不客气</small>

4.2强调

定义了一套类名，强调类名，强调类都是通过颜色来表示强调

.text-muted：提示，使用浅灰色

.text-primary：主要，使用蓝色

.text-success：成功，使用浅绿色

.text-info：通知信息，使用浅蓝色

.text-warning：警告，使用黄色

.text-danger：危险，使用褐色

  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>

4.3文字对齐方式

.text-left左对齐

.text-right 右对齐

.text-Center居中

.text-justify：两端对齐

4.2.代码

4.3.表格

@*表格*@
@*table-striped 隔行换色*@
@*.table-bordered 类可以为表格添加边框*@
@*table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景*@
@*指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色
.table-primary   蓝色: 指定这是一个重要的操作
.table-success   绿色: 指定这是一个允许执行的操作
.table-danger   红色: 指定这是可以危险的操作
.table-info   浅蓝色: 表示内容已变更
.table-warning   橘色: 表示需要注意的操作
.table-active   灰色: 用于鼠标悬停效果
.table-secondary   灰色: 表示内容不怎么重要
.table-light   浅灰色，可以是表格行的背景
.table-dark   深灰色，可以是表格行的背景*@

 <p>.table 类来设置基础表格的样式:</p>            
  <table class="table table-striped table-bordered table-hover">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>删除</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>删除</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>删除</td>
      </tr>
    </tbody>
  </table>