bootstarp了解
2022/2/16 23:16:46
本文主要是介绍bootstarp了解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
[前端框架 bootstrap 的使用 ]
内容概要
- 前端框架 bootstrap 简介
- 引入方式
- 布局容器
- 栅格系统
- 图标
内容详细
简介
网址:https://v3.bootcss.com/
版本: 2.X 3.X 4.X 推荐使用3.X版本
使用框架调整页面样式一般都是操作标签的class属性即可
作用:
- 是⼀套现成的 CSS 样式集合
- ⽤于开发响应式布局、移动设备优先的 WEB 项⽬
- html、css、javascript ⼯具集
- ⾃定义 JQuery 插件,完整的类库。丰富的组件
- 响应式布局设计,让⼀个⽹站可以兼容不同分辨率的设备
引用方式
1、本地引入
先到网址下载源码,
在新建的 html 文件中写入引入语句:
1.引入jQuery 2.引入bootstrap的css文件 3.引入bootstrap的js文件 <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"> <script type="text/javascript" src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap-3.4.1-dist/js/jquery-3.5.1.min.js"></script>
2、CDN 引入
cdn 网址:https://www.bootcdn.cn/
1.引入jQuery CDN 2.引入bootstrap css的 CDN 3.引入bootstrap js的 CDN <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
布局容器
""" 第一次使用该框架的时候最好采用本地导入的方式 让pycharm记住bootstrap的关键字 """ container 左右留白 container-fluid 左右不留白
栅格系统
用来布局, row 把当前标签分为 12 等份
row 行 # 一个row就是一行 一行是固定的12份 col-md-1 占几份 col-sm-1 占几份 col-xs-1 占几份 col-lg-1 占几份
图标
- bootstrap自带的图标:
通过span标签修改class属性值
- fontawesome网站
网址:http://www.fontawesome.com.cn/
Font Awesome 完全兼容 Bootstrap 的所有组件。
这篇关于bootstarp了解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?