BootStrap学习笔记——第一天

最新推荐文章于 2022-04-07 09:17:17 发布
最新推荐文章于 2022-04-07 09:17:17 发布
阅读量1.3k 收藏
点赞数
分类专栏： BootStrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43829407/article/details/106890480
版权

BootStrap学习打卡

BootStrap学习笔记—第一天

BootStrap笔记 第一天

BootStrap-Day1 — CSS框架（对css样式的封装）

引言

概念： Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
特点：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
响应式布局：响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

在这里插入图片描述

环境搭建

1.https://v3.bootcss.com/getting-started/#download 下载关于bootstrap的zip包
2.解压缩 并放入项目中
CSS BootStrap的全局CSS样式
Font 提供对应的图标
JS 关于BootStrap的js
3.移动设备优先设置

4.引入BootStrap的CSS样式 ```

全局CSS样式

排版
标题

HTML 中的所有标题标签，

到

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

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading

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

页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
            <p>...</p>
中心内容
通过添加 .lead 类可以让段落突出显示。
<p class="lead">...</p>
高亮
You can use the mark tag to <mark>highlight</mark> text.
被删除的文本
对于被删除的文本使用 <del> 标签
    <del>This line of text is meant to be treated as deleted text.</del>
无用文本
对于没用的文本使用 <s> 标签。
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
额外插入的文本使用 <ins> 标签。
    <ins>This line of text is meant to be treated as an addition to the document.</ins>
着重
通过增加 font-weight 值强调一段文本。
<strong>rendered as bold text</strong>
斜体
用斜体强调一段文本。
<em>rendered as italicized text</em>
对齐
<p class="text-left">Left aligned text.</p>             居左
<p class="text-center">Center aligned text.</p>         局中
<p class="text-right">Right aligned text.</p>           局右
改变大小写
通过这几个类可以改变文本的大小写
<p class="text-lowercase">Lowercased text.</p>        大写转小写
<p class="text-uppercase">Uppercased text.</p>        小写转大写
<p class="text-capitalize">Capitalized text.</p>      首字母大写
基本缩略语
<abbr title="attribute">attr</abbr>  title代表悬停过后展示的内容
无序列表
<ul>
  <li>...</li>
</ul>
有序列表
<ol>
  <li>...</li>
</ol>
内联列表
<ul class="list-inline">
  <li>...</li>
</ul>
描述
带有描述的短语列表
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
水平排列的描述
class="dl-horizontal"
表格
基本实例

<table class="table">
  ...
</table>
条纹状表格
<table class="table table-striped">
  ...
</table>
带边框的表格
<table class="table table-bordered">
  ...
</table>
鼠标悬停
<table class="table table-hover">
  ...
</table>
紧缩表格
<table class="table table-condensed">
  ...
</table>
状态类
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

栅格系统

​ Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
<div class="container-fluid">
</div>
基本实例
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">1</div>
        <div class="col-md-1">2</div>
        <div class="col-md-1">3</div>
        <div class="col-md-1">4</div>
        <div class="col-md-1">5</div>
        <div class="col-md-1">6</div>
        <div class="col-md-1">7</div>
        <div class="col-md-1">8</div>
        <div class="col-md-1">9</div>
        <div class="col-md-1">10</div>
        <div class="col-md-1">11</div>
        <div class="col-md-1">12</div>
    </div>
    <div class="row">
        <div class="col-md-6">6</div>
        <div class="col-md-6">6</div>
    </div>
    <div class="row">
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
    </div>
</div>
列偏移
<div class="container-fluid">
        <div class="row">
             <div class="col-md-4">4</div>
             <div class="col-md-4  col-md-offset-2 ">4</div>
        </div>
      <div class="row">
          <div class="col-md-2 col-md-offset-2">2</div>
          <div class="col-md-5  col-md-offset-3 ">4</div>
      </div>
  </div>
嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
<div class="container-fluid">
    <div class="row">
        <div  class="col-md-6">
                <div class="row">
                     <div class="col-md-6">6</div>
                     <div class="col-md-6">6</div>
                </div>
        </div>
        <div  class="col-md-6">6</div>
    </div>

    <div class="row">
        <div  class="col-md-4">
        </div>
        <div  class="col-md-8">
            <div class="row">
                <div class="col-md-3">6</div>
                <div class="col-md-9">6</div>
            </div>
        </div>
    </div>

</div>

​

表单

基本实例

<form>
    <!--添加对应的表单样式-->
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>                      <!--初始化文本框中的内容-->
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
</form>



##### 水平排列表单

```html
<!--水平排列的表单-->
<form class="form-horizontal">
    <!--相当于row-->
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
</form>
内联表单
<!--水平排列的表单-->
<form class="form-horizontal">
    <!--相当于row-->
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
</form>
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
必须添加类型声明
<input type="text" class="form-control" placeholder="Text input">
<input type="password" class="form-control" placeholder="Text input">
<input type="datetime-local" class="form-control" placeholder="时间">
<input type="date" class="form-control" placeholder="时间">
<input type="number" class="form-control" placeholder="请输入数字">
<input type="email" class="form-control" placeholder="请输入邮箱格式">
<input type="url" class="form-control" placeholder="请输入地址">
<input type="color" class="form-control" placeholder="请选择颜色">
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textarea class="form-control" rows="3"></textarea>
单选框与复选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios"  value="option1" checked>
        男
    </label>
</div>
<div class="radio   disabled">
    <label>
        <input type="radio" name="optionsRadios"  value="option2"  disabled>
        女
    </label>
</div>
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行

<label  class="radio-inline">
        <input type="radio" name="optionsRadios"  value="option1" checked>
        男
    </label>


    <label class="radio-inline">
        <input type="radio" name="optionsRadios"  value="option2"  disabled>
        女
    </label>
下拉列表（select）
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。
  <select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
被禁用的 fieldset
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。
校验状态
bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可
<form class="form-horizontal">
    <!--相当于row-->
    <div class="form-group  has-success">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group has-warning">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
</form>
控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
高度尺寸
调整列尺寸
<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

按钮

可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<!-- 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>
调整按钮大小
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
激活状态
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的
禁用状态
为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

图片

响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
<img src="../images/2.jpg" alt="..." class="img-rounded">
<img src="../images/3.jpg" alt="..." class="img-circle">
<img src="../images/4.jpg" alt="..." class="img-thumbnail">

辅助类

情境文本颜色
<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="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
三角符号
<span class="caret"></span>
weixin_43829407
关注
专栏目录
BOOTSTRAP笔记
m0_52552720的博客
01-23 223
BOOTSTRAP笔记 栅格系统, 2.巨幕组件 Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 主要包含了栅格系统、全局CSS样式、组件和 JavaScript插件， 而 Bootstrap 的所有 JavaScript 插件都是用 jQuery 写的，所以 jQuery 必须在 Bootstrap 之前引入在HTML中，我们用标签引入外部样式(css)。 实例： <link rel="
Bootstrap 笔记
qq_42316056的博客
08-23 294
Bootstrap 小白笔记
BootStrap笔记
weixin_42979539的博客
09-22 160
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式...
bootstrap笔记
L_virus的博客
08-20 515
文章目录Bootstrap 简介Bootstrap 安装与使用Bootstrap 的模板流式布局容器栅格系统简介列偏移列排序列嵌套标题文本列表表格表单 Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的。 Bootstrap 目前的最新版本是 Bootstrap4，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
gengfu_php的博客
10-06 979
1 缩略图缩略图（一）缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。<div class="container"> <div class="row"> <div
Django学习笔记——第四天
lzw2016的博客
05-20 298
第四天 Templates管理 重置后台管理模板 静态文件的使用 修改原有base.html 添加head.html footer.html 总结 第四天 Templates管理 自定义模板位置（在根目录下统一放置模板文件，集中管理） 根目录下新建 templates文件夹，并把原有 ./blog/templates/ 下文件拷贝进来 修改 setti...
JAVA学习笔记第一天——JAVA简介与基础数据类型、运算符
guangjian_的博客
07-07 700
一、JAVA简介 (1)计算机简叙 计算机： 硬件+软件 软件： 操作系统 + 软件 操作系统： 和硬件交互 用户一般在操作系统层面上进行安装额外的软件(office,qq) 常见的操作系统: windows win10 win7 dos unix linux ubuntu centos debian rethat mac os 红旗 麒麟 鸿蒙 微软(个人办公)： win 服务器： unix
Python机器学习笔记——随机森林算法
weixin_30273931的博客
02-25 2486
随机森林算法的理论知识 　　随机森林是一种有监督学习算法，是以决策树为基学习器的集成学习算法。随机森林非常简单，易于实现，计算开销也很小，但是它在分类和回归上表现出非常惊人的性能，因此，随机森林被誉为“代表集成学习技术水平的方法”。 一，随机森林的随机性体现在哪几个方面？ 1，数据集的随机选取 　　从原始的数据集中采取有放回的抽样（bagging），构造子数据集，子数据集的数据量是和原始数...
Kafka——学习笔记
weixin_48626604的博客
04-07 299
Kafka学习笔记 1.Kafka概述 1.1 定义 传统定义：一个分布式的基于发布、订阅模式的消息队列（Message Queue），主要应用于大数据实时处理领域。 发布、订阅：消息的发布者不会将消息直接发送给特定的订阅者，而是将发布的消息分为不同的类型，订阅者只接收感兴趣的消息 最新定义：一个开源的分布式事件流平台（Event Streaming Platform），被千家公司用于高性能数据管道、流分析、数据集成和关键任务应用。 1.2 传统消息队列的应用场景 传统的消息队列的主要应用场景包括：缓
Bootstrap笔记
桐匠的博客
04-05 359
bootstrap笔记
bootstrap学习笔记
最新发布
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值