使用bootstrap总结

最新推荐文章于 2023-07-10 17:18:02 发布

爱代码也爱生活

最新推荐文章于 2023-07-10 17:18:02 发布

阅读量1.9k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/nuli888/article/details/51831171

版权

web前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

bootstrap是个很不错的前端css框架，把很多按钮、表单、表格、图片css通用样式都写好了，而且浏览器兼容不需我们考虑

尤其是它的栅格系统很强大，在做响应式布局时候很有用，但是默认支持12列，一般也足够了，如果要自定义列，就要

它的less我没用过，网站性能优化里面有提尽量少用css表达式

<!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 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">


    <!-- 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>
<div class="container-fluid">
 <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>
<div class="row">
 <div class="col-md-8">.col-md-8</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-6">.col-md-6</div>
</div>
</div>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

爱代码也爱生活

关注

0
点赞
踩
0

收藏

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

bootstrap是个很不错的前端css框架，把很多按钮、表单、表格、图片css通用样式都写好了，而且浏览器兼容不需我们考虑尤其是它的栅格系统很强大，在做响应式布局时候很有用，但是默认支持12列，一般也足够了，如果要自定义列，就要它的less我没用过，网站性能优化里面有提尽量少用css表达式
复制链接

扫一扫

专栏目录