# boostrap_learn **Repository Path**: personal_items/boostrap_learn ## Basic Information - **Project Name**: boostrap_learn - **Description**: Bootstrap实战第二版 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2020-10-23 - **Last Updated**: 2025-02-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # boostrap_learn #### 介绍 Bootstrap实战第二版 #### Bootstrap官网 [Bootstrap4](https://getbootstrap.com/) #### 安装教程 1. clone bootstrap4整个项目 ```git git clone https://github.com/twbs/bootstrap.git ``` 2. 安装Grunt命令行工具grunt-cli ```shell npm install -g grunt-cli ``` 3. 安装Ruby > [教程](https://www.runoob.com/ruby/ruby-installation-windows.html) 4. 安装Bundler ```shell gem install bundler ``` 5. 安装package.json依赖 ```shell npm install ``` 6. 安装项目中所有的Ruby依赖，如Jekyll和其他插件 ```shell bundle install ``` 7. 本地启动Bootstrap文档 ```shell bundle exec jekyll serve ``` #### 使用Bootstrap CLI 1. 安装 grunt bower ```shell npm install -g grunt bower ``` 2. 安装Gulp ```shell npm install -g gulp bower ``` 3. 安装Bootstrap CLI ``` npm install -g bootstrap-cli ``` 4. 创建项目 ```shell bootstrap new ``` 5. 启动项目 ```shell cd appName bootstrap watch ``` 6. 编译项目 ```shell bootstrap build ``` 7. 更新Bootstrap ```shell Bootstrap update ``` #### Yeoman替代Bootstrap-cli 1. 安装 Yeoman ``` npm install -g yo grunt-cli bower ``` 1. 安装 ```shell npm install -g generator-bootstrap4 ``` 2. 运行 ```shell yo bootstrap4 ``` #### 目录说明 * Bootstrap4SiteBlueprints_ColorImages.pdf > 彩板Bootstrap实战图书案例 * Bootstrap-4-Site-Blueprints > Bootstrap实战图书源代码 * bootstrap-4.2.1 > 源码版Bootstrap文件结构 * bootstrap-4.2.1-dist > 编译版Bootstrap文件结构 * Chapter02 * 2.4 > 设计网页按钮 * 2.5 > 设计网页轮播组件 * Chapter03 [`快速掌握Bootstrap 4布局`](https://v4.bootcss.com/docs/layout/overview/) * 3.1 > 布局基础 * 3.2 > 网格系统：等宽列、设置一个列宽、可变宽内容、等宽多列、覆盖所有设备 > > 响应类：覆盖所有设备、水平排列、混合搭配、删除边距、列包装、排列顺序、偏移类示例、使用margin类实现列偏移、列嵌套 * 3.4 > 案例实训1[仿QQ登录界面](./Chapter03/3.4/qqlogin.html) * Chapter04 [`弹性盒子`] * 4.2 > 排列方向 * 4.3 > 内容排列 * 4.4 > 项目对齐 * 4.5 > 指定项目对齐 * 4.6 > 自动相等 * 4.7 > 等宽变换 * Chapter05 [`核心工具库`] * 5.1 文本处理 > 文本转换、字体的粗细和斜体效果、复位颜色、添加字体类和删除修饰 * 5.2 颜色 > 文本颜色、链接的文本颜色、背景颜色 * 5.3 边框 > 添加边框 * 5.4 宽度和高度 > 宽度、高度、最大宽度和最大高度 * 5.5 边距 > 宽度、高度、最大宽度和最大高度、响应式边距 * 5.6 浮动 > 浮动效果、响应式浮动 * 5.7 display属性类 > 内联元素和块级元素的转换、响应式的显示和隐藏 * 5.9 内容溢出 > 内联元素和块级元素的转换、响应式的显示和隐藏 * 5.10 定位 > 内联元素和块级元素的转换、响应式的显示和隐藏 * 5.11 阴影 > 阴影效果 * Chapter06 `Bootstrap 4的新版式` * 6.2 排版 > 排版、标题突出显示、段落、缩略语、引用 * 6.3 代码 > 行内代码、代码块、var变量、用户输入键盘动作提示 * 6.4 图片 > 响应式图片、图像缩略图、图片对齐方式 * 6.5 表格 > 表格默认风格 * 6.6 设计后台人员管理页面 > [案例实训](./Chapter06/6.6.html) * Chapter07 `CSS组件` * 7.1 正确使用CSS组件 > 下拉菜单 * 7.3 按钮组 > 按钮组、定义按钮组工具栏、按钮组工具栏结合输入框、嵌套按钮组、垂直布局 * 7.4 下拉菜单 > 分裂式按钮下拉菜单、设计菜单分割线、菜单内容 * 7.5 导航 > 定义导航、垂直布局、带下拉菜单的标签页导航、胶囊导航选项卡 * 7.6 巨幕 > 定义巨幕、定义全屏效果巨幕 * Chapter08 `深入掌握CSS组件` * 8.4 进度条 > 多进度条进度 * 8.5 导航栏 > 定义导航栏、添加下拉菜单、设计导航栏配色、扩展导航栏内容 * 8.6 案例实训 > 设计动态进度条 * Chapter09 `高级的CSS组件` * 9.3 面包屑 > 定义面包屑 * Chapter10 `Bootstrap 4的新增组件` * 10.1 旋转器 > 定义旋转器 * 10.2 卡片 > 卡片的标题.文本.链接、列表组、 页眉和页脚、使用网格布局控制卡片的宽度、添加导航、卡片阵列、多列卡片浮动排版 * 10.3 案例实训 `重点` > 仿云巴网站 * Chapter11 `快速认识JavaScript插件` * 11.1 插件分类 > data属性调用 * 11.2 按钮式复选框和单选框 > 按钮式复选框、按钮式单选框 * 11.3 警告框 > 添加用户行为 * 11.6 标签页 > 定义标签页 * 11.8 案例实训 `重点` > 仿京东商品推荐区 * Chapter12 `深入精通JavaScript插件` * 12.1 折叠 > 定义折叠、设计手风琴效果 * 12.4 轮播 * Chapter13 `项目实训-招聘网中的简历模板` * Chapter14 `项目实训-仿星巴克网站` * Chapter15 `项目实训-相册类博客项目` * Chapter16 `项目实训-设计流行企业网站 - 房产售卖平台` * Chapter17 `项目实训-Web设计与定制网站` * Chapter18 `项目实训-开发神影视频网站`