当前位置: 首页 > news >正文

BootStrap基础知识

BootStrap是一个用于快速开发Web应用程序和网站的前端框架。

基于Html、CSS、JavaScript的。

所有主流的浏览器都支持BootStrap。

包含内容:BootStrap提供了一个带有网格系统、链接样式、背景的基本结构。

CSS:全局的css设置、定义基本的htlml元素样式、可扩展的class。

组件:包含了十几个可重用的组件。

JavaScript插件:BootStrap包含了十几个自定义的jquery插件。

BootStrap的组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

在BootStrap创建的网页开头使用html5的文档类型DOCTYPE。

移动设备优先是BootStrap的最显著的变化。

确保适当的绘制和触屏缩放,在HTML的head中添加viewport meta标签。

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

width设置为device-width可以确保它能正确呈现在不同设备上。

initial-scale=1.0确保网页加载时,以1:1的比例呈现,不会有任何缩放。

user-scalable=no可以禁用其缩放(zooming)功能。

maximum-scale=1.0与user-scale=no一起使用,禁用了缩放功能后,用户只能滚动屏幕。

响应式图像:<img src="" class="img-responsive" alt="响应式图像">。

响应式图像对响应式布局的支持更加友好

.img-responsive{

            display:block;

            height:auto;

             max-width:100%;

}

把display属性设置位block,以块级元素显示。

height:auto相关元素的高度取决于浏览器。

max-width:100%会重写任何通过width属性指定的宽度。

全局显示:BootStrap使用了body{margin:0;}来移除body的边距。

排版:使用@font-family-base、@font-size-base、@line-height-base

链接样式:@link-color设置全局链接的颜色  focus--->hover--->active

BootStrap使用Normalize来建立跨浏览器的一致性。

BootStrap3的container calss用于包裹页面上的内容

.container{

padding-right:15px;

padding-left:15px;

margin-right:auto;

margin-left:auto;

}

container的左右 外边距(margin-right,margin-left)交由浏览器决定

由于内边框(padding)是固定宽度

 

转载于:https://www.cnblogs.com/cye9971-/p/10604300.html

相关文章:

  • Shiro原理解析(三)--再谈过滤器
  • mysql-python安装时EnvironmentError: mysql_config not found
  • 蚂蚁金服开源服务注册中心 SOFARegistry | SOFA 开源一周年献礼
  • Grafana 6.1.0-beta1 发布,系统指标监控与分析平台
  • HighChart教程:如何使用Highcharts Cloud API(二)
  • 企业级web缓存服务器Varnish
  • MIPS R6架构现已可供开放使用
  • 常用快捷键总结
  • 防抖与节流
  • 随机访问与顺序访问
  • 猪行天下之Python基础——3.5 字符串
  • c标签 多个条件
  • java jackson json序列化
  • pytorch torchvision.ImageFolder的使用
  • 理解:return、break、continue区别
  • C学习-枚举(九)
  • JDK 6和JDK 7中的substring()方法
  • MySQL用户中的%到底包不包括localhost?
  • PHP面试之三:MySQL数据库
  • python学习笔记-类对象的信息
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • 提醒我喝水chrome插件开发指南
  • 温故知新之javascript面向对象
  • 学习JavaScript数据结构与算法 — 树
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​比特币大跌的 2 个原因
  • #Linux(权限管理)
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (MATLAB)第五章-矩阵运算
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (二)fiber的基本认识
  • (附源码)流浪动物保护平台的设计与实现 毕业设计 161154
  • (九)One-Wire总线-DS18B20
  • (九十四)函数和二维数组
  • ***原理与防范
  • ... 是什么 ?... 有什么用处?
  • .jks文件(JAVA KeyStore)
  • .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets?
  • .net redis定时_一场由fork引发的超时,让我们重新探讨了Redis的抖动问题
  • .Net 路由处理厉害了
  • .NET 线程 Thread 进程 Process、线程池 pool、Invoke、begininvoke、异步回调
  • .NET中使用Protobuffer 实现序列化和反序列化
  • .vimrc php,修改home目录下的.vimrc文件,vim配置php高亮显示
  • :not(:first-child)和:not(:last-child)的用法
  • @NoArgsConstructor和@AllArgsConstructor,@Builder
  • @RequestBody与@ModelAttribute
  • @RequestMapping-占位符映射
  • @软考考生,这份软考高分攻略你须知道
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(白虎组)
  • [1] 平面(Plane)图形的生成算法
  • [120_移动开发Android]008_android开发之Pull操作xml文件
  • [BZOJ1040][P2607][ZJOI2008]骑士[树形DP+基环树]
  • [BZOJ4566][HAOI2016]找相同字符(SAM)
  • [CLickhouse] 学习小计
  • [codeforces]Recover the String