bootstrap学习笔记02【全局css样式、组件和插件、案例-凯发k8官方网

• java后端 学习路线 笔记汇总表【黑马程序员】

bootstrap学习笔记01【快速入门、栅格布局】【day01】

bootstrap学习笔记02【全局css样式、组件和插件、案例_黑马旅游网】【day01】

目录

03 bootstrap_全局css样式

bootstrap_全局css样式_按钮

bootstrap_全局css样式_表格

04 bootstrap_组件和插件

bootstrap_组件_导航条&分页条

导航条

分页条

bootstrap_插件_轮播图

05 案例_黑马旅游网

案例_黑马旅游网_分析

案例_黑马旅游网_页眉部分

案例_黑马旅游网_主体&页脚部分

主体部分

页脚部分

黑马旅游网——凯发k8官方网首页代码

---

bootstrap_全局css样式_按钮

如果你觉得xxx样式可以，从凯发k8官方网官网上 复制过来，就完事了 ~

   

css样式和js插件

全局css样式：
    * 按钮：class="btn btn-default"
    * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%（响应式）
        *  图片形状
            *   ：方形
            *    ：圆形
            *   ：相框
    * 表格
    * 表单
2. 组件：
    * 导航条
    * 分页条
3. 插件：
    * 轮播图

  

bootstrap_全局css样式_表格

css样式和js插件

1. 全局css样式：
    * 按钮：class="btn btn-default"
    * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%（响应式）
        *  图片形状
            *   ：方形
            *    ：圆形
            *   ：相框
    * 表格
        * table
        * table-bordered：表格边框
        * table-hover：表格悬浮变色
    * 表单
        * 给表单项添加：class="form-control" 
2. 组件：
    * 导航条
    * 分页条
3. 插件：
    * 轮播图

  

bootstrap_组件_导航条&分页条

导航条

分页条

  

bootstrap_插件_轮播图

案例_黑马旅游网_分析

案例_黑马旅游网_页眉部分

  

案例_黑马旅游网_主体&页脚部分

主体部分

页脚部分

黑马旅游网——凯发k8官方网首页代码

  

previousnext

加油~

总结

以上是凯发k8官方网为你收集整理的bootstrap学习笔记02【全局css样式、组件和插件、案例_黑马旅游网_凯发k8官方网首页】的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。