BootStrap入门

目录

  BootStrap概述

  BootStrap的入门开发

  BootStrap的布局容器

  BootStrap的栅格系统

  BootStrap的全局CSS

  使用BootStrap布局网站首页


BootStrap概述

  • 什么是BootStrap:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

  • BootStrap有什么作用:复制粘贴, 能够提高开发人员的工作效率

  • 什么是响应式页面:适应不同的分辨率显示不同样式,提高用户的体验​

  • BootStrap的中文网

    • http://www.bootcss.com

  • 下载BootStrap

  • BootStrap结构

    • 全局CSS

      • bootStrap中已经定义好了一套CSS的样式表

    • 组件

      • BootStrap定义的一套按钮,导航条等组件

    • JS插件

      • BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

BootStrap的入门开发

  • 引入相关的头文件

        
        
        
        
        
        
        
        
        
        
  • BootStrap的布局容器

  • .container 类用于固定宽度并支持响应式布局的容器。
   
...
  • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
   
...
  • row

    Bootstrap 栅格系统的工作原理:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

  • 通过“行(row)”在水平方向创建一组“列(column)”。

  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding

BootStrap的栅格系统

  • 响应式设计: 这种设计依赖于CSS3中的媒体查询

  • 栅格样式:

    • 设备分辨率大于1200 使用lg样式

    • 设备分辨率大于992 < 1200 使用md样式

    • 设备分辨率大于768 < 992 使用sm样式

    • 设备分辨率小于768使用xs样式

BootStrap的全局CSS

  • 定义了一套CSS

    • 对页面中的元素进行定义

    • 列表元素,表单,按钮,图片...

使用BootStrap布局网站首页

需求分析

请使用BootStrap对我们的首页进行优化

技术分析

步骤分析

  1. 新建一个HTML页面.引入bootStrap相关的js和CSS

  2. 定义一个整体的div, 将整体的div分成8个部分

  3. 完成没部分的内容显示

代码实现


        
        
        
        
        
​
    
​
    
        

最新商品

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

最新商品

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

豆浆机

$998

 

你可能感兴趣的:(前端框架)