bootstrap起步

最新推荐文章于 2021-01-15 10:13:53 发布

酱油一哥

最新推荐文章于 2021-01-15 10:13:53 发布

阅读量724

点赞数

分类专栏： web开发文章标签： bootstrap 响应式前端开发

本文链接：https://blog.csdn.net/a304507016/article/details/50670267

版权

web开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

bootstrap起步

官方文档：bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

个人想法：作为一名web开发人员，工作中大部分时间在写后台，前端知识部分相对薄弱，有了bootstrap之后就可以快速的搭建一个美观的页面，不用再愁于页面的样式怎么写，只需要给html元素添加相应的class即可。能够在没有交互资源投入的情况下开发出美观的页面。
bootstrap官方网站：http://www.bootcss.com/
bootstrap中文文档路径：http://v3.bootcss.com/

搭建第一个bootstrap页面。
1 创建一个html界面
2 声明html头
3 编写html元参数。 html的meta元素：编码，IE模式，页面宽度和缩放比
4 引入bootstrap的css文件
5 引入html5元素和媒体查询支持的js文件for IE8
6 编写html dom元素，增加class属性
7 引入jquery.js
8 引入bootstrap.js
如下
<!DOCTYPE HTML>
<html lang="en">
  <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/css/bootstrap.min.css" rel="stylesheet">
		
	</head>
  
  <body>
    <div class="container">
      <p>hello bootstrap!</p>
    </div>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>