移动web开发+前端框架bootstrap相关笔记（二）

1.响应式布局依托于媒体查询这项技术，实现页面布局de多设备适配（改变布局而已）。

2.微金所项目：
◆css：【
◇base.css （基础样式）
◇index.less （less文件）
◇index.css （生成的css文件）
◇
】
◆fonts：【
◇微金所得字体图标
】
◆images：【
◇图片素材
】
◆js：【
◇js代码
】
◆lib：【
◇css（bootstrap的css文件，因为我们用了bootstrap框架所以需要导入，为了避免给自己的文件冲突，所以放在lib里面）
◇fonts（bootstrap的字体图标的字体文件，切记跟bootstrap中的css文件有相关路径关系，不能随机更改）
◇js （bootstrap的js文件，jquery的文件）
】
◆模板的引用：【
◇由于将bootstrap的文件全部丢到了lib文件夹中，所以需要修改模板页的内容
◇导入自己的css，base.css（封装了很多微金所的字体图标），index.css（首页的css）
◇
◇
】

3.当你直接把bootstrap官网中的组件拿来用的时候，如果想改其中的东西，要先审查元素，弄清楚哪儿需要留，哪儿需要删，然后再去删掉或者修改真正的源码。

4.bootstrap的使用注意
◆使用组建时如果想更改样式，不建议直接修改boostrap.css源文件，如果更改了，页面中其它的元素的默认样式也会一起被改掉。
◆为组件的对应html标签添加自己的class来进行样式的更改，但是还是不建议这样做，因为bootstrap的组件嵌套关系很多的。
★建议使用：【
☆拷贝bootstrap的原生的样式（相关的都要拷贝）
☆修改拷贝出来的原生样式的类名为自己定义的类名
☆然后在更改了类名的样式中修改css
☆使用组件的地方将bootstrap的默认类名替换为自己定义的类名
☆☆好处是：不会覆盖bootstrap的原生css，并且层次结构再复杂也没关系，因为使用的是自己的class，所以不会造成覆盖的问题
】

5.bootstrap中的媒体查询的之后显示和隐藏的类是 hiddent-lg、hiddent-md、hiddent-sm、hiddent-xs，这些很常用。

6.实际开发中并不是一个人埋头苦干，需要和很多人沟通，和产品经理考虑考虑交互，和美工讨论讨论图片，和后台讨论讨论把数据发到哪个url里面以及是get请求还是post请求。

7.a标签中不能嵌套a标签，如果嵌套了，浏览器会将嵌套的a标签渲染成兄弟关系。

移动web开发+前端框架bootstrap相关笔记（二）相关推荐

Boostrap ZURB Foundation —— Web开发前端框架
webflow: Webflow 允许设计师通过自由的拖拉拽与 CSS 类互动,而定义它们的过程无需写任何一行代码. 用户在完成从设计到 CSS 构架之后,甚至可以在线直接将建好的网页发布,而不需要导 ...
前端入门前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
前端框架 Bootstrap 4.5.2 发布
前端框架 Bootstrap 4.5.2 发布了,此版本主要解决了以下两个问题: 恢复 make-container-max-widths mixin.它将保留在 v4 的代码库中. 从 .row 移 ...
19年8月字母哥第四章常用web开发数据库框架不要用公司网络加载不出来用热点！！！
第四章常用web开发数据库框架 4.1.整合Spring JDBC操作数据 4.2 Spring JDBC多数据源的实现 4.3.Spring JDBC JTA实现分布式事务 4.4.ORM主流框架 ...
前端框架 Bootstrap 4.4.0 发布
前端框架 Bootstrap 4.4.0 发布了,以下是更新内容: 新的响应式 .row-cols 类,用于快速指定跨断点的列数新的 escape-svg() 函数,可简化用于表单等的嵌入式背景图像 ...
前端框架——bootstrap/knockoutjs/angularjs
前端框架--bootstrap/knockoutjs/angularjs 转载于:https://blog.51cto.com/caochun/1854522
前端框架BootStrap之柱状图模板
前端框架BootStrap之柱状图模板写在前面:有段时间没更新博客了.本身是Java后端的.但是公司限制.后端在写.安卓在写.前端也在写.前端也和安卓一样比较菜,有不足的地方望路过的大佬指正.最近做 ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
华为WEB开发前端全栈成长计划--HTML笔记
华为高校内容组出版张宇老师第一章 WEB简史第一节 Web的诞生 Internet 中文译名为因特网,又叫国际互联网,由所有使用公共语言互相通信的计算机连接而组成的全球网络. 历史起源20世纪 ...

移动web开发+前端框架bootstrap相关笔记（二）

移动web开发+前端框架bootstrap相关笔记（二）相关推荐

最新文章

热门文章