Bootstrap系列 -- 1. 如何使用Bootstrap

简介: 一. Bootstrap 简介   Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/    二. Bootstrap核心    Bootstrap核心是Bootstrap.

 

一. Bootstrap 简介

  Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/

  

二. Bootstrap核心

   Bootstrap核心是Bootstrap.css 和 Bootstrap.js , Bootstrap 框架依赖于jQuery框架,所以在使用Bootstrap之前需要引入jQuery核心包

 

三. 基本页面模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap</title>
    <link href="/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet" />

    <!--[if lt IE 9]>
        <script src="/bootstrap-3.3.4-dist/js/html5shiv.min.js"></script>
        <script src="/bootstrap-3.3.4-dist/js/respond.min.js"></script>
    <![endif]-->

    <script src="/bootstrap-3.3.4-dist/js/jquery-2.1.4.min.js"></script>
    <script src="/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

 

四. 更多信息参考官网

相关文章
|
1月前
|
前端开发
Bootstrap
【10月更文挑战第18天】
15 1
|
6月前
|
前端开发 JavaScript 容器
Bootstrap4 Jumbotron
Bootstrap 4 Jumbotron 是一个用于展示重要信息和功能的模态框,通常用于页面头部或页面中部的重点展示区域。它具有全屏宽度的布局,可以包含文本、图像、按钮等元素,并且可以自动适应不同的屏幕尺寸。Jumbotron 是一个灵活的组件,可以用于多种不同的场景,例如介绍公司或产品、展示广告或促销信息、提供导航或搜索功能等。
75 9
|
前端开发 索引 容器
bootstrap4-部分总结
bootstrap4-部分总结。
|
前端开发
bootstrap
bootstrap
52 0
|
移动开发 前端开发 JavaScript
Bootstrap4
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
112 0
|
前端开发
1、Bootstrap
1、Bootstrap
117 0
|
开发框架 前端开发 JavaScript
|
前端开发 JavaScript CDN
Bootstrap教程(2)--安装Bootstrap
本文目录 1. 版本选择 2. 使用方式 3. 安装方法 4. 验证下
364 0
Bootstrap教程(2)--安装Bootstrap
|
前端开发 JavaScript
Bootstrap教程(1)--为何要学习Bootstrap
本文目录 1. Bootstrap是什么 2. 为何要学习Bootstrap 3. Bootstrap历史地位 4. 小结
171 0
|
前端开发 JavaScript 编解码
Bootstrap 小结
Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.
1186 0