B045-jQuery案例实战&BootStrap

目录

      • 一、BootStrap概述
      • 二、BootStrap使用
        • 1.起步
          • 1.下载或放入BootStrap文件到本地工程里
          • 2.在html代码中引入1个css文件和两个js文件
          • 3.复制模板代码到本地html文件里会自动应用成bootStrap图样中的效果
          • 0.实战案例-环境准备
          • 0.实战案例-基本模板
        • 2.布局容器
        • 3.栅格系统
        • 4.常用组件
          • 表格
          • 表单
      • 三、案例实战
        • 查询所有
          • 页面展示
          • 按钮展示与完成
        • 数据删除
          • 事件委托
          • 获取按钮 - 绑定事件 - 拿到入参 - 发送删除请求
          • 删完之后再清空和查询-即刷新
        • 添加数据
          • 逻辑流程
          • 准备模态框
          • 发送保存请求
          • 后台添加完成
          • 添加前端处理
        • 数据修改
          • 逻辑流程
          • 前端
          • 后端

一、BootStrap概述

jQuery本身不带样式,要自己设置,bootStrap有,可以直接看着选用,不用自己调来调去。相当于带有现成样式的前端组件库。
Bootstrap是最受欢迎的 HTML、CSS 和 JS 前端框架,用于开发响应式布局、移动设备优先的 WEB 项目

注意事项:
1.像百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面
2.一般网站的交互很少,仅仅用于信息展示和获取以及点个赞什么的。需要写的兼容性代码很少,非常适合做成响应式

二、BootStrap使用

1.起步

1.下载或放入BootStrap文件到本地工程里
2.在html代码中引入1个css文件和两个js文件

中文网 - v3中文文档 - 起步 - 基本模板

DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <h1>Hello, world!h1>

    
    <script src="//code.jquery.com/jquery.js">script>
    
    <script src="js/bootstrap.min.js">script>
  body>
html>
3.复制模板代码到本地html文件里会自动应用成bootStrap图样中的效果

全局CSS样式,组件,JS插件,

0.实战案例-环境准备

B045-jQuery案例实战&BootStrap_第1张图片

0.实战案例-基本模板
DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Templatetitle>

    <link href="/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery-2.1.3.js">script>
    <script type="text/javascript" src="/js/bootstrap.js">script>
    
  head>
  <body>
    <h1>你好,世界!h1>
  body>
html>

2.布局容器

table布局 - 不满足复杂的布局情况
div布局 - 麻烦

bootStrap版容器布局

DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Templatetitle>

    <link href="/css/bootstrap.css" rel="stylesheet">
    
                    
                    

你可能感兴趣的:(笔记总结,jquery,bootstrap,前端)