欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Bootstrap前端开发框架使用

程序员文章站 2022-08-07 22:50:46
Bootstrap前端开发框架推荐学习网址中文官网：http://www.bootcss.com/官网：http://getbootstrap.com推荐使用：http://bootstrap.css88.com/Bootstrap 使用1、建议目录结构2、html骨架

Bootstrap前端开发框架

推荐学习网址

Bootstrap 使用

1、建议目录结构

Bootstrap前端开发框架使用

2、html骨架

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    内容
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

3、栅格前缀分类

~ 超小屏幕(手机)
<768px		 小屏设备(平板)
>=768px		 中等屏幕(PC)
>=992px		 宽屏设备
>=1200px
.container最大宽度 自动(100%) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-

4、栅格嵌套表格(注意细节)

<div class="row">
        <div class="col-md-4">
            <!-- 最好增加row行，这样可以取消父元素的padding，且高度和父级一样 -->
            <div class="row">
                <!-- 也是将父容器分12等分 -->
                <div class="col-md-6">a</div>
                <div class="col-md-6">b</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>

Bootstrap前端开发框架使用

5、栅格-列偏移

   <div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 col-md-offset">右侧</div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">中间</div>
        </div>
    </div>

Bootstrap前端开发框架使用

6、栅格-列排序

   <div class="container">
        <div class="row">
            <!-- 将左侧的盒子-推到右侧8个位置 -->
            <div class="col-md-4 col-md-push-8">左侧</div>
            <!-- 将右侧的盒子-拉回右侧4个位置 -->
            <div class="col-md-4 col-md-pull-4">右侧</div>
        </div>
    </div>

Bootstrap前端开发框架使用

7、响应式工具

类名 隐藏屏幕尺寸
.hidden-xs 超小屏
.hidden-sm 小屏
.hidden-md 中屏
.hidden-lg 大屏

相反，类名：visible-xs visible-sm visible-md visible-lg

8、修改container的最大宽度为1280px

@media screen and (min-width:1280px){
    .container{
        width: 1280px;
    }
}

9、图标使用

// 直接复制图标编码到对应元素
<div class="nav">
    <a href="#" class="glyphicon glyphicon-camera">照相机</a>
</div>

效果如下：
Bootstrap前端开发框架使用
调整样式：

.nav a::before{
    vertical-align: middle;
    padding-right: 5px;
}

效果如下：
Bootstrap前端开发框架使用

本文地址：https://blog.csdn.net/Asia1752/article/details/109255406

相关标签： Web前端技术 1024程序员节 Bootstrap使用 Bootstrap栅格 栅格列偏移排序 响

上一篇： 快手AR变脸是什么?快手app AR尬脸舞怎么玩？

下一篇： 猫眼电影已购买的电影票怎么退票?

推荐阅读