Bootstrap入门、CSS样式【栅格系统】

1.WWW:What、Why、Where

What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。

  1. Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。
  2. 用于快速开发Web应用程序和网站的前端框架
  3. Bootstrap是基于HTML、CSS、JS的,简介灵活,使Web开发更加快捷
  4. 总结:Bootstrap是一个建立在一个页面,可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架

Why:

  1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
  2. 移动设备有限
  3. 浏览器支持
  4. 容易上手

Where:

  1. 企业网站、博客、网站后台之类的网站
  2. 注意:非电商(电商网站分类很多)

2.环境安装到Bootstrap官网下载Bootstrap库。官网:Bootstrap中文网

  1. 到Bootstrap官网下载Bootstrap库。官网:Bootstrap中文网icon-default.png?t=M3K6http://www.bootcss.com
  2. 页面中引入库:
      • bootstrap.min.css:在Bootstrap中有很多CSS样式。所以要有CSS文件
      • bootstrap.min.js:严格意义上来说,Bootstrap是基于jQuery的一个库,jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库

 

Bootstrap CSS

    1. 概览
      1. H5文档类型

Bootstrap必须是基于H5的,我们来看一下网页的首行代码 <!DOCTYPE html>这个就是H5的

      1. 移动设备优先

现在我们在页面F12看效果,选中手机模式,我们可以看到效果很模糊,看不清楚。现在页面不支持手机端。我们还需要在网页head标签中添加一句代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

刷新页面,是不是页面美观多了

      1. 布局容器
  1. 固体容器【class=”container”】

示例代码:

<div class="container">

<button>原生button</button>

<button class="btn btn-default">Bootstrap的button</button>

<button class="btn btn-success">未读69条</button>

<button class="btn btn-success">未读<span class="badge">69条 </span></button>

</div>

我们给div加上背景色样式 再来看一下效果

<style type="text/css">

.container{

background-color: pink;

}

</style>

Div自动居中了

固体布局就是页面两边后自动留白,div自动居中

  1. 流体容器【class=”container-fluid”】

示例代码:

<div class="container-fluid">

<button>原生button</button>

<button class="btn btn-default">Bootstrap的button</button>

<button class="btn btn-success">未读69条</button>

<button class="btn btn-success">未读<span class="badge">69条</span></button>

</div>

流体布局就是自动铺满,永远是占满整行

    1. 栅格系统(Grid System)
      1. 概念

栅格系统,可以理解为就是网格,格子

每行最多12个格子,如果想要再多可以使用栅格嵌套实现

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值