bootstrap的使用

最新推荐文章于 2022-09-18 11:36:42 发布

artemisrj

最新推荐文章于 2022-09-18 11:36:42 发布

阅读量430

点赞数 1

分类专栏： css 文章标签： bootstrap

本文链接：https://blog.csdn.net/artemisrj/article/details/50403090

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

看到大家都用 bootstrap
http://v3.bootcss.com/getting-started/

首先是下载
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

然后，基本的模板是。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

这里只是介绍了引用bootstrap构架的模块

然后是流式栅格系统。分成12列。http://v3.bootcss.com/css/

最简单的构架是

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

用来横向的布局。

看到有人用panel

<div class="col-sm-4 no-padding">
            <div class="panel panel-default">
                  <div class="panel-heading"> title</div>
                  <div class="panel-body"></div>      
            </div>
</div>

这里是用来复制的代码片233333

<div class="panel panel-default">
    <div class="panel-heading"> title</div>
    <div class="panel-body"></div>    
</div>

artemisrj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap的使用

看到大家都用 bootstrap http://v3.bootcss.com/getting-started/首先是下载 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bo
复制链接

扫一扫

专栏目录