BootStrap学习笔记

最新推荐文章于 2023-01-18 17:41:29 发布
最新推荐文章于 2023-01-18 17:41:29 发布
阅读量256 收藏 2
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37965402/article/details/116807409
版权

学习参考1

学习参考2

学习参考3

定制字体图标

这里写目录标题

1. BootStrap介绍及下载

官网：http://getbootstrap.com/
中文网：http://www.bootcss.com/

  1. 下载： http://v3.bootcss.com/getting-started/

bootstrap-3.4.1-dist：用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。
bootstrap-3.4.1：Bootstrap 源码（本地使用建议）：
Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。

  1. 下载完成后
    拷⻉ dist/css 中的 bootstrap.min.css 到项⽬ css 中
    拷⻉ dist/js 中的 bootstrap.min.js 到项⽬的 js 中
  2. 下载 jquery.js
    http://jquery.com/

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

2.1 布局容器

  1. container：固定宽度并支持响应式布局的容器：两边会有留白
	<div class="container">
		...
	</div>
  1. container-fluid：类似于100%宽度，占据全部视图的容器：两边没有留白
	<div class="container-fluid">
		...
	</div>

2.2 栅格网格系统

  1. Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的增 加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建⻚⾯布局，你的内容就可以放⼊这些创建好的布局中。

  2. ⽹格系统的实现原理⾮常简单，仅仅是通过定义容器⼤⼩，平分12份(也有平分成24份或32份，但12份 是最常⻅的)，再调整内外边距，最后结合媒体查询，就制作出了强⼤的响应式⽹格系统。Bootstrap框架 中的⽹格系统就是将容器平分成12份。
    在这里插入图片描述
    PS：网格系统必须使用到CSS。

  3. BootStrap的栅格系统在多种屏幕设备上的工作
    在这里插入图片描述

  4. container、row 、xs (xsmall phones)，sm (small tablets)，md (middle desktops)，lg (larger desktops) 即: 超⼩屏(⾃动)，⼩屏(750px)，中屏(970px)和⼤屏(1170px)

  5. 数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对⻬⽅式和内距(padding)。

  6. 在⾏(.row)中可以添加列(.column), 只有列（column）才可以作为⾏容器(.row)的直接⼦元素，但列数之 和不能超过平分的总列数，⽐如12。如果⼤于12,则⾃动换到下⼀⾏。

  7. 具体内容应当放置在列容器（column）之内

<!--布局容器-->
		<div class="container">
			<!--行元素-->
			<div class="row">
				<!--列元素：col-xs-数值；col-sm-数值；col-md-数值；col-lg-数值；-->
				<div class="col-md-4">4列</div>	<!--打破了div会另起一行的格式-->
				<div class="col-md-8">8列</div>
			</div>
		</div>

2.2.1 列组合

更改数字来合并（原则：列总和不超过12，大于12，自动切换到下一行），相当于表格的colspan属性。

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

2.2.2 列偏移

如果我们不希望相邻的两个列紧靠在⼀起，但⼜不想使⽤margin或者其他的技术⼿段来。这个时候就 可以使⽤列偏移（offset）功能来实现。
同样的：列与偏移列的总数不能超过12，否则会导致列断行|换行显示。

<div class="container">
    <div class="row">
        <div class="col-md-1">1列</div>
        <div class="col-md-1">2列</div>
        <div class="col-md-1 col-md-offset-8">11列</div> 
        <div class="col-md-1">12列</div>
  </div>
</div>

PS：列偏移与列排序的区别：
列偏移：如果前面的列发生了偏移，则后面的列也相应的发生偏移。
列排序：浮动的效果，当前列向前或向后浮动，其前面或后面的列不会受影响。

2.2.3 列排序

列排序其实就是改变列的⽅向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的⽹格系 统中是通过添加类名 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>

2.2.4 列嵌套

在⼀个列中添加⼀个或者多个⾏ （ 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>

2.2.5 屏幕的自动调整

<div class="row">
	 <div class="col-md-10 col-sm=6">10</div> 
	 <!-- 如果是中等的屏幕就占10列，如果是小屏幕就占6列，系统自动选择-->
	 <div class="col-md-2  col-sm=6">2</div> 
 </div>

3 常用样式

3.1 排版

3.1.1 标题

  1. HTML 中的所有标题标签，

    到

    均可使用（但是BootStrap做了覆盖，使用其在所有浏览器下显示的效果一样）。
  2. 另外，还提供了 .h1 到 .h6类，为的是给内联（inline）属性的文本赋予标题的样式（使非标题元素和标题元素使用同样的样式）。
<div class=“h1”>类标题内容</div>

不需要css，就可以显示h1的效果。

  1. 在标题内还可以包含标签和<.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>

<!--<div ><span class="small">副标题的类表达</span></div>-->

在这里插入图片描述

3.1.2 段落

通过.lead来突出强调内容（其作用是增大字号，加粗文本，而且对行高和margin也做相应的处理）
:小字号
< b > 或 < strong>：加粗
< i>或< em>：斜体

<p class="lead"> 通过.lead来突出<small>强调</small>内容（其<b>作用</b>是：< strong>增大 </strong>字号，< i>加粗</i>文本，< em>而且</em>对行高和margin也做出相应的处理）  </p>

3.1.3 强调

定义了⼀套类名，这⾥称其为强调类名，这些强调类都是通过颜⾊来表示强调，具本说明如下：
.text-muted：提示，使⽤浅灰⾊（#999）
.text-primary：主要，使⽤蓝⾊（#428bca）
.text-success：成功，使⽤浅绿⾊(#3c763d)
.text-info：通知信息，使⽤浅蓝⾊（#31708f）
.text-warning：警告，使⽤⻩⾊（#8a6d3b）
.text-danger：危险，使⽤褐⾊（#a94442）

<div class="text-muted"> 提示 效果</div>
<div class="text-primary"> 主要 效果</div>
<div class="text-success"> 成功 效果</div>
<div class="text-info"> 通知信息 效果</div>
<div class="text-warning"> 警告 效果</div>
<div class="text-danger"> 危险 效果</div>

效果：
在这里插入图片描述

3.1.4 对齐

  1. 在CSS中常常使⽤text-align来实现⽂本的对⻬⻛格的设置。其中主要有四种⻛格：
    （1）左对⻬，取值left ;
    （2）居中对⻬，取值center;
    （3）右对⻬，取值right ;
    （4）两端对⻬，取值justify。
    为了简化操作，⽅便使⽤，Bootstrap通过定义四个类名来控制⽂本的对⻬⻛格：.text-left：左对⻬ .text-center：居中对 ⻬ .text-right：右对⻬ .text-justify：两端对⻬。
<p  class="text-left">我居左 </p>
<p  class="text-center">我居中 </p>
<p  class="text-right">我居右 </p>
<p  class="text-justify">我两端对齐</p>

3.1.5 列表

  1. 去点列表
<ul class="list-unstyled">
	<li>无序项目列表一</li>
	<li>无序项目列表二</li>
</ul>
  1. 内联列表
    把垂直列表换成水平方向列表，而且去掉项目符号（编号），保持水平显示，也可以说内联列表就是为制作水平导航而生。
<ul class="list-inline">
	<li>无序项目列表一</li>
	<li>无序项目列表二</li>
</ul>
  1. 定义列表
    在原有的基础上家里一些样式，使用样式class=“dl-horizontal”制作水平定义列表：当标题宽度超过160px时，将会显示三个省略号。
<dl>
			<dt>HTML</dt>
			<dd>超文本标记语言</dd>
			<dt>CSS</dt>
			<dd>层叠样式表时一种样式表语言</dd>
		</dl>
		<dl class="dl-horizontal">
			<dt>HTML</dt>
			<dd>超文本标记语言</dd>
			<dt>CSS</dt>
			<dd>层叠样式表时一种样式表语言</dd>
		</dl>

在这里插入图片描述

3.1.6 代码

一般在个人博客上使用的较为平凡，用于显示代码的风格。
（1）单行内联代码：< code>< /code>
（2）多行代码块：< pre> < /pre>；多行代码块会保留代码原格式，包括空格和回车。
（3）用户输入代码，如：快捷键：< kbd> < /kbd><p>使用<kbd>Ctrl</kbd>+<kbd>S</kbd>保存内容</p>
在这里插入图片描述
（4）显示HTML代码需要使用字符实体

<code>
	&lt;h1&gt;一级标题&lt;/h1&gt;
</code>

在这里插入图片描述
（5）长度超过指定值，可以添加滚动条

<pre class="pre-scrollable">
			<ol>
				<li>-----------</li>
				<li>-----------</li>
				<li>-----------</li>
				<li>-----------</li>
				<li>-----------</li>
				<li>-----------</li>
			</ol>
		</pre>

在这里插入图片描述

3.1.7 表格

  1. 表格样式
    （1）基础样式
    1）.table：基础样式
    （2）附加样式
    1）.table-striped：斑马线样式
    2）.table-bordered：带边框的表格
    3）.table-hover：鼠标悬停高亮
    4）.table-condensed：紧凑型表格，单元格没内边距或者内边距较其他表格的内边距较小。
  2. tr、th、td样式
    提供了五种不同的类名，每种类名控制了⾏的不同背景颜⾊。
    在这里插入图片描述
<table class="table table-bordered table-hover">
			<tr class="active">
				<th>JavaSE</th>
				<th>数据库</th>
				<th>JavaScript</th>
			</tr>
			<tr class="danger">
				<th>面向对象</th>
				<th>oracle</th>
				<th>json</th>
			</tr>
			<tr class="success">
				<th>数组</th>
				<th>mysql</th>
				<th>ajax</th>
			</tr>
</table>

在这里插入图片描述

3.2 表单

表单主要功能是⽤来与⽤户做交流的⼀个⽹⻚控件，良好的表单设计能够让⽹⻚与⽤户更好的沟通。表单中常⻅的元素主 要包括：⽂本输⼊框、下拉选择框、单选按钮、复选按钮、⽂本域和按钮等。

3.2.1 表单控件

.form-contrlo、.input-lg(较大)、.input-sm(较小)。

  1. 输入框text
    .form-control
    在这里插入图片描述

  2. 下拉选择框select
    （1）单选

<select class="form-control" >
	<option value="">请选择城市</option>
	<option value="">北京</option>
	<option value="">上海</option>
	<option value="">广州</option>
</select>

在这里插入图片描述
（1）多选：
多行选择设置：multiple=“multiple”
按住Ctrl是可以多选的

<select class="form-control" multiple="multiple">
	<option value="">请选择城市</option>
	<option value="">北京</option>
	<option value="">上海</option>
	<option value="">广州</option>
</select>

在这里插入图片描述

  1. 文本域<textarea class="form-control"> </textarea>
  2. 复选框
    垂直显示：.checkbox；水平显示：.checkbox-inline
<div class="row">
			<div class="col-md-3">
				<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">
				<div class="checkbox-inline">
					<label> <input type="checkbox" name="hobby" />唱歌</label>
				</div>
				<div class="checkbox-inline">
					<label> <input type="checkbox" name="hobby" />跳舞</label>
				</div>
			</div>
		</div>

在这里插入图片描述
5. 单选框
垂直显示：.radio；水平显示：.radio-inline

<div class="row">
			<div class="col-md-3">
				<div class="radio">
					<label> <input type="radio" name="sex" />男</label>
				</div>
				<div class="radio">
					<label> <input type="radio" name="sex" />女</label>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3">
				<div class="radio-inline">
					<label> <input type="radio" name="sex" />男</label>
				</div>
				<div class="radio-inline">
					<label> <input type="radio" name="sex" />女</label>
				</div>
			</div>
		</div>

在这里插入图片描述
6. 按钮
（1）使用button实现
基础样式：<button >按钮</button>或者<input type="button"></input>
（class中）附加样式：btn-primary、btn-info、btn-success、btn-warning、btn-danger、btn-link、btn-default。
<button class="btn btn-primary ">按钮</button>
（2）多标签支持
支持使用其他标签转换成按钮标签

<a href="" class="btn btn-warning">a标签</a>
<span class="btn btn-warning">span标签</span>
<div id="" class="btn btn-warning">div标签</div>

在这里插入图片描述
（3）按钮大小

<div id="" class="btn btn-warning btn-xs">div标签</div>
<span class="btn btn-warning btn-sm">span标签</span>
<a href="" class="btn btn-warning ">a标签</a>
<div id="" class="btn btn-warning btn-lg">div标签</div>

在这里插入图片描述
（3）按钮禁用
方法1：在标签中添加disabled属性（真正的禁用，按钮功能不再执行）
⽅法2：在元素标签中添加类名"disabled"（样式上禁用（按钮会出现一个禁用标识），但点击按钮，功能仍然进行）

<button class="btn btn-info" onclick="alert('hello')" disabled="disabled">按钮</button>
<button class="btn btn-info disabled" onclick="alert('hello')" >按钮</button>

在这里插入图片描述

3.2.2 表单布局

  1. 基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式。下⾯列出了创建基本表单的步骤：
    （1）向⽗： 元素添加 role=“form” 。
    （2）把标签和控件放在⼀个带有 class .form-group 的 中。这是获取最佳间距所必需的。
  2. 水平表单
		<form action="#" class="form-horizontal" role="form">
			<h2 align="center">用户信息表</h2>
			<div class="form-group">
				<label for="nname" class="control-label col-md-2">姓名</label>
				<div class="col-md-6">
					<input type="text"  id="nname" class="form-control"placeholder="请输入用户名" />
				</div>
			</div>
			<div  class="form-group">
				<label  for="npwd" class="control-label col-md-2">密码</label>
				<div class="col-md-6">
					<input type="password"  id="npwd" class="form-control" placeholder="请输入用户密码" />
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-2">爱好</label>
				<div class="col-md-6">
					<label class="checkbox-inline col-md-2 ">
						<input type="checkbox"  name="hobby"/>唱歌
					</label>
					<label class="checkbox-inline col-md-2">
						<input type="checkbox"  name="hobby"/>跳舞
					</label>
				</div>
			</div>
			
			<div class="form-group">
				<label for="ncity" class="control-label col-md-2">城市</label>
				<div class="col-md-6">
					<select id="ncity" class="form-control">
						<option >请选择城市</option>
						<option >北京</option>
						<option >上海</option>
						<option >广州</option>
					</select>
				</div>
			</div>
			
			<div class="form-group">
				<label for="remark" for="nhobby" class="control-label col-md-2">简介</label>
				<div class="col-md-6">
					<textarea id="remark" class="form-control"></textarea>
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-md-6 col-md-offset-5" >
					<button class="btn btn-warning">提交</button>
				</div>
			</div>
		</form>

在这里插入图片描述
3. 内联表单

		<form class="form-inline">
			<div class="form-group">
				<label for="nname" class="control-label col-md-2">姓名</label>
				<input type="text"  id="nname" class="form-control"placeholder="请输入用户名" />
			</div>
			<div  class="form-group">
				<label  for="npwd" class="control-label col-md-2">密码</label>
				<input type="password"  id="npwd" class="form-control" placeholder="请输入用户密码" />
			</div>
			<div class="form-group">
				<button class="btn btn-warning">提交</button>
			</div>
		</form>

在这里插入图片描述

3.3 缩略图

缩略图在电商类的⽹站很常⻅，最常⽤的地⽅就是产品列表⻚⾯。缩略图的实现是配合⽹格系统⼀起使⽤。同时还可以让缩略图配合标题、描述内容，按钮等。

<div class="col-md-3">
					<div class="thumbnail">
						<img src="img/1.JPG" alt="..."style="width: 240px;height: 360px;">
						<h3>高圆圆</h3>
						<p>出⽣于北京市，中国内地影视⼥演员、模特。</p>
						<button class="btn btn-default">
                    		<span class="glyphicon glyphicon-heart"></span>喜欢</button>
						<button class="btn btn-info">
                    		<span class="glyphicon glyphicon-pencil"></span>评论
                		</button>
					</div>
				</div>

在这里插入图片描述

3.4 面板

默认的 .panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
.panel-default：默认样式
.panel-heading：⾯板头
.panel-body：⾯板主体内容

		<div class="panel panel-warning">
			<div class="panel-heading">
				你好
			</div>
			<div class="panel-success">
				祖国
			</div>
		</div>
东风难破
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
Bootstrap学习笔记
qq_51861704的博客
05-17 418
1：背景 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如W.
专题5：Bootstrap学习笔记
日月 的专栏
01-17 2464
一、布局： 1.12列栅格系统，支持列偏移             ...         ...     2.划定内容区域                      ...              3.支持流式布局
Bootstrap学习笔记（一）
Mr_欢先生 博客
04-12 567
一.什么是Bootstrap？ Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。——《百度百科》 1.Bootstrap：下载地址2.准备工作1.响应式布局： <meta name="viewport" content="width=device-width,ini
Bootstrap【学习笔记】
weixin_52487106的博客
01-18 342
学习笔记
简约大气的自适应（响应式）时尚网站源码
05-20
这份源码是一款简约大气的自适应（响应式）时尚类网站模板，特别适合初学者和新手小白学习与使用。它以简洁、现代的设计风格为特点，能够根据不同设备的屏幕尺寸自动调整布局，确保在各种平台上都能呈现出优秀的用户体验。注释清晰，适合初学者快速上手，学习并掌握网站前端开发的基本知识和技巧。
Bootstrap
狗凡的博客
10-17 188
Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义...
bootstrap学习笔记
最新发布
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东风难破

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值