昆仑山:眼中无形心中有穴之穴人合一

夫君子之行，静以修身，俭以养德；非澹泊无以明志，非宁静无以致远。夫学须静也，才须学也；非学无以广才，非志无以成学。怠慢则不能励精，险躁则不能冶性。年与时驰，意与岁去，遂成枯落，多不接世。悲守穷庐，将复何及！

 

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  阅读(180)  评论(4)  编辑  收藏  举报

导航