Bootstrap

1 Bootstrap起源

2011年,Twitter的两个工程师Mark Otto和Jacob Thornton合作开发了一个移动设备优先响应式框架,该框架基于HTML,CSS,JavaScript

2 入门及使用

  • 2.1 下载地址:http://v3.bootcss.com/getting-started/
  • 2.2 在dist文件下有三个文件分别是(css/fonts/js)
  • 2.3 基本模板是以HTML5文档类型的(在代码开头的时候一定要注明文档类型)
  • 2.4 基本结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>Bootstrap</title>
       <meta name="viewpost" content="width=device-width,initial-scale=1">
       <link href="css/bootstrap.min.css">
       <script src="js/jquery-1.11.3.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
</head>
</html>

-1 )先引入核心的css文件
-2 )Bootstrap依赖于jQuery,在引入js文件的时候要先引入jQuery(版本号要大于10以上)
-3 )引入js核心文件
-4 )以上文件在dist文件目录下各自对应的文件目录下
-5 )以上文件引入顺序不可随意调换

3 栅格系统

3.1 Bootstrap采用12栅格系统,吧网页的总宽度平分为12分,方便开发人员自由的按份组合
3.2 在bs中实现栅格,需要借助固定的结构(布局容器)+行+lie
- 1)布局容器(.container/container-fluid)
- 2)行(.row)
- 3)列(col-md-)/取值从1~12
- 4).container↓

container的宽度在某一个范围内是固定的一个值

图片1.png

1 container

    <div class="container box">
         这是一个有固定宽度的容器
    </div>
-  页面宽度>1200,宽度固定为1170px
-  992px<页面宽度<1200px,宽度固定为970px
-  768px<页面宽度<992,宽度固定为750px
-  如果在手机上面,就是百分比宽度,占满屏幕

2 container-fluid(占满父容器的100%宽度)

<div class="container-fluid">
    流体布局容器
<div>

4 全局CSS样式

5 JavaScript插件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 Bootstrap简介 定义 Bootstrap官网给出的解释是:简洁、直观、强悍、移动设备优先的前端开发...
    lvyweb阅读 1,368评论 1 10
  • 什么是 Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap...
    sseakom阅读 1,183评论 3 22
  • 一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发...
    kmmyzi阅读 2,396评论 0 3
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,936评论 3 184
  • 内容简介与目录 上一章:抉择难犹豫不定,细思量压制冲动 第22章:孙成文呵斥宵小,王晓晗笑看二贼 十一国庆期间,孙...
    扶青阅读 357评论 2 8