Bootstrap框架学习
官方 http://www.bootcss.com/
https://v3.bootcss.com/getting-started/#download
https://getbootstrap.com/docs/4.0/getting-started/download/
什么是Bootstrap
Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Boptstrap是基于HTML,CSS,JAVASCRIPT,它简洁灵活,使得Web开发更加快捷。
【1】它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目。
【2】国内一些移动开发者较为熟悉的框架,如Wex5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
Bootstrap 特点
Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等
Less css预处理器先不做解释
特色
适应各种技术水平Bootstrap适应不同技术水平的从业者,无论是设计师,还是程序开发人员,不管是骨灰级别的大牛,还是刚入门槛的菜鸟。使用Bootstrap既能开发简单的小东西,也能构造更为复杂的应用。
跨设备、跨浏览器最初设想的Bootstrap只支持现代浏览器,不过新版本已经能支持所有主流浏览器,甚至包括IE7,从Bootstrap 2开始,提供对平板和智能手机的支持。
支持响应式设计从Bootstrap 2开始,提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放,从而提供一致性的用户体验。
选用LESS构建动态样式当传统的枯燥CSS写法止步不前时,LESS技术横空出世.LESS使用变量、嵌套、操作、混合编码,帮助用户花费很小的间成本,编写更快、更灵活的CSs,当然还有很多优势
导航栏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>智慧+</title>
<!--CSS 一般放在head 部分-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style type="text/css">
.navbar-default {
background: pink;
}
</style>
</head>
<body>
<h1>智慧+</h1>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
aria-expanded="false">
<span class="sr-only">汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" id="nav-brand-itheima" href="#">
网站首页
</a>
</div>
<!-- <ul class="nav navbar-nav">
<li class="active" style="border:3px solid black"><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>-->
<div class="collapse navbar-collapse" id="navbar-cpllapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">系列教程</a>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</nav>
</div>
<!--JS 一般放在body部分最下边-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
posted on 2019-03-11 13:36 Indian_Mysore 阅读(177) 评论(4) 编辑 收藏 举报