Bootstrap前端开发框架使用

最新推荐文章于 2022-05-21 12:34:15 发布
置顶 最新推荐文章于 2022-05-21 12:34:15 发布
阅读量461 收藏 1
点赞数 1
分类专栏： Web前端技术 文章标签： 1024程序员节 Bootstrap使用 Bootstrap栅格 栅格列偏移排序 响应式工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Asia1752/article/details/109255406
版权

Bootstrap前端开发框架

推荐学习网址

Bootstrap 使用

1、建议目录结构

在这里插入图片描述

2、html骨架

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <!--[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]-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    内容
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

3、栅格前缀分类

~超小屏幕(手机)
<768px		小屏设备(平板)
>=768px		中等屏幕(PC)
>=992px		宽屏设备
>=1200px
.container最大宽度自动(100%)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-

4、栅格嵌套表格(注意细节)

<div class="row">
        <div class="col-md-4">
            <!-- 最好增加row行，这样可以取消父元素的padding，且高度和父级一样 -->
            <div class="row">
                <!-- 也是将父容器分12等分 -->
                <div class="col-md-6">a</div>
                <div class="col-md-6">b</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>

在这里插入图片描述

5、栅格-列偏移

   <div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 col-md-offset">右侧</div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">中间</div>
        </div>
    </div>

在这里插入图片描述

6、栅格-列排序

   <div class="container">
        <div class="row">
            <!-- 将左侧的盒子-推到右侧8个位置 -->
            <div class="col-md-4 col-md-push-8">左侧</div>
            <!-- 将右侧的盒子-拉回右侧4个位置 -->
            <div class="col-md-4 col-md-pull-4">右侧</div>
        </div>
    </div>

在这里插入图片描述

7、响应式工具

类名隐藏屏幕尺寸
.hidden-xs超小屏
.hidden-sm小屏
.hidden-md中屏
.hidden-lg大屏

相反，类名：visible-xs visible-sm visible-md visible-lg

8、修改container的最大宽度为1280px

@media screen and (min-width:1280px){
    .container{
        width: 1280px;
    }
}

9、图标使用

// 直接复制图标编码到对应元素
<div class="nav">
    <a href="#" class="glyphicon glyphicon-camera">照相机</a>
</div>

效果如下：
在这里插入图片描述
调整样式：

.nav a::before{
    vertical-align: middle;
    padding-right: 5px;
}

效果如下：
在这里插入图片描述

老李笔记
关注
专栏目录
前端开发框架bootstrap3教程
05-25
《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法，包括网格系统、表单、导航、按钮、图标等常用组件的使用。通过学习本教程，您将能够掌握Bootstrap3的核心技术，为您的Web开发工作提供便利和...
Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
专研前端，探索后端
05-14 1843
Bootstrap简介： Bootstrap是Twitter（推特）开发的，目前最受欢迎的前端开源框架，基于jQuery用于开发HTML、CSS、JavaScript，简洁灵活，常用于开发响应式布局及移动端开发。其中文官方文档：http://www.bootcss.com 官网：http://getbootstrap.com 推荐网站：http://bootstrap.css88.com 下载bootstrap： 拿到bootstrap文件包的方式有很多种，例如：官网下载、npm(后面介绍完node可以
报错 | GET https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js net::ERR_CONNECTION_RESET
A123ppleQueen的博客
05-21 3598
这个错误我本人觉得是因为vue2官方托管的地方出了问题，所有没法使用了。 解决方法：到vue官方，点击绿色按钮（开发版本/生产版本）都可以，把vue.js文件下载下来，再引入到要写的页面中就行 ...
Bootstrap样式引入失败问题
热门推荐
wilber0501的博客
12-21 1万+
  bootstrap引入失败问题   通过cdn文件引入： &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"&gt;   &lt;!-- jQuery (Bootstrap 的所有 JavaScript 插...
前端JavaScript 踩坑记录 bootstrap d3.js等
twentyonepilots的博客
02-03 356
Javascript 获取svg元素（text、tect等）长度宽度位置为0或undefined 描述： 使用jQuery的.height()、getBoundingClientRect()，以及d3.js的selection.node().getBBox()均失效。 原因： 经过在不同代码段内插入以上方法排查，发现罪魁祸首是父元素的display属性设为了none，之后运行函数，即使最后display改了回来，以上方法也不能获取正确的方位、大小信息。 解决： 移动代码，获取长宽信息时保证display不是
解决报错：GET https://cdn.jsdelivr.net/npm/vant@3/lib/index.css net::ERR_NAME_NOT_RESOLVED
qq_41812381的博客
05-12 7135
没有找到样式文件；得重新引入一下资源；我用的是vant所以进入vant - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
BootStrap前端框架使用方法详解
10-15
Bootstrap前端框架使用方法详解主要介绍了BootStrap前端框架的基本使用方法和步骤，以及它作为一种流行的前端框架所能带来的便利和好处。接下来，我们将详细探讨Bootstrap的使用方法和相关知识点。 首先，Bootstrap...
Bootstrap前端框架 4.4.1
02-17
Bootstrap前端框架4.4.1是开发者们广泛使用的HTML、CSS和JavaScript库，它极大地简化了Web开发过程，尤其在创建响应式、移动优先的网站时。这个版本的Bootstrap不仅继承了其先前版本的优点，还引入了一些新的特性和...
Bootstrap 前端开源框架
08-15
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布
Bootstrap前端开发框架 v3.3.0
04-04
Bootstrap是简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
前端开发：Bootstrap开发框架
阿甘正传
09-17 7395
1）Bootstrap入门。 Bootstrap官网网站 官方网站：https://getbootstrap.com/ 中文网站：http://www.bootcss.com/ Bootstrap 库的下载 这里我们以 Bootstrap V3.3.7 为例。 进入中文官网，下载 用于生产环境的 Bootstrap，如下图所示： 下载之后，解压 bootstrap-3.3.7-...
CSS文本基线的对其方式
1853
10-20 1万+
CSS文本基线的对其方式 基线效果图 基线对其方式 /* 父级元素font-size设置为0 */ font-size: 0; /* 显示效果设置为block */ display: block; /* 对其方式设置为居中 */ vertical-align: middle;
umijs项目部署Nginx配置（单页面部署）
1853
02-11 5251
umijs项目部署Nginx配置（单页面部署） location / { root /var/www/dist; try_files $uri /index.html; #此处为单页面部署类型 }
响应式开发设备屏幕尺寸划分
1853
10-20 2953
响应式开发设备屏幕尺寸划分 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ 992px 中等屏幕（桌面显示器） >= 992px ~ < 1200px 宽屏设备（大桌面显示器） >=1200px ...
VSCode px转换rem插件 cssrem
1853
10-23 2696
VSCode px转换rem插件 cssrem 插件效果 插件安装 配置 修改默认尺寸：16px=1rem 如果是750px的手机屏幕，则尺寸换算为：75px=1rem 修改后效果
iphone不支持webp图片格式处理方案
1853
09-16 2053
iphone不支持webp图片格式处理方案 方式一（优先考虑） 后端对webp格式的图片进行统一处理，修改文件后缀为jpg，所有前端将全部已jpg格式展现。 方式二（临时方案） 前端采用正则表达式对图片路径进行替换，将== .webp转换成.jpg==。但前提服务器必须在同样路径下存在同名的jpg格式文件。 正则表达式如下： str=str.replace(/\.webp/g,'.jpg'); ...
CSS清除常用元素默认样式
1853
01-26 1828
CSS清除常用元素默认样式 最基本元素 body,img,ul,li,a{ padding:0px; margin:0px; list-style:none; text-decoration:none; } 补充说明 如有其它元素，直接追加即可。此处不建议采用*全部通配，尽可能的缩小范围，减少不必要的修改。 ...
移动端css动态字体大小fontSize rem
1853
03-03 1301
css动态字体大小fontSize rem 设置参考标准 /* 说明：此处将整个手机端设置成100%，作为参考 */ html{ font-size: 100%; } 设置具体字体 /* 说明：font-sizt 不足1时，可用0.*标识，或者直接.*省略零 */ body,.m_size{ font-size: 1rem; } .am-tabs-default-bar-t...
js json数组对象深度比对
1853
10-19 1206
js json数组对象深度比对 /** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj) { return Object.prototype.toString.call(obj) === '[object Object]'; }; /** * 判断此类型是否是Array类型 * @param {Array} arr */
Bootstrap前端框架开发学习指南
Bootstrap是目前非常流行的前端开发框架，源自Twitter，主要基于HTML、CSS和JavaScript，提供了一套简洁且灵活的工具，以加速Web开发进程。本课程《BootStrap开发技术》特别强调了实践性，以企业项目开发流程为背景...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老李笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值