Bootstrap——页面基本样式

最新推荐文章于 2024-10-10 10:42:41 发布

原创最新推荐文章于 2024-10-10 10:42:41 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #css #前端框架

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文介绍Bootstrap框架的基本构成，包括css样式、js脚本及字体图标。并提供了一个简单的页面示例，指导如何设置基本的页面样式以适配不同移动设备。

1.Bootstrap简介
Bootstrap是简洁的，平面化的，移动端设备优先的，html/css框架，由三部分组成：

css样式：可以去官网下载最新版本，或者直接引入链接http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css“；
js脚本：里面有一些js插件，和jQuery插件不一样，需要下载或直接引入链接http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js;
fonts字体：里面引入了字体图标，在用的时候可以引入相应的类名，不用再插入图片

2.使用插件时应注意

将css样式放在最顶端，js脚本放在body标签的底部，为了更好的响应移动端设备
应引入 <meta name="viewport" content="width=device-width, initial-scale=1">，content属性值指：让页面宽度等于浏览器的宽度，initial-scale属性值指：页面在显示时不做缩放，自适应浏览器。

3.Bootstrap页面的最基本样式

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基本用法</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
  <div>
      hello world!
  </div>
<script type="text/javascript" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>