Bootstrap笔记1、bootstrap基本模板、CSS全局样式和栅格系统

最新推荐文章于 2024-05-30 15:01:09 发布

欧文Z-phone

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量525

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/Z_phone/article/details/86715042

版权

这篇博客详细介绍了Bootstrap前端框架，包括基本模板的HTML5文档类型定义、字符集设置、移动设备优先原则以及CSS全局样式的布局容器、标题、文本对齐、列表和表格样式。还深入探讨了栅格系统的原理和应用，如列偏移和嵌套。

摘要由CSDN通过智能技术生成

1、什么是bootstrap

主要是前端的框架（HTML、CSS、JS）

响应式布局。（适用于各式浏览器手机等等，根据大小进行缩放）

移动设备优先

要想使用bootstrap，必须要加载 jquery。

解决IE低版本不支持HTML5元素的办法：

 <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

2、bootstrap基本模板

1、HTML5文档类型定义

bootstrap文档基于HTML5。因此要使用HTML5 的文档类型定义（DTD）

<!DOCTYPE html>

2、字符集设置

<meta charset="UTF-8">

3、移动设备优先

<meta name="virport" content="width=device-width,initial-scale=1">

width=device-width：理想视图+

initial-scale=1：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

4、引入CSS和JS文件

<link href="bootstrap/css/bootstrap.min.css&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

欧文Z-phone

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Bootstrap学习笔记之css样式设计(1)

09-02

Bootstrap的CSS样式主要包括全局样式、栅格系统、排版、表单、按钮、图像、自定义排版等模块。在开始使用Bootstrap时，我们需要在HTML文档的头部引入必要的CSS和JS文件，以便应用Bootstrap样式和功能。 1. HTML文档...

写给后台程序员看的Bootstrap开发教程(03)——Bootstrap全局css样式1

谷哥的小弟

07-12

268

Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果.

参与评论您还未登录，请先登录后发表或查看评论

基于Bootstrap的登录&注册模板（html+css）

热门推荐

皮埃尔的博客

01-28

1万+

基于Bootstrap的登录&注册模板（html+css），适合django等框架，可直接修改对接后端。

Bootstrap中CSS通用样式——排版，列表，代码，图片

qq_66198247的博客

10-18

1771

HTML5定义了若干个标签强调的标签，有、、、、、、等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式。(3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem,三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。表示用户要输入的内容。缩略语是指在页面中使用缩写的形式表示，当鼠标指针悬停在缩写词上时会显示全部的内容，HTML5提供的标签用来实现缩略语。

文本和字体样式设置

weixin_30904593的博客

04-09

348

.text-left ：文本左对齐 .text-center：文本居中 .text-right ：文本右对齐 .text-sm-left ：屏幕为"sm"大小时，左对齐 .text-sm-center： . . . .text-justify ：文本自动换行 .text-nowrap：文本不换行 .text-truncate：显示一部分文本，其他的显示省略号 .d-inl...

Bootstrap3基础 bg-danger/info... 辅助类样式背景文本颜色

weixin_33991727的博客

03-17

1232

内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor Visual Studio Code 1.32.1 typesetting Markdown code <!DOCTYPE html> ...

Bootstrap栅格系统学习笔记

09-01

Bootstrap栅格系统的强大之处在于它的灵活性和可扩展性，允许开发者快速创建响应式的页面布局，同时减少编写CSS代码的工作量。通过理解并熟练应用这些基本概念，你可以构建出适应各种设备和视口尺寸的优雅网站。

Bootstrap栅格系统的使用详解

10-19

总结来说，Bootstrap栅格系统简化了响应式Web设计的过程，使得开发人员可以不必关心浏览器兼容性和复杂的CSS样式，从而快速构建出适应不同设备的网页。这套系统不仅提供了简单快速的布局方法，也支持更高级的自定义...

Bootstrap基本样式学习笔记之表单(3)

09-01

在Bootstrap中，表单的基本样式主要依赖于预定义的CSS类。例如，在标题中提到的“样式1”中，我们看到了一个标准的登录界面，其HTML结构如下： ```html 用户名用户名"> 密码密码"> 记住我吗...

bootstrap响应式网页作业ech-1开发笔记

最新发布

06-24

在这个"bootstrap响应式网页作业ech-1开发笔记"中，我们将深入探讨Bootstrap的核心概念、HTML和CSS在构建响应式页面中的应用。首先，Bootstrap的核心在于其栅格系统，这是一个基于12列的网格布局，可以灵活地调整...

Bootstrap入门（三）标签的css样式

weixin_30363981的博客

09-07

380

Bootstrap入门（三）标签的css样式前提：引入css文件，内容放在一个class为container的div中 标签属性 1.“ text-left ”、“ text-right ”、“ text-center ”属性控制标签内容位置 在左...

bootstrap 模板 css样式

zhangquanming123的博客

03-22

337

http://www.bootstrapmb.com/muban/dashuju

Bootstrap简介、模板、CSS样式、表单样式

AuhuAo的博客

04-28

1803

Bootstrap简介什么是Bootstrap？由两个设计师开发，主要用于前端方向（HTML、CSS、JS、PHP）解决IE低版本不支持HTML5元素：根据自己的存放路径修改。为什么使用Bootstrap？入门简单，只要有HTML、CSS、JS基础就可以学习响应式的布局移动设备优先中文网址：http：//v3.bootcss.com/ Bootstrap环境安装...

4、文本对齐

QilanAllen的博客

05-19

702

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：左对齐，取值left 居中对齐，取值center 右对齐，取值right 两端对齐，取值justify 为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格： .text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐具体源码查看bootstrap.css文件第488行~第

web课程设计：bootstrap响应式网页制作模板——红色中国文化主题：大美中国

wx___BJ050106的博客

12-21

1128

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...

bootstrap中文字居左和居右

JEFF_xieyuzhi的博客

03-03

9817

文字居左class=“pull-left” 文字居右class=“pull-right” 文字居左class=“text-left”、文字居右class=“text-right”、文字居中class="text-center"

bootstrap常用知识点整理

娃娃的博客

03-30

835

目录 1.什么是bootstrap？ 2、为什么使用Bootstrap或者Bootstrap有什么样的特点？ Bootstrap环境安装 Bootstrap下载 Bootstrap基本模板 CSS全局样式 1、布局容器类样式：.container 和 .container-fluid 2、标题样式： ~ 3、行内文本样式： 4、文本对齐样式：.text-left、...

CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现

lbcbjtlhmjq的博客

05-30

1345

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法

基于HTML+CSS+JavaScript简洁的响应式个人博客网站bootstrap网页(大学生简单个人静态HTML网页设计作品)

qq_3200628753的博客

12-25

378

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...

深入理解Bootstrap3.0栅格系统：案例解析

"Bootstrap3.0的学习笔记专注于栅格系统，通过详细案例深入解析该系统的工作原理和用法。" Bootstrap3.0的栅格系统是响应式网页设计的关键组件，它允许开发者创建灵活且适应不同设备尺寸的布局。在本篇笔记中，我们...