第一篇初识bootstrap
作者:-夏昊- 时间:2024-04-28 09:41:01
Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。
Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。
(2)自带了13个jQery插件,这些插件为bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。
Bootstrap是twitter的工程师在业余时间开发的,在最大最流行的开源站点github上开源以后讯速成为该网站上更新最频繁的项目,大量工程师踊跃为该项目贡献代码,短时间内涌现出大量使用bootstrap搭建的网站。何以bootstrap发展速度会如此惊人呢?这主要得益于bootstrap的优秀特性:
移动设备优先:将针对移动的特性放在了首位
浏览器支持:所有的主流浏览器都支持 Bootstrap
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它包含了功能强大的内置组件,易于定制
下面我们来看用bootstrap搭建出来的最简单的一个页面。
<!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 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你 * 似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你 * 似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你 * 似的坚持!</p>
</div>
</div>
</div>
</body>
</html>
以上所述是小编给大家介绍的第一篇初识bootstrap的相关知识网站的支持!
标签:初识,bootstrap
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
JSP 注释的详解及简单实例
2023-07-21 06:15:35
![](https://img.aspxhome.com/file/2023/1/97891_0s.png)
Python 快速验证代理IP是否有效的方法实现
2022-08-12 07:22:14
面包屑设计
2009-07-07 11:17:00
![](https://img.aspxhome.com/file/UploadPic/20097/7/ryanzhong_bradcrumb_01-73s.jpg)
用CSS实现柱状图(Bar Graph)的方法(四)—table实现复杂柱状图
2008-05-28 12:55:00
![](https://img.aspxhome.com/file/UploadPic/20085/28/200852813283924s.jpg)
PHP字符编码问题之GB2312 VS UTF-8解决方法
2024-04-29 13:57:28
![](https://img.aspxhome.com/file/2023/8/132498_0s.png)
TensorFlow实现指数衰减学习率的方法
2021-02-20 13:13:55
![](https://img.aspxhome.com/file/2023/9/117429_0s.jpg)
PyTorch中的C++扩展实现
2021-06-24 15:52:30
JS实现二维数组横纵列转置的方法
2023-08-29 21:54:05
![](https://img.aspxhome.com/file/2023/6/56206_0s.jpg)
PHP数组交集的优化代码分析
2023-09-29 21:58:59
python中的np.argmax() 返回最大值索引号
2022-08-07 14:22:57
![](https://img.aspxhome.com/file/2023/0/67860_0s.png)
php的RSA加密解密算法原理与用法分析
2023-07-13 11:27:14
浅析JavaScriptSerializer类的序列化与反序列化
2024-02-25 17:46:14
程序员鼓励师插件Rainbow Fart(彩虹屁)
2023-02-11 23:02:40
![](https://img.aspxhome.com/file/2023/8/131918_0s.png)
python:批量统计xml中各类目标的数量案例
2021-11-17 05:22:44
![](https://img.aspxhome.com/file/2023/6/88916_0s.jpg)
Python使用selenium + headless chrome获取网页内容的方法示例
2023-05-02 05:27:37
Python实现鸡群算法的示例代码
2022-03-23 19:02:54
![](https://img.aspxhome.com/file/2023/6/108016_0s.png)
关于Python中request发送post请求传递json参数的问题
2022-12-23 06:20:33
![](https://img.aspxhome.com/file/2023/8/104398_0s.png)
在Python编程过程中用单元测试法调试代码的介绍
2023-12-10 02:16:46
asp如何编写一个DNS LOOKUP程序?
2009-11-07 18:47:00
tensorflow mnist 数据加载实现并画图效果
2023-10-20 15:07:33
![](https://img.aspxhome.com/file/2023/3/90653_0s.png)