Bootstrap学习文档(一)

Boostrap中中文网

1. Bootstrap 是什么

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,使用这个框架可以简单高效的开发出适配各种屏幕的网站应用,即是编写一套代码,适用多重平台(PC,平板,手机等)。Bootstrap 相比其他框架,自由度更高,它提供了基本的样式和基本的组件,而不会在创造上约束开发者的思维。

简单的用面向对象的来说,Bootstrap 为我而们封装了一些常用的类(class的名字)和接口(js的插件),这些类就是这个模版自定义的 css 样式,比如文本居中,css 代码是 text-align: center; 经过 Bootstrap封装后的类(class)名为 text-center,这样我们就可以直接使用text-center来使一个 p 标签或者 div 标签里面的内容居中了,从而实现我们软件工程中所说的代码重用。Bootstrap 中的js插件,不需要我们写 js 代码就能帮我们实现要用 js 来实现的效果,而是通过使用 Bootstrap 自定义的属性。

学习的时候直接到这里查 Bootstrap 的文档 Bootstrap中文网

2. Bootstrap 常用的基本模版

相比官网的基本模版,增加了一些常用的设置。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 使IE浏览器用最新的edge引擎渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 让页面的最大宽度等于设备的宽度,页面初始化为不缩放状态,当然这样还是可以缩放的 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <!-- 使360浏览器渲染页面时默认使用极速模式,考虑到国内360的大量用户 -->
    <meta name="renderer" content="webkit">
    <title>Bootstrap常用的模版</title>

    <!-- 项目导入的Bootstrap的css压缩文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 一个浏览器默认css样式重置文件,不用在手动重置了 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">

    <!-- 下面两个文件是让IE9以下的IE浏览器兼容新增的HTML5标签和CSS3样式 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>写给女朋友的Bootstrap学习文档</h1>

    <!-- 为Bootstrap中封装的JavaScript插件提供支持,并且要在Bootstrap.js之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 项目导入的Bootstrap的js压缩文件 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

3. 栅格系统

  • Bootstrap 的布局容器
    • 1.container-fluid 自适应宽度100%
      1. container 适应屏幕的固定宽度,要比container占的宽度小一些
      • 屏幕宽度 >= 1200px 固定宽度为1270px
      • 992px <= 屏幕宽度 <= 1200px 固定宽度为970px
      • 768px <= 宽度 <= 992px 固定宽度为750px
      • 宽度< 768px 固定宽度auto(自适应)

注意:这两个class不能放在一起,可以是兄弟关系,但不能是嵌套的关系。如果不想让宽度随着屏幕而变化,可以给它一个!important来提升优先级,这样的话在所有尺寸下都是一个定值

示例代码如下:

<div class="container-fluid">
  <div style="background: red;">自适应宽度100%</div>
</div>
        
<div class="container" style="background: green; width: 1000px!important;">适应屏幕的固定宽度</div>

下面是错误写法
<div class="container-fluid">
  <div class="container" style="background: red;">错误写法</div>
</div>
  • Bootstrap 的栅格系统

在 Bootstrap 中一行分为 12列,也即是屏幕的宽度被分为了 12份,一份就是十二分之一的屏幕宽度,源码是通过宽度为百分比以及浮动实现的。 1. row 代表一行 2. col-- 代表列,第一个 * 和屏幕尺寸有关,第二个 * 是列数 如果列的和超过了12,那就会换行,如果有一列,这个数值超过了12,那就会按12去显示 lg 宽度>1200px 表现形式: 屏幕的宽度大于1200,一行显示n(结构里有几个div)列 屏幕的宽度小于1200,一行显示1列

 md 992px <= 宽度 <= 1200px
  表现形式:
    屏幕的宽度大于992并且小于1200,一行显示n(结构里有几个div)列
屏幕的宽度小于992,一行显示1列

 sm 768px <= 宽度 <= 992px
  表现形式:
    屏幕的宽度大于768并且小于992,一行显示n(结构里有几个div)列
屏幕的宽度小于768,一行显示1列

  xs 宽度 <= 768px
  表现形式:
    屏幕的宽度小于768,一行永远显示n(结构里有几个div)列

记忆口诀:LG(手机品牌)(lg),妈的(md),什么(sm),想死(xs)。(不是自己独创的,参考的网上的笑话。)

示例代码如下: 缩小浏览器宽度改变div的宽度,观察列数的变化。

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container">
  <div class="row">
      <div class="col-lg-13">超过12列啦啦啦</div>
  </div>
  <div class="row">
    <div class="col-lg-1">第1行第1列</div>
    <div class="col-lg-11">第1行第2列</div>
  </div>
  <div class="row">
    <div class="col-md-4">第2行第1列</div>
    <div class="col-md-4">第2行第2列</div>
    <div class="col-md-4">第2行第3列</div>
  </div>
  <div class="row">
    <div class="col-sm-4">第3行第1列</div>
    <div class="col-sm-4">第3行第2列</div>
    <div class="col-sm-4">第3行第3列</div>
  </div>
  <div class="row">
    <div class="col-xs-4">第4行第1列</div>
    <div class="col-xs-4">第4行第2列</div>
    <div class="col-xs-4">第4行第3列</div>
  </div>
</div>

3. 组合使用 示例代码如下: 缩小浏览器宽度改变div的大小,仔细观察,四列,变三列,再变两列,最后变成一列的效果

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第1列</div>
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第2列</div>
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第3列</div>
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第4列</div>
  </div>
  <div class="row">
    <div class="col-lg-3">第1行第1列</div>
  </div>
</div>

4. 列偏移 col--offset- 向右偏移,第一个 * 是和屏幕尺寸有关,第二个 * 是偏移的列数,如果偏移的数量大于12则会不起作用。

示例代码如下:

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-lg-4">第1行第1列</div>
    <div class="col-lg-4">第1行第2列</div>
    <div class="col-lg-4">第1行第3列</div>
  </div>
  <div class="row">
     <!--可以放开注释试着玩玩,看看效果-->
    <!--<div class="col-lg-4 col-lg-offset-4">第2行第1列</div>-->
    <!--<div class="col-lg-4 col-lg-offset-5">第2行第1列</div>-->
    <!--<div class="col-lg-4 col-lg-offset-12">第2行第1列</div>-->
    <div class="col-lg-4 col-lg-offset-13">第2行第1列</div>
  </div>
</div>

5. 列排序 col--push(pull)- 第一个 * 是和屏幕尺寸有关,第二个 * 是往右或者往左的列数,不能超过12,否则就不起作用,push是往右推,pull是往左拉。

示例代码如下:

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container" style="border: 1px solid #f00;">
  <div class="row">
    <div class="col-lg-2 col-lg-push-5">第1行第1列</div>
    <div class="col-lg-2 col-lg-push-13">第1行第2列</div>
  </div>
  
  <div class="row">
    <div class="col-lg-2 col-lg-pull-1">第2行第1列</div>
    <div class="col-lg-2 col-lg-pull-13">第2行第2列</div>
  </div>
  
  <!--调换位置效果-->
  <div class="row">
    <div class="col-lg-2 col-lg-push-10">第3行第1列</div>
    <div class="col-lg-10 col-lg-pull-2">第3行第2列</div>
  </div>
</div>

6. 列偏移和列排序的区别

    1. 列偏移只能往右走,而列排序(pull、push)既可以往右边走,也可以往左边走
    1. 如果一行中有多列,offset偏移如果大的话,会换行再偏移,而push不会有这个问题,可以溢出父级的容器。

示例代码如下:

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container" style="border: 1px solid #f00;">
  <!--第一个区别-->
  <div class="row">
    <div class="col-lg-2 col-lg-offset-10">第1行第1列</div>
  </div>
  <div class="row">
    <div class="col-lg-2 col-lg-push-10">第2行第1列</div>
  </div>
  <div class="row">
    <div class="col-lg-2 col-lg-pull-2">第3行第1列</div>
  </div>
  
  <!--第二个区别-->
  <!-- 一行有多列总份数超过12则会出现折行-->
  <div class="row">
    <div class="col-lg-4">第4行第1列</div>
    <div class="col-lg-4 col-lg-offset-4">第4行第2列</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4">第5行第1列</div>
    <div class="col-lg-4 col-lg-push-5">第5行第2列</div>
  </div>
</div>

7. 嵌套 每一列里面都可以在嵌套一行和n(不能超过12)列,那嵌套里面的元素就会以父级的宽度为基准,再分12个列。

示例代码如下:

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container" style="border: 1px solid #f00;">
  <div class="row">
    <div class="col-lg-6">
      第1行第1列
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
      </div>
    </div>
    <div class="col-lg-6">第1行第2列</div>
  </div>
</div>

本篇结束,写在最后

栅格系统用来网页布局,这是网页设计的第一步,另外Bootstrap的中文网上(官网的翻译版)里面的布局方式也值得我们学习,可以仔细观察一下。

Bootstrap 系列:

Bootstrap学习文档(一)

Bootstrap学习文档(二)

Bootstrap学习文档(三)

Bootstrap学习文档(四)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

如何提升Web页面的性能,HTML和css代码优化!

怎么进步Web页面的功用,许多开发人员从多个方面来下手如JavaScript、图画优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈...

38750
来自专栏Material Design组件

Human Interface Guidelines —— Text Views & Web Views

10430
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

33180
来自专栏web编程技术分享

【手把手】制作一个简单的HTML网页

1.2K90
来自专栏前端架构与工程

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

23260
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(二)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

18140
来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

91890
来自专栏木宛城主

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标、下拉菜单、导航、警告框、弹出框、输入框组等。在你的Web Application中使用这些组件...

733100
来自专栏Golang语言社区

H5一二事 - 要饭的

先回顾一下WEB技术的几个阶段 那么H5肯定不是多了一些标签就完事了,H5也跟酷炫没什么关系,那是CSS3的事情,它更多的职责是功能,而不是外观,是JavaSc...

31480
来自专栏BestSDK

年薪30万的前端面试题,你能答对几道?|附答案

HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元...

43260

扫码关注云+社区

领取腾讯云代金券