bootstrap学习之基础

最新推荐文章于 2024-07-21 19:13:42 发布
最新推荐文章于 2024-07-21 19:13:42 发布
阅读量362 收藏
点赞数 1
分类专栏： bootstrap 文章标签： bootstrap 标签 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37983376/article/details/72876346
版权

1.下载最新bootstrap

地址：http://download.csdn.net/detail/m0_37983376/9860885

2.解压到当前项目并导入相关文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

3.为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

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

4.布局容器

<div class="container">
  ...
</div>

如果需要铺面，class修改为container-fluid

5栅格系统


6.排版

h1->h6 字体大小从36px到12px

7.其他标签

  • <small>标签，副标题
  • <del>，<s>删除线
  • lead，<strong> 突出重点
  • <mark>是内容高亮显示
  • <ins><u>下划线
  • <em>倾斜

淘技术
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap入门教程
专治八阿哥的孟老师
03-31 6355
bootstrap简介：​ bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。​ bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。boostrap特点​ 1 ) 移动设备优先：自 bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：​​ 2 ) 所有的主流浏览器都支持 bootstrap。​​ 3 ) 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
Bootstrap教程
xss125的博客
06-25 1510
提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
Bootstrap 入门
我的的博客哦
05-08 2887
🔰框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。🔰前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。🔰Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。
Estimation with Bootstrap
u011868279的博客
07-05 407
Estimation with Bootstrap
每周一书-《Bootstrap基础教程》
weixin_33790053的博客
08-16 386
首先说明，本周活动有效时间为8月15日到21日。本周为大家送出的书是有电子工业出版，贺臣/陈鹏编著的《Bootsrap基础教程》，为前端入门必读书籍。 下面是从书中摘录的内容。 “ Bootstrap 讨论 现今，移动互联网已经成为热门话题之一。近年来 HTML 5 发展迅猛，各大浏览器都 开始纷纷支持 HTML 5 的标准规范。手机端的浏览器对 HTML 5 以及 CSS 3 有...
bootstrap基础
weixin_44708911的博客
11-12 391
bootstrap基础： bootstrap基于jQuery的，所以在使用js时，需要先引入jQuery.js文件。 很多框架实现的内容都是差不多的，不过有的实现的功能和特性有一点区别，没有必要全部学完，最好有针对性的学习，先打牢基础在观察主要的技术栈。 先下载bootstrap(内容非常小的) 可以在中文网中学习less教程。 另外它还有sass版本的。 dist版本是已经编译完的。 可以下载不是dist文件，来学习bootstrap 界面的样式在bootstrap-min...
Bootstrap基础学习
09-03
【Bootstrap基础学习】 Bootstrap是前端开发领域广泛应用的开源框架，由Twitter的设计师Mark Otto和Jacob Thornton共同创建。这个框架主要基于CSS和HTML，同时也包含了JavaScript（JQuery）组件，为Web开发者提供了...
开启BootStrap学习之旅
09-02
9. **对未来技术的兼容**：Bootstrap支持HTML5和CSS3等前沿技术，为未来的Web开发打下了坚实的基础。 10. **丰富的组件和插件**：Bootstrap提供了众多内置组件和第三方插件，如模态框、下拉菜单、轮播图等，使得...
Bootstrap零基础学习第一课之模板
09-02
在本篇【Bootstrap零基础学习第一课之模板】中，我们将深入探讨Bootstrap这一流行的前端开发框架，特别是针对初学者的基础知识。Bootstrap是一个基于HTML、CSS和JavaScript的工具包，旨在帮助开发者快速创建响应式和...
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
bootstrap学习笔记之初识bootstrap
10-22
总之，Bootstrap以其强大的功能和易用性，成为了前端开发者的首选框架之一，无论你是新手还是经验丰富的开发者，都能从中受益。通过深入学习和实践，你将能快速地创建出美观、响应式的网页和应用程序。
bootstrap笔记 —— @media 与 Bootstrap 网格系统
永远的北极光
10-21 5861
Bootstrap 的网格系统是基于媒体查询（media query）实现的，即根据当前设备的尺寸等信息控制具体采用哪种 css样式。 一、@media 媒体查询 （一）、基础 语法： @media mediatype and|not|only (media feature) { CSS-Code; }几点说明： 1、mediatype 取值：all（所有设备）|p
A simple bootstrap
Gr1x's Blog
11-01 1132
                                                A simple bootstrap                                                                    -----2004.11.1 (C) Gr1xTo make a long story short, and enough mate
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 905
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 4406
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 220
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
最新发布
jht_520的博客
07-21 150
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
Bootstrap前端框架基础教程
"Bootstrap 教程" Bootstrap 是目前最流行的前端框架之一，它以其简洁、直观和强大的功能而闻名。... ...通过这个教程，你将能够掌握 Bootstrap 框架的基础知识，提升你...准备好你的编辑器，开始这段Bootstrap学习之旅吧！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值