返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: bootstrap >

bootstrap按钮,选项卡和企业官网制作

2020-05-19 文章标签: bootstrap教程 浏览次数:

我们来介绍Bootstrap,从基础的Bootstrap的版本,基础语法结构,到页面的制作,让您快速上手熟悉Bootstrap制作页面,Bootstrap的好处就是一个页面,兼容多个终端设置,17寸显示器,21寸显示器,27寸显示器,手机4.7寸屏幕,5.0寸屏幕 等等

Bootstrap教程

今天介绍用bootstrap制作一个按钮和网站选项卡的效果

我们先用Bootstrap制作一个按钮

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap文档模板</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <!-- 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.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="text-center">
    <h1 class="btn btn-success btn-large"><i class="glyphicon glyphicon-user"></i>  Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>

我们在用Bootstrap制作一个选项卡

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs组件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://freemuban.com/js/bootstrap/css/bootstrap.css" rel="stylesheet"  type="text/css">
<link href="http://freemuban.com/js/bootstrap/css/bootstrap-theme.css" rel="stylesheet"  type="text/css">
<style type="text/css">
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Chart.js</a></li>
<li><a href="#tab2" data-toggle="tab">grumble.js</a></li>    
<li><a href="#tab3" data-toggle="tab">Sco.js</a></li> 
<li><a href="#tab4" data-toggle="tab">Headroom.js</a></li>       
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><img src="//freemuban.com/js/519/1.png"></div>
<div class="tab-pane" id="tab2"><img src="//freemuban.com/js/519/2.png"></div>
 <div class="tab-pane" id="tab3"><img src="//freemuban.com/js/519/3.png"></div>
 <div class="tab-pane" id="tab4"><img src="//freemuban.com/js/519/4.png"></div>      
</div> 
</div>
<script type="text/javascript">
$(function(){
$('.tabs a:last').tab('show')
})
</script>
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="http://freemuban.com/js/bootstrap/js/bootstrap.min.js"></script>
<script src="http://freemuban.com/js/bootstrap/js/bootstrap-tab.js"></script>
</body>
</html>

我们在用bootstrap企业网站做一个简单的企业网站介绍


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>联想控股</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://freemuban.com/js/bootstrap/css/bootstrap.css" rel="stylesheet"  type="text/css">
<link href="http://freemuban.com/js/bootstrap/css/bootstrap-theme.css" rel="stylesheet"  type="text/css">
<style type="text/css"> 
div.jumbotron {
    background: url(//freemuban.com/js/519/bg.png) no-repeat;
    height: 443px;
    width: 980px;
    position: relative;
    padding: 0;
    margin: 0;
    border-color: gray;
}
div.jumbotron h1 {
    display: none;
}
div.jumbotron .banner {
    position: absolute;
    bottom: 0;
    left: 10px;
}
div.jumbotron .btn {
    position: absolute;
    bottom: 14px;
    right: 20px;
}
div.col-md-4 img { 
    width: 180px;
}
</style>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>联想控股</h1>
        <p class="banner"><img src="//freemuban.com/js/519/bg2.png"></p>
        <p><a href="#" class="btn btn-primary btn-lg">更多&raquo;</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>公司专题</h2>
            <p>2013年12月2日,联想之星创业大讲堂在常州举行,柳传志就“创业一把手的成长”、“创业团队的建设”与创业者进行分享。</p>
            <p><a class="btn btn-primary" href="#">了解更多&raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>特别关注</h2>
            <p>从靠“卖电脑”起家,到旗下集IT、房地产、消费与现代服务、化工新材料、现代农业五大核心资产运营于一体。</p>
            <p><a class="btn btn-primary" href="#">了解更多&raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>我们的历史</h2>
            <p><img src="//freemuban.com/js/519/bg1.png"></p>
            <p><a class="btn btn-primary" href="#">了解更多&raquo;</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <p>&copy; Company 2020</p>
    </footer>
</div>
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="http://freemuban.com/js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>联想控股</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://freemuban.com/js/bootstrap/css/bootstrap.css" rel="stylesheet"  type="text/css">
<link href="http://freemuban.com/js/bootstrap/css/bootstrap-theme.css" rel="stylesheet"  type="text/css">
<style type="text/css">
</style>
</head> 
<body>
<div>
    <div>
        <h1>联想控股</h1>
        <p><img src="//freemuban.com/js/519//bg2.png"></p>
        <p><a href="#">更多&raquo;</a></p>
    </div>
    <div>
        <div>
            <h2>公司专题</h2>
            <p>2013年12月2日,联想之星创业大讲堂在常州举行,柳传志就“创业一把手的成长”、“创业团队的建设”与创业者进行分享。</p>
            <p><a href="#">了解更多&raquo;</a></p>
        </div>
        <div>
            <h2>特别关注</h2>
            <p>从靠“卖电脑”起家,到旗下集IT、房地产、消费与现代服务、化工新材料、现代农业五大核心资产运营于一体。</p>
            <p><a href="#">了解更多&raquo;</a></p>
        </div>
        <div>
            <h2>我们的历史</h2>
            <p><img src="//freemuban.com/js/519/bg1.png"></p>
            <p><a href="#">了解更多&raquo;</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <p>&copy; Company 2020</p>
    </footer>
</div>
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="http://freemuban.com/js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。