【黑马Bootstrap笔记】Bootstrap快速入门

苿萊

于 2024-08-24 04:15:26 发布

阅读量17

点赞数

文章标签： bootstrap 笔记前端 html css

Bootstrap:前端开发框架

框架：一套半成品软件，直接拿来用

响应式布局：同一套页面可以兼容不同分辨率的设备

下载/引入：vscode搜索bootstrap插件安装

响应式布局

依赖于栅格系统，将一行平均12个格子，可以指定元素占几个格子

例：<div>pc显示4个格子，手机占12个格子

定义容器

container：固定宽度有留白

container-fluid：:100宽度

定义行row 定义元素col-设备代号-格子数目

设备代号：xs超小, sm小屏幕: md:中等屏幕lg:大屏幕

*一行格子超过12，则自动换行

*向上兼容：适用于大于等于屏幕大小；如果设备宽度小于设备代号的最小值，默认一个元素占满一整行

CSS样式：

按钮

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