首页 > 其他分享 >Bootstrap 笔记

Bootstrap 笔记

时间:2022-09-26 00:24:41浏览次数:53  
标签:Bootstrap 元素 笔记 按钮 xs 屏幕 class

Bootstrap

Bootstrap 是预编写的 CSS 和 JavaScript 代码段(chunk)的集合。

引入

任何 Web 应用,都可以通过添加如下代码到 HTML 的 head 标签中来引入 Bootstrap 。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container-fluid">
  <!-- something -->
</div>

其中 rel 表示该 link 用于样式表,href 表明 Bootstrap 的地址。

或者可以把 Bootstrap 作为 JavaScript 库引入,在 body 标签底部放入 script 标签。

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

其中 src 表示 Bootstrap 的地址。

Fluid

Bootstrap 会根据屏幕大小来动态调整 HTML 元素的大小————因此称为 Responsive Design(响应式设计)。

响应式设计 Responsive

现在通过 Bootstrap,只需要为 image 标签上设置 class 属性为 img-responsive , 就可以让它完美地适应页面的宽度了。

<img class="img-responsive" src="">

文本

居中

只需要将元素的 class 属性设置为 text-center 就可以实现。

<h2 class="text-center">CatPhotoApp</h2>

颜色

使用 text-XX 来表示文本颜色,其中 XX 和下列按钮颜色,相同.

// Primary // blue
// Secondary // grey
// Success // green
// Danger // red
// Warning // yellow
// Info // skyblue
// Light // whie
// Dark // black
// Link // anchor

按钮

Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。

<button class="btn btn-default">Like</button> // white color

块级元素按钮

通过为按钮添加 class 属性 btn-block 使其成为块级元素,按钮会伸展并填满页面的整个水平空间,后续的元素会流到这个块级元素的下方,即 "另起一行"。

  <button class="btn btn-default btn-block">Like</button>

按钮不同主题

btn-primary class 的颜色是应用的主要颜色。 这样 “突出显示” 是引导用户按部就班进行操作的有效办法。primary 被称为 modifier 修改器,因为这部分是可以改动的。

修改器改变了组件的视觉样式。

  <button class="btn btn-primary btn-block">Like</button>
// blue color

可选操作样式

Bootstrap 有着丰富的预定义按钮颜色。 浅蓝色的 btn-info class 通常用在备选操作上。

  <button class="btn btn-info btn-block">Info</button>
// 浅蓝

危险

红色 btn-danger class 用来提醒用户此行为具有破坏性

<button class="btn btn-danger btn-block">Delete</button>

栅格系统

Bootstrap 经常使用 container 作为栅格系统的父/根元素。

Bootstrap 具有一套 12 列的响应式栅格系统,可以轻松的将多个元素放入一行并指定它们的相对宽度。 Bootstrap 的大部分 class 属性都可以应用在 div 元素上。

Bootstrap 的列宽取决于用户的屏幕宽度。 比如,手机有着窄屏幕而笔记本电脑有者更大的屏幕.

就拿 Bootstrap 的 col-md-* class 来说。 在这里, md 表示 medium (中等的), 而 * 是一个数字,说明了这个元素占有多少个列宽度。 这个例子就是指定了中等大小屏幕(例如笔记本电脑)下元素所占的列宽度。

使用 col-xs-* , 其中 xs 是 extra small 的缩写 (比如窄屏手机屏幕), * 是填写的数字,代表一行中的元素该占多少列宽。

断点,类前缀和维度对应:

  • Extra small - xs - < 576px , 该项为默认值,因为 Bootstrap 是 mobile-first 的。
  • Small - sm - >= 576px
  • Medium - md - >= 768px
  • Large - lg - >= 992px
  • Extra large - xl - >=1200px
  • Extra extra large - xxl - >= 1400px
<div class="row">
    <div class="col-xs-4">
  <button class="btn btn-block btn-primary">Like</button>
  </div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-info">Info</button></div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-danger">Delete</button></div>
  </div>

行内元素

使用 span 标签来创建行内元素。 可以把不同的元素放在同一行,甚至能为一行的不同部分指定不同样式。

<p>Top 3 things cats <span class="text-danger">hate:</span></p>

Font-Awesome

Font Awesome 是一个非常便利的图标库。 通过 webfont 或矢量图的方式来使用这些图标。 这些图标就和字体一样, 不仅能通过像素单位指定它们的大小,它们也同样会继承父级 HTML 元素的字号。

引入:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

i 元素原本是用来表示斜体文字内容的;不过现在,用它来表示图标也很常见。 只需要为 i 元素添加相应的 class 就可以让它展示图标,比如:

<i class="fas fa-info-circle"></i>
<i class="fas fa-thumbs-up"></i> 
<i class="fas fa-trash"></i></i>

表单

单选按钮

Bootstrap 的 col-xs-* class 也可以用在 form 元素上! 这样就可以在不关心屏幕大小的情况下,将的单选按钮均匀的平铺在页面上。

<div class="row">
<div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Loving</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Lazy</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Crazy</label></div>
    </div>

复选框

Bootstrap 的 col-xs-* 可应用于所有的 form 元素上,包括复选框! 这样就可以不必关注屏幕大小,均匀地把复选框放在页面上了。

<div class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>

输入框

可以在 submit button 元素内加上 <i class="fa fa-paper-plane"></i>,来添加 Font Awesome 的 fa-paper-plane 图标。

所有文本输入类的元素如 <input><textarea><select> 只要设置 .form-control class 就会占满100%的宽度。

<input class="form-control">

标题

<h3 class="text-primary text-center">jQuery Playground</h3>

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

Wells

Bootstrap 有一个叫作 well 的 class,作用是使界面更具层次感。

<div class="well">
  </div>

记住,可以这样给一个元素设置 id:

<div class="well" id="center-well">

给左边的块设置 id 为 left-well。 给右边的块设置 id 为 right-well

标签:Bootstrap,元素,笔记,按钮,xs,屏幕,class
From: https://www.cnblogs.com/risejl/p/16729487.html

相关文章

  • 傅里叶变换学习笔记
    教材信号与系统.AlanV.Oppenheim.第二版.西安交通大学出版社.1998博文傅里叶分析之掐死教程@知乎.韩昊视频形象展示傅里叶变换@3Blue1Brown......
  • React 入门学习笔记
    npxcreate-react-appdemo创建reactdemo,此命令行不需要提前安装create-react-app脚手架,创建demo后就会删除了vue微信小程序都是MVVM框架react是MVC框架jsx......
  • 接口测试学习笔记一
    接口测试理论什么是接口接口:是指系统或组件之间的交互点,通过这些交互点可以实现数据的交互(数据交互的通道)接口的类型接口分为系统之间的接口和程序内部的接口系......
  • 第四周学习笔记
    第7章文件操作——教材知识点归纳7.1文件操作级别(1)硬件级别:fdisk:讲盘进行分区mfks:格式化磁盘分区fsck:检查和维修系统2)操作系统内核中的文件系统函数:其中前缀k表示内......
  • 笔记本
    笔记本本隐私政策更新时间:2022年8月生效时间:2021年8月广州菁宏信息科技有限公司非常注重保护用户(“您”)的个人信息及隐私,我们深知个人信息对您的重要性,并将按照法律法规要......
  • 《Unix/Linux系统编程》第四周学习笔记
    《Unix/Linux系统编程》第四周学习笔记文件操作(第7章)文件操作级别硬件级别:硬件级别的文件操作包括:`fdisk`:将硬件、U盘或SDC盘分区。`mkfs`:格式化磁盘分区,为系统做好......
  • 【Coel.学习笔记】特殊的图 - 仙人掌与圆方树
    你是什么仙人?引入仙人掌是一种特殊的无向图,它的任意一条边至多只出现在一条简单回路(每个点只出现一次的回路是简单回路,特殊地,自环不算简单回路)。这里借用一下[SHOI2006......
  • 《JavaScript高级程序设计》Chapter03学习笔记
    Chapter03JavaScriptLanguageSyntax类C区分大小写,标识符可以字母、下划线(_)、美元符号($)开头语句以分号(;)结尾:虽然不加分号也是被允许的,但会导致性能的降......
  • 第七、八章学习笔记
    第七章   文件操作第七章的主要内容是文件操作,主要包括以下几个方面:文件操作级别文件I/O操作低级别文件操作EXT2文件系统简介一、知识点归纳以及自己最有收获......
  • 第七、八章笔记
    ......