前端学习1 bootstrap

时间 2019-12-11

原文原文链接

近几年全栈工程师的思想流行，为了跟上浪潮，最近花了点时间，从新审视了一下前端，发现这两年前端技术发展迅猛，有必要深刻去学习一下前端知识，就先从bootstrap开始吧。javascript

bootstrap是一个源于twitter的开源工具库，目的是为了解决前端是响应式布局的快速开发，它有丰富的插件和不少已经写好的css样式，能够说是后端程序员完成前端工做的好帮手。在此以前，后端程序员每每被css的样式布局，浏览器的统一表现和ui的色彩搭配所困扰，写出的页面每每比较丑，而有了bootstrap，咱们能够轻松的写出高大上的页面，丰富的组件几乎能够知足个人一切需求，而开源和可定制化又能够为个人具体问题给予解决方案，less赋予了css动态语言的特性。关于bootstrap的具体内容和学习文档，我推荐http://www.bootcss.com/，里面的文档很是友好。css

今天贴一个自学的bootstrap代码，是一些经常使用组件的我的重写，最后在上传一个半完工毛坯页面，基本体现了bootstrap的栅格布局，丰富组件和支持响应式布局的特色html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="device-width,initial-scale=1">
  6     <link href="css/bootstrap.min.css" rel="stylesheet">
  7     <script type="text/javascript" src="js/jquery.min.js"></script>
  8     <title></title>
  9 </head>
 10 <body style="padding-top: 150px;"><!--设置body内部，防止nav遮挡-->
 11 <!--随鼠标滚动的nav标签start-->
 12 <div class="col-md-10">
 13     <nav class="nav navbar-inverse navbar-fixed-top">
 14         <div class="container">
 15             <div class="navbar-header">
 16                 <a href="#" class="navbar-brand" >
 17                     <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2428887428,3176715982&fm=58">
 18                 </a>
 19                 <p class="navbar-text"><strong>BMW</strong></p>
 20             </div>
 21             <div class="collapse navbar-collapse">
 22                 <div class="col-md-6">
 23                     <ul class="nav navbar-nav">
 24                         <li class="active"><a href="#">Home</a></li>
 25                         <li class="dropdown-toggle"><a href="#" data-toggle="dropdown">Page1</a>
 26                         <ul class="dropdown-menu">
 27                             <li><a href="#">Item1</a></li>
 28                             <li><a href="#">Item2</a></li>
 29                             <li><a href="#">Item3</a></li>
 30                         </ul>
 31                         </li>
 32                         <li><a href="#">Page2</a></li>
 33                         <li><a href="#">Page3</a></li>
 34                         <li><a href="#">Page4</a></li>
 35                     </ul>
 36                 </div>
 37                 <div class="col-md-2">
 38                     <div class="input-group">
 39                         <input type="text" class="form-control" placeholder="搜索">
 40                    <span class="input-group-btn">
 41                        <button class="btn btn-info" type="button">Go</button>
 42                    </span>
 43                     </div>
 44                     <div>
 45                     </div>
 46                 </div>
 47             </div>
 48         </div>
 49     </nav>
 50 </div>
 51 <!--随鼠标滚动的nav标签End-->
 52 <!--面包屑导航start-->
 53 <div class="container">
 54     <div class="row">
 55         <div class="col-md-6">
 56             <ol class="breadcrumb">
 57                 <li><a href="#">Home</a></li>
 58                 <li><a href="#">Show</a></li>
 59                 <li class="active">Details</li>
 60             </ol>
 61         </div>
 62     </div>
 63 </div>
 64 <!--面包屑导航end-->
 65 <!--侧边栏导航start-->
 66 <div class="col-md-10 col-md-offset-1">
 67     <ul class="nav nav-tabs">
 68         <li><a data-toggle="tab" href="#tab1">list1</a>
 69         <li><a href="#tab2" data-toggle="tab">list2</a></li>
 70         <li><a href="#tab3" data-toggle="tab">list3</a></li>
 71     </ul>
 72     <div class="tab-content">
 73         <div class="tab-pane fade" id="tab1"><h2>list1中内容</h2></div>
 74         <div class="tab-pane fade" id="tab2"><h2>list2中内容</h2></div>
 75         <div class="tab-pane fade" id="tab3"><h2>list3中内容</h2></div>
 76     </div>
 77 </div>
 78 <!--侧边栏导航end-->
 79 <div class="container">
 80     <ul class="nav nav-tabs">
 81         <li><a href="#tabs1"data-toggle="tab">tab1</a></li>
 82         <li><a href="#tabs2" data-toggle="tab">tab2</a></li>
 83         <li><a href="#tabs3" data-toggle="tab">tab3</a></li>
 84     </ul>
 85     <div class="tab-content">
 86         <div class="tab-pane" id="tabs1"><h3>tabs1</h3></div>
 87         <div class="tab-pane" id="tabs2"><h3>tabs2</h3></div>
 88         <div class="tab-pane" id="tabs3"><h3>tabs3</h3></div>
 89     </div>
 90 </div>
 91 <article>
 92     <!--分页start-->
 93     <ul class="pagination pagination-lg">
 94         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-menu-left"></span></a></li>
 95         <li class="active"><a href="#">1</a></li>
 96         <li><a href="#">2</a></li>
 97         <li><a href="#">3</a></li>
 98         <li><a href="#">4</a></li>
 99         <li><a href="#">5</a></li>
100         <li><a href="#"><span class="glyphicon glyphicon-menu-right"></span></a></li>
101     </ul>
102     <!--分页end-->
103 </article>
104 <article>
105     <ul class="pager">
106         <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>前一篇</a></li>
107         <li class="next"><a href="#">后一篇<span aria-hidden="true">&rarr;</span></a></li>
108     </ul>
109 </article>
110 <div class="container">
111     <h3>Version<label class="label label-default">New</label></h3>
112     <button type="button" class="btn btn-primary">more <span class="badge">5</span></button>
113 </div>
114 <div class="jumbotron">
115     <div class="container">
116         <h1>WelCome</h1>
117         <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
118         <p><a href="#" class="btn btn-primary">more Info</a> </p>
119     </div>
120 </div>
121 <div class="container">
122     <div class="row">
123         <div class="col-xs-6 col-md-3">
124             <a href="#" class="thumbnail"><img src="http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg" alt=""/></a>
125             <div class="caption">
126                 <h3>Nice Eyes</h3>
127                 <p>balabalabala.....</p>
128             </div>
129         </div>
130     </div>
131 </div>
132 <div class="alert alert-danger alert-dismissable">
133     <button type="button" class="close" data-dismiss="alert">close<span class="glyphicon glyphicon-remove"></span></button>
134     <span class="glyphicon glyphicon-alert"></span><p>Danger!</p>
135     <p>Don't Touch if Break</p>
136 </div>
137 <div class="progress">
138     <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%;">
139         <span>40%</span>
140     </div>
141 </div>
142 <div class="media">
143     <div class="media-left">
144         <a href="#">
145             <img src="#" alt="" class="media-object"/>
146         </a>
147     </div>
148     <div class="media-body">
149         <h4 class="media-heading">Heading............</h4>
150     </div>
151 </div>
152 <div class="embed-responsive-16by9">
153     <video class="embed-responsive-item" src="http://v.baidu.com/link?url=dm_00pw_klemzFrMIr-E5gWV_F8l9vmTZFVv2mYSHVpDTklzO99cDEQZTkEC31rt5pZRhkm_5SZIbqsM2Kp9n1KnwnbY."></video>
154 </div>
155 <div>
156     <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">弹出</button>
157 </div>
158 <div class="modal fade" id="myModal" role="dialog">
159     <div class="modal-dialog modal-lg" aria-hidden="true">
160         <div class="modal-content">
161             <div class="modal-header">
162                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
163                 <h4 class="modal-title">Modal Title</h4>
164             </div>
165             <div class="modal-body">
166                 <p>One fine body&hellip;</p>
167             </div>
168             <div class="modal-footer">
169                 <button type="button" class="btn btn-default" data-dismiss="modal">YES</button>
170             </div>
171         </div>
172     </div>
173 </div>
174 <div class="container container-fixed" >
175     <form class="form-group">
176         <div class="input-group">
177             <label for="name" class="label-primary">Name</label>
178             <input type="text" id="name"/>
179         </div>
180         <div class="input-group">
181             <label for="pwd" class="label-primary">Password</label>
182             <input type="password" id="pwd"/>
183         </div>
184         <div class="input-group">
185             <label for="email" class="label-primary">Email</label>
186             <input type="email" id="email"/>
187         </div>
188     </form>
189 </div>
190 <div class="btn-toolbar text-center">
191     <div class="btn-group">
192       <button type="button" class="btn-default"><span class="glyphicon glyphicon-backward"></span></button>
193         <button type="button" class="btn-default"><span class="glyphicon glyphicon-forward"></span> </button>
194     </div>
195     <div class="btn-group">
196         <button class="btn-default" type="button"><span class="glyphicon glyphicon-stop"></span></button>
197         <button class="btn-default" type="button"><span class="glyphicon glyphicon-pause"></span></button>
198     </div>
199 </div>
200 <script type="text/javascript" src="js/jquery.min.js"></script>
201 <script type="text/javascript" src="js/bootstrap.min.js"></script>
202 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
203 </body>
204 </html>

接下来是毛坯页面前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <title></title>
</head>
<body>
<!--顶部菜单-->
<div class="nav navbar-fixed-top" id="topmenu" style="background-color: #CCCCCC">
        <div class="row">
          <div class="col-md-2 col-xs-4 ">
              <a href="#"><img src="美联英语在线VIP-resource/icon-weibo.png" alt=""/>微博</a>
              <a href="美联英语在线VIP-resource"><img src="美联英语在线VIP-resource/icon-wechat.png">微信</a>
          </div>
            <div class="col-md-2 col-xs-4 ">
                400-777-8828
            </div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-2 col-xs-4 "><a href="#">在线咨询</a></div>
            <div class="col-md-4 col-xs-6 col-md-offset-2">
                <span class="col-xs-3">
                 <a class="btn btn-primary" href="#">登陆</a>
                </span>
                <span class="col-xs-3">
                    <a class="btn btn-danger" href="#">免费注册</a>
                </span>
            </div>
        </div>
    </div>
<!--导航条-->
<div class="container-fluid" id="navbar">
    <nav class="nav navbar-default">
        <div class="nav navbar-header">
            <div class="navbar-brand"><a href="#"><img src="美联英语在线VIP-resource/logo_07.png"></a></div>
        </div>
        <div class="collapse navbar-collapse navbar-right ">
            <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>
                <li><a href="#">美粉之家</a></li>
                <li><a href="#">在线购买</a></li>
                <li><a href="#">免费讲堂</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">更多栏目<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">预定体验</a></li>
                    <li><a href="#">英语胶囊</a></li>
                    <li><a href="#">精彩动态</a></li>
                </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>
<!--幻灯片-->
<div id="carousel-show" class="carousel slide">
    <!--原点导航-->
   <ol class="carousel-indicators">
       <li data-target="#carousel-show" data-slide-to="0" class="active"></li>
       <li data-target="#carousel-show" data-slide-to="1"></li>
       <li data-target="#carousel-show" data-slide-to="2"></li>
       <li data-target="#carousel-show" data-slide-to="3"></li>
   </ol>
    <!--图片内容-->
    <div class="carousel-inner">
        <div class="item active">
            <img src="美联英语在线VIP-resource/bnshow1.png" alt="" class="center-block"/>
            <div class="carousel-caption">
                <!--浮动在图片上的内容-->
            </div>
        </div>
        <div class="item">
            <img src="美联英语在线VIP-resource/bnshow2.jpg" alt="" class="center-block"/>
            <div class="carousel-caption">
                <blockquote>
                    <p>语言，是认知世界的工具！小美，是认知世界的伙伴！</p>
                </blockquote>
            </div>
        </div>
        <div class="item">
            <img src="美联英语在线VIP-resource/bnshow3.jpg" alt="" class="center-block"/>
            <div class="carousel-caption">
                <!--浮动在图片上的内容-->

            </div>
        </div>
        <div class="item">
            <img src="美联英语在线VIP-resource/bnshow4.jpg" alt="" class="center-block"/>
            <div class="carousel-caption">
                <!--浮动在图片上的内容-->
            </div>
        </div>
    </div>
    <!--左右按钮-->
    <a class="left carousel-control" href="#carousel-show" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#carousel-show" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!--内容页-->
<div id="content" class="container">
    <div class="row">
        <img src="美联英语在线VIP-resource/page2-title.png" alt="" class="center-block" style="padding: 70px"/>
    </div>
    <div class="row">
    <div class="col-sm-3 col-xs-6"><img src="美联英语在线VIP-resource/page2-01.jpg" alt="" class="img-rounded img-responsive"  /></div>
        <div class="col-sm-3 col-xs-6"style="margin: 0px auto"><img src="美联英语在线VIP-resource/page2-02.jpg" alt="" class="img-rounded img-responsive" /></div>
        <div class="col-sm-3 col-xs-6"style="margin: 0px auto"><img src="美联英语在线VIP-resource/page2-03.png" alt="" class="img-rounded img-responsive" /></div>
        <div class="col-sm-3 col-xs-6"style="margin: 0px auto"><img src="美联英语在线VIP-resource/page2-04.jpg" alt="" class="img-rounded img-responsive" /></div>
    </div>
    <div class="row">
        <div class="col-sm-3 col-xs-6"><img src="美联英语在线VIP-resource/page2-05.jpg" alt="" class="img-rounded img-responsive"/></div>
        <div class="col-sm-3 col-xs-6"><img src="美联英语在线VIP-resource/page2-06.png" alt="" class="img-rounded img-responsive"/></div>
        <div class="col-sm-3 col-xs-6"><img src="美联英语在线VIP-resource/page2-07.jpg" alt="" class="img-rounded img-responsive"/></div>
        <div class="col-sm-3 col-xs-6"><img src="美联英语在线VIP-resource/page2-08.jpg" alt="" class="img-rounded img-responsive"/></div>
    </div>
</div>
<!--视频内容部分-->
<div class="container" style="margin-top: 50px;background-color: #FFF68F">
    <div class="row" style="margin-top: 30px">
        <img class="center-block img-responsive" src="美联英语在线VIP-resource/page3-title.png" alt=""/>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="media">
            <div class="media-left media-middle">
                <a href="#"><img class="media-object" style="zoom: 0.7" src="美联英语在线VIP-resource/page3-01.jpg" alt=""/></a>
            </div>
            <div class="media-body">
                <ul>
                    <li><h4>课程名称：Shopping malls have everything</h4></li>
                    <li><h4>课程级别：L4</h4></li>
                    <li><h4>课程主题：平常生活</h4></li>
                </ul>
            </div>
            <div class="media-right">
                <a href="#"><img src="美联英语在线VIP-resource/video_play_btn.png"></a>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="media">
            <div class="media-left media-middle">
                <a href="#"><img class="media-object" style="zoom: 0.7" src="美联英语在线VIP-resource/page3-01.jpg" alt=""/></a>
            </div>
            <div class="media-body">
                <ul>
                    <li><h4>课程名称：Shopping malls have everything</h4></li>
                    <li><h4>课程级别：L4</h4></li>
                    <li><h4>课程主题：平常生活</h4></li>
                </ul>
            </div>
            <div class="media-right">
                <a href="#"><img  src="美联英语在线VIP-resource/video_play_btn.png"></a>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="media">
            <div class="media-left media-middle">
                <a href="#"><img class="media-object" style="zoom: 0.7" src="美联英语在线VIP-resource/page3-01.jpg" alt=""/></a>
            </div>
            <div class="media-body">
                <ul>
                    <li><h4>课程名称：Shopping malls have everything</h4></li>
                    <li><h4>课程级别：L4</h4></li>
                    <li><h4>课程主题：平常生活</h4></li>
                </ul>
            </div>
            <div class="media-right">
                <a href="#"><img src="美联英语在线VIP-resource/video_play_btn.png"></a>
            </div>
        </div>
    </div>
    <div class="row" style="margin:30px auto">
        <div class="text-center">
            <a class="btn btn-primary" href="#" >查看更多</a>
        </div>
    </div>
</div>
<!--teacher content-->
<div class="container">
    <div class="row" style="margin-top: 30px">
        <img src="美联英语在线VIP-resource/page4-title.png" alt="" class="center-block img-responsive"/>
    </div>
    <div class="row" style="margin-top: 20px">

    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

能够chrome的控制台中选择不一样的设备型号，看看响应式布局在不一样尺寸的屏幕中如何依然保持良好的可读性，这也是bootstrap的强大之一java

刚开始学bootstrap，对于其强大特性，还需深挖啊！！！jquery