wjs项目起始页bootsrap使用入门开发教程

wjs项目起始页bootsrap使用入门开发教程思维导图，整理了响应式布局、Wjs项目起始页、bootsrap使用、微金所信息区域、a标签注意点内容，有兴趣的可以看看。

wjs项目起始页bootsrap使用入门开发教程

• 响应式布局
  • 依托于媒体查询这项技术,实现页面布局的多设备适配(改变布局而已)
• wjs项目起始页
  • 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
        • 封装了很多wjs的字体图标
      • index.css
        • 首页的css
• bootsrap使用
  • 使用组件更改样式
    • 不建议直接修改bootstrap.css 源文件
      • 如果更改了页面中其他想要使用默认样式的元素也会一起更改
  • 为组件的对应html标签 添加自己得class 进行更改
    • 不建议这样做
    • bootstrap的组件 嵌套关系 很多
  • 建议 用法
    • 拷贝bootstrap的原生样式
    • 修改拷贝出来的原生样式的 类名
    • 在更改了类型的样式中 修改css
    • 使用组件的地方 替换为 我自己的 类名
    • 好处
      • 不会覆盖bootstrap的原生css
      • 层次结构 再复杂 也无所谓
      • 由于使用的是自己的class 不会造成覆盖的问题
  • 快速浮动
    • pull-left
      • 左浮动
    • pull-right
      • 右浮动
  • bootstrap 已经默认帮我们清除了浮动 所以 直接使用浮动的class即可
• 微金所信息区域
  • 最小屏幕要隐藏
  • 大屏幕 一行3个
  • 中等屏幕一行2个
  • 使用栅格进行布局
• a标签注意点
  • a标签的内部 不能嵌套a标签
  • 浏览器会自动帮助我们 将 嵌套的a标签 转化为 兄弟关系的 a标签