2016-10-23 14:43:39 ofsno 阅读数 5845
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间。这次用bootstrap写的这个demo前后大概用了2天多,不得不承认,bootstrap框架真的是一款很好用的前端框架,它甚至可以让不懂设计的人员作出简洁的web网页。
简单的来介绍一下bootstrap。
1.它是一套简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
2.基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。

我这次写的是守望先锋游戏的一个官网页面,当学习了差不多的时候,我不知道该写什么样的demo ,看了慕课网的一个例子,大致有了想法,于是我打开了守望先锋的官网(不要问我为什么会打开…)突然就有了灵感,我发现官网的页面布局很像bootstrap中的一些布局,然后就确定了自己要写的方向。

刚开始是有很多想法的,但由于时间限制和所学知识不够,最终只用学到的bootstrap完成了50%左右,并且也很简易。最终的效果我就先不展示了。还是先说下这次遇到的一些问题吧。
1.首先个人觉得用纯粹用bootstrap写一个简易大方的网页,没有一点问题,但是要写一个布局完善,功能多样的网页还是有点困难的,因为这次写的这个简单网页,我也是加了很多自己的代码修饰。
2.另外,如果担心用它所提供的响应式的代码没用自己想的效果,最好还是自己写一下。
3.最后,还有一个问题没有解决。
这里写图片描述
了解更多按钮的下面莫名的多了“黑百合”这部分,还在找问题当中..

总的来说,学了bootstrap对自己的帮助还是特别大的,写网页时能简化很多。

2015-02-28 23:41:26 ouyida3 阅读数 1480
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

我的第一个bootstrap页面--把现有网页转为bootstrap网页。

原网页:


改后网页:


改后代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head jwcid="@wade:Head" >
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>存量用户导入</title>
<!-- --><link jwcid="@wade:Style" href="component/styles/styles_all.css" rel="stylesheet" type="text/css" media="screen"/>
<link jwcid="@wade:Style" href="component/styles/styles_content.css" rel="stylesheet" type="text/css" media="screen"/>

<!-- Bootstrap core CSS -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

<script jwcid="@wade:Script" type="text/javascript" src="scripts/program/programSale.js"></script>

</head>
<body jwcid="@Body">
  <form jwcid="@Form" enctype="multipart/form-data">
    <div class="popwrapper">

      <div class="alert alert-warning" role="alert" id="tishi" style="display:none">文件正在入库处理中,请耐心等候...,在弹出提示前请不要关闭页面!谢谢.</div>

      <div class="alert alert-info" role="alert">请上传要导入的数据文件</div>

      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title" style="font-size: 14px">插入类型</h3>
        </div>
        <div class="panel-body">
          <select name="queryType" id="queryType">
            <option value="0">实时</option>
            <option value="1">模拟</option>
          </select>
        </div>
      </div>

      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title" style="font-size: 14px">导入TXT文件</h3>
        </div>
        <div class="panel-body">
          <a class="btn-xs" href="attach?file_name=TXT模板及说明.rar&file_path=/salemanm_templet/basicupload/NumberTemplateDescription.rar" target="printframe">导入文件模版</a> <input
            type="file" id="FILE_PATH_TXT" name="FILE_PATH_TXT" desc="导入文件" class="一行数据" /> <br>

            <table border=0>
              <tr>
                <td style="PADDING: 10px;"><input type="submit" class="btn btn-sm btn-info" jwcid="aquery@Submit" value="  导入  " listener="ognl:listeners.dataImportByTxt"
                  onclick="if(getFileSize(document.all('FILE_PATH_TXT').value)){return confirmForm(this)}else{return false;};" /></td>
                <td>
                  <div class="alert alert-danger" style="padding: 5px;margin-bottom: 0px;display: none;" id="file_warning" role="alert">
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 请先选择需要上传的文件
                  </div>
                </td>
              </tr>
            </table>
          </div>
      </div>
      
      <span jwcid="@wade:PageData" />
      </div>
  </form>

  <script>
  	function slideStatus() {
  		if ($("#tishi").is(":hidden")) {
  			$("#tishi").slideDown("slow");
  		} else {
  			$("#tishi").hide();
  		}
  	}
  	
  	function slideWarning()
  	{
  		$("#file_warning").slideDown("slow");
  	}
  
  	function getFileSize(filename) {
  		// var filename = document.all('FILE_PATH').value; //获得上传文件的物理路径
  		if (filename == '') {
  			slideWarning();
  			return false;
  
  		} else {
  			var strRegex = "(.txt)$"; //用于验证扩展名的正则表达式
  			var re = new RegExp(strRegex);
  			if (!re.test(filename.toLowerCase())) {
  				alert("文件名不合法,文件的扩展名必须为.txt格式");
  				slideStatus();
  
  				return false;
  			} else {
  				return true;
  			}
  		}
  	}
  </script>
</body>
</html>

注意事项:

1、下拉框找了很久,没找到;FlatUI里有,但是里面有很多js的实现,迁移过来报错,未解决因此没用;而且是metro风格,用了flatui,就不能用原生的bootstrap,以免风格不统一;

2、fileupload未找到bootstrap的实现,因此暂没改;

3、不太懂怎么改css,所以这么写:<h3 class="panel-title" style="font-size: 14px">导入TXT文件</h3>,我自己感觉比较恶心;

4、不知道bootstrap有否table的实现,所以我这里自己写了table,不好看;

5、这里暂时用到了bootstrap的panel、button、alert;

后续改进点:

1、doctype不要xhtml;改html标签属性;改meta;

2、去掉没用的js引用;

3、学习、优化上述5点还不太懂的内容;

本文出处:http://blog.csdn.net/ouyida3/article/details/43992795

2015.2.28

2016-04-28 13:41:00 weixin_34384681 阅读数 9
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

bootstrap主要的几个网站

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

转载于:https://www.cnblogs.com/lilyxue/p/5442359.html

2017-03-30 09:41:11 yingzizizizizizzz 阅读数 980
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

        这几天一直在看bootstrap框架的基础,学到一半发现,其实你再看的多,忘得其实也多,还不如实打实的多练习练习,所以我义无反顾的用Bootstrap框架写了一个页面。完成的功能有一下几点:

  • 导航栏
  • 下拉菜单
  • 图片轮播
  • 三栏布局
  • 标签页
  • 返回顶部
  • 弹出框

这些功能参照菜鸟教程,Bootstrap中文官网点击打开链接以及慕课网的基于Bootstrap的网页开发教程完成的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <title>现代浏览器博物馆</title>
    <style>
        body{
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .carousel{
            height: 500px;

        }
        .carousel .item{
            height:500px;
            background-color: #000000;
        }
        .carousel img{
            width: 100%;
        }
        .carousel-caption p{
            font-size: 20px;
            margin-bottom: 20px;
            line-height:1.8;
        }
        #summary-container .col-md-4{
            text-align: center;
            margin-top: 60px;
        }
        .divider{
            margin: 40px 0px;
        }

        .feature{
            padding:30px 0px;
        }
        .feature-heading{
            font-size: 50px;
            color: #2a6496;
            margin-top: 120px;
        }
        .feature-heading .text-muted{
            font-size: 28px;
        }

        /* 响应式布局,没有这个字不会随着浏览器的改变而改变 */

        @media (max-width: 768px) {

            .summary {
                padding-right: 3px;
                padding-left: 3px;
            }

            .carousel {
                height: 300px;
                margin-bottom: 30px;
            }

            .carousel .item {
                height: 300px;
            }

            .carousel img {
                min-height: 300px;
            }

            .carousel-caption p {
                font-size: 16px;
                line-height: 1.4;
            }

            .feature-heading {
                font-size: 34px;
            }

            .feature-heading .text-muted {
                font-size: 22px;
            }
        }

        @media (min-width: 992px) {
            .feature-heading {
                margin-top: 120px;
            }
        }
    </style>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">综述</a></li>
                <li><a href="#summary-container">简述</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        特点 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" id="dropdown-tab">
                        <li><a href="#tab-chrome">Chrome</a></li>
                        <li><a href="#tab-Firefox">FireFox</a></li>
                        <li><a href="#tab-Opera">Opera</a></li>
                        <li><a href="#tab-Safari">Safari</a></li>
                        <li><a href="#tab-IE">IE</a></li>
                    </ul>
                </li>
                <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
            </ul>
        </div>
    </div>
</nav><!--导航栏完成-->
<!--图片轮播 问题:浏览器缩小后字缩小不了,并且还有黑色;解决:添加响应式布局-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 轮播(Carousel)指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
    <!-- 轮播(Carousel)项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/chrome-big.jpg" alt="Chrome">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Chrome</h1>

                    <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
                          role="button" target="_blank">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/firefox-big.jpg" alt="FireFox">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Firefox</h1>

                    <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/opera-big.jpg" alt="Opera">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Opera</h1>

                    <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/safari-big.jpg" alt="Safari">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Safari</h1>

                    <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/ie-big.jpg" alt="IE">
            <div class="container">
                <div class="carousel-caption">
                    <h1>IE</h1>

                    <p>Internet Explorer,简称 IE,是微软公司推出的一款网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--图片轮播结束-->

<div class="container summary">

    <!-- 简介 -->
    <!--三栏布局-->
    <div class="row" id="summary-container">
        <div class="col-md-4">
            <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome">

            <h2>Chrome</h2>

            <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/firefox-logo-small.jpg" alt="firefox">

            <h2>Firefox</h2>

            <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/safari-logo-small.jpg" alt="safari">

            <h2>Safari</h2>

            <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
    </div>
    <!--三栏布局结束-->
    <hr class="divider">
    <!--标签页-->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab-chrome" aria-controls="tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
        <li role="presentation"><a href="#tab-Firefox" aria-controls="tab-Firefox" role="tab" data-toggle="tab">Firefox</a></li>
        <li role="presentation"><a href="#tab-Opera" aria-controls="tab-Opera" role="tab" data-toggle="tab">Opera</a></li>
        <li role="presentation"><a href="#tab-Safari" aria-controls="tab-Safari" role="tab" data-toggle="tab">Safari</a></li>
        <li role="presentation"><a href="#tab-IE" aria-controls="tab-IE" role="tab" data-toggle="tab">IE</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab-chrome">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">Google Chrome <small
                            class="text-muted">使用最广的浏览器</small></h2>

                    <p class="lead">Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5" >
                    <img src="images/chrome-logo.jpg" alt="chrome">
                </div>
            </div>
        </div>
        <div role="tabpane2" class="tab-pane" id="tab-Firefox">
            <div class="row feature">
                <div class="col-md-5" >
                    <img src="images/firefox-logo.jpg" alt="chrome">
                </div>
                <div class="col-md-7">
                    <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>
                    </h2>

                    <p class="lead">Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器,
                        使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
        </div>
        <div role="tabpane3" class="tab-pane" id="tab-Opera">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">Google Chrome <small
                            class="text-muted">使用最广的浏览器</small></h2>

                    <p class="lead">Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5" >
                    <img src="images/opera-logo.jpg" alt="chrome">
                </div>
            </div>
        </div>
        <div role="tabpane4" class="tab-pane" id="tab-Safari">
            <div class="row feature">
                <div class="col-md-5" >
                    <img src="images/safari-logo.jpg" alt="chrome">
                </div>
                <div class="col-md-7">
                    <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>
                    </h2>

                    <p class="lead">Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器,
                        使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
        </div>
        <div role="tabpane5" class="tab-pane" id="tab-IE">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">Google Chrome <small
                            class="text-muted">使用最广的浏览器</small></h2>

                    <p class="lead">Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5" >
                    <img src="images/ie-logo.jpg" alt="chrome">
                </div>
            </div>
        </div>
    </div>
    <!--标签页结束-->
    <hr class="divider">
    <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>&copy; 2014 慕课网</p>
    </footer>



    <!--关于 弹出框(模态框)-->
    <div class="modal fade" tabindex="-1" role="dialog" id="about">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">关于</h4>
                </div>
                <div class="modal-body">
                    <p>慕课网隶属于北京慕课科技中心(有限合伙),是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神,
                        将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
       $(".dropdown-menu a").click(function () {
           var href=$(this).attr("href");
           $("#dropdown-tab a[href='"+href+"']").tab('show');
       });
    });

</script>
</body>
</html>


最后发现,其实写一个网页并不难,不要将框架想的有多复杂,框架的目的不就是方便我们进行开发的嘛……加油

Bootstrap
2019-11-01 11:51:56 TT15751097576 阅读数 9
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

Bootstrap

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a7mcaoTr-1572580051849)(C:\Users\tt\AppData\Roaming\Typora\typora-user-images\1572526826283.png)]

概念:

Bootstrap是Twitter退出的一个用前端开发发的开源框架,是一个做网页的框架(目前最流行的web前端框架),就是说你只需要写HTML标签就可以调用它的类,就可以快速的做一个高大上的网页(非常漂亮的样式网页)。

使用:

bootstrap对css样式进行了简单的封装,通过class呈现给开发者使用,是开发更为便捷,但是仍需要了解class如何被实现。

容器:

容器用来包裹其他元素。有两种容器。

  • . container : 对于不同的设备屏宽又相应的固定宽度,并且居中容器。
  • . container - fluid : 占据所有屏宽(width:100%)
  • 可以出现多个容器,但容器不应该被其他元素包含。

网格布局:

bootstrap4的网格布局是基于flexbox的,将宽度分为12等份(列),一列中元素可以分为不同等份(列),但加起来共12份(列)。

每一行的容器使用 .row 标识,行容器中元素使用如下class标识在不同环境下占据空间比例:

  • . col [ - * ] :样式(比例)引用与笑设备(如手机)机器大设备。

  • . col - sm [ - * ] : 样式(比例)应用于屏宽 >=567px的设备(如 平板),否则,每个元素占据整行(width:100%)

  • . col - md [ - * ] : 样式(比例)应用于屏宽 >= 768px的设备(如 笔记本),否则,每个元素占据整行(width:100%)

  • . col - lg [ - * ] : 样式(比例)应用于屏宽 >= 992px的设备,否则,每个元素占据整行(width : 100%)

  • . col - xl [ - * ] : 样式(比例)应用于屏宽 >=1200px的设备,否则,每个元素占据整行(width :100%)

    其中 * 表示元素的比例,不指定比例表示所有元素等宽。

<div class="row">
	<div class="col-sm-4 col-10">column 1</div>
	<div class="col-sm-8 col-2">column 2</div>
</div>

在平板设备上,.col - * 和 . col - sm - * 样式都作用,但只有 .col - sm - * 生效,因为bootstrap.css中 . col - sm - * 的媒体查询非匹配。注意,于class中的书写顺序无关。

注意:下面说到响应时,他的样式规则于玩个够布局差不多!!!

文字排版:

bootstrap使用新的样式覆盖了元素的默认全样式,并且提供了对应于文本样式的class。只是简单的css样式对应关系而已

  • test - center 或 test - [ sm | md | lg | xl ] -center : 剧中文字,同时也是响应式的。

颜色:

前景颜色的class以text为前缀:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wmw4N1Z5-1572580051851)(C:\Users\tt\AppData\Roaming\Typora\typora-user-images\1572530240286.png)]

表格:

首先 form 元素使用 class . table,其他关于表格外观的class置于 . table 之后,如:

.table-striped:The .table-striped class adds zebra-stripes to a table
.table-bordered:The .table-bordered class adds borders on all sides of the table and cells:
.table-hover:The .table-hover class adds a hover effect (grey background color) on table rows
.table-dark:The .table-dark class adds a black background to the table
.table-hover:The .table-hover class adds a hover effect (grey background color) on table rows
.table-sm:The .table-sm class makes the table smaller by cutting cell padding in half

如果表格列太长,导致页面过宽呢?可以使用.table-responsive,但是我觉得太丑了,建议使用在form元素上css样式overflow-x: auto;

Utilities:

bootstrap包含很多无需css代码而style元素样式的class:

.border或.border-[ top | right | bottom | left ]:添加对应边框,class后面加-0表示删除对应边框
边框颜色:class以border开始,如border-primary、border-sesondary…
.rounded:添加圆角
rounded-circle:即border-radius:50%!important;

Bootstrap 页面模板

阅读数 1357

Bootstrap 页面模板

博文 来自: Silent_Paladin

bootstrap模板网站

阅读数 4845

BootStrap几个功能

阅读数 5

Bootstrap网页模板

阅读数 1985

没有更多推荐了,返回首页