搜索

#微信小程序开发系列#Bootstrap摘要

志扬工作室

共 7647字，需浏览 16分钟

 ·

2022-04-01 20:37

-Start：关注本公众号后，可直接联系后台获取排版美化的详细文档！

-Hints：本篇文章所编纂的资料均来自网络，特此感谢参与奉献的有关人员。


  • Bootstrap的概念

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的。

 

  • Bootstrap的内容

-基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。

-CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

-组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

-JavaScript 插件：Bootstrap包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

-定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

 

  • Bootstrap的示例

 Bootstrap 实例

 

 

  

 

 

 

 

   

我的第一个 Bootstrap 页面

   

重置窗口大小，查看响应式效果！

 

 

   

     

第一列

     

学技术，从W3Cschool开始！

   

   

     

第二列

     

学技术，从W3Cschool开始！

   

   

     

第三列

       

     

学技术，从W3Cschool开始！

   

 

 

 

  • Bootstrap的安装

预编译的 Bootstrap

c343876285b21bb97b23edfecaf31d87.webp

Css: 样式

Js: 动态效果

Fonts:字体

Bootstrap 源代码

6f72801d555f517f0daa1c0eeb6a1211.webp

less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。

dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。

docs-assets/、examples/和所有的 *.html 文件是 Bootstrap 文档。

 

  • Bootstrap 项目使用html5，兼容浏览器

-为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

-width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为device-width 可以确保它能正确呈现在不同设备上。

-initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

-通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

-

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

.img-responsive {

 display: inline-block;

 height: auto;

 max-width: 100%;

}

-img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

把元素的 display 属性设置为inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

 -Bootstrap 3 使用 body{margin: 0;} 来移除 body 的边距。

请看下面有关 body 的设置：

body {

 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

 font-size: 14px;

 line-height: 1.428571429;

 color: #333333;

 background-color: #ffffff;

}

第一条规则设置 body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif。

第二条规则设置文本的默认字体大小为 14 像素。

第三条规则设置默认的行高度为 1.428571429。

第四条规则设置默认的文本颜色为 #333333。

最后一条规则设置默认的背景颜色为白色。

排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。


  • 避免跨浏览器的不一致

Bootstrap 使用 Normalize来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

 

  • Bootstrap 网格系统

网格系统通过一系列包含内容的行和列来创建页面布局。

 

  • Bootstrap媒体查询

-媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */

/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */

@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */

@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px起） */

@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and(max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and(max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }

 

  • 响应式的列重置

使用 .clearfix class和 响应式实用工具来解决不同设备上的兼容问题

 

  • Bootstrap 排版

-Bootstrap 使用Helvetica Neue、 Helvetica、Arial 和 sans-serif 作为其默认的字体栈。

使用Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。

-标题

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

-内联子标题

如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本

-引导主体副本

为了给段落添加强调文本，则可以添加，这将得到更大更粗、行高更高的文本

-强调

HTML 的默认强调标签（设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。

-缩写

HTML元素提供了用于缩写的标记，比如WWW 或 HTTP。Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。

-地址（Address）

使用

标签，您可以在网页上显示联系信息。由于
默认为 display:block;，您需要使用
标签来为封闭的地址文本添加换行。

-引用（Blockquote）

您可以在任意的 HTML 文本旁使用默认的

。其他选项包括，添加一个 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。

-列表

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含

和
元素。
代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，
是
的描述。您可以使用 class dl-horizontal 把
行中的属于与描述并排显示。

 

  • Bootstrap 允许您以两种方式显示代码：

第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。

第二种是 

 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 
 标签。



  Bootstrap 实例 - 代码
  
  
  



 作为内联元素被包围。

如果需要把代码显示为一个独立的块元素，请使用 
 标签：


  <article>
    <h1>Article Heading</h1>
  </article>


 
  • Bootstrap 表格
标签       描述
  为表格添加基础样式。
表格标题行的容器元素（），用来标识表格列。
表格主体中的表格行的容器元素（）。
一组出现在单行上的表格单元格的容器元素（ 内使用。
 或 ）。
       默认的表格单元格。
       特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 
      关于表格存储内容的描述或总结。
类    描述
.active     对某一特定的行或单元格应用悬停颜色
.success  表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger   表示一个危险的或潜在的负面动作
 
  • Bootstrap 表单布局
-表单布局
Bootstrap 提供了下列类型的表单布局：
垂直表单（默认）
内联表单
水平表单

  • Bootstrap 表单布局
-输入框（Input）
最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
-文本框（Textarea）
当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。
复选框（（Checkbox）和单选框（Radio）
复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
-选择框（Select）
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
使用 
图片
表情
推荐
        
微信小程序开发
四川白米云计算集团股份有限公司
0
【微信小程序】微信小程序定制、小程序商城开发
四川人文在线网络服务有限公司
0
微信小程序开发(生命周期)
全栈开发日记
0
WXapp-typescriptTypeScript 开发微信小程序
使用 TypeScript 开发小程序运行使用微信web开发者工具新建一个小程序项目，项目目录选择d
微信小程序开发外包
有几个微信小程序项目要做，前端交互效果较多，欢迎有丰富的小程序开发或H5前端开发经验的个人团队联系我 ＋微信 afanti
WXapp-typescriptTypeScript 开发微信小程序
使用TypeScript开发小程序运行使用微信web开发者工具新建一个小程序项目，项目目录选择dist目录，该目录是ts源文件编译后存放的目录。开发$ git clone git@git.oschin
在线报名微信小程序系统开发驾校在线报名小程序开发微信小程序开发
佛山市悦阁网络科技有限公司
0
3小时！开发ChatGPT微信小程序
云加社区
0
【程序源代码】微信小程序商城，微信小程序微店
程序源代码
0
小程序开发、游戏开发、App 开发、软件开发微信开发
王经理15105203806
主营项目：
1、APP定制开发IOS/安卓：
商城/多店铺商城APP：生鲜O2O、、婚庆用品商城、综合类多店铺、多城市切换商城等商城APP
运动健康APP：集成运动场馆订票、健康信息跟踪、体育赛事报名、
智...
点赞
    
评论
    
收藏
    
分享
        
手机扫一扫分享
分享
    

        举报