初学Bootstrap 精华笔记

来源：互联网发布：app编程编辑：程序博客网时间：2024/05/19 17:57
<!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, maximum-scale=1, user-scalable=no">    <!-- name="viewport" 设置移动设备优先; user-scalable=no 设置禁止使用缩放 -->    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title>Bootstrap 笔记</title>    <!-- Bootstrap -->    <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    <!-- 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="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <h1>你好，世界！</h1>    <!-- 笔记1 -->    <div class="container" style="border: 1px solid #40413E;"> .container 类用于设置固定宽度并支持响应式布局的容器。</div>    <br>    <!-- 笔记2 -->    <div class="container-fluid" style="border: 1px solid #40413E;"> .container-fluid 类用于设置固 100% 宽度，占据全部视口（viewport）的容器。</div>    <br>    <!-- 笔记3 -->    <!-- 三个等宽的列可以使用三个 .col-xs-4 -->    <!-- 笔记3 -->    <!-- 栅(shan)格表达式 -->    <div class="row">  <div class="col-xs-12 col-md-8" style="border: 1px solid #40413E;">.col-xs-12 .col-md-8</div>  <div class="col-xs-6 col-md-4" style="border: 1px solid #40413E;">.col-xs-6 .col-md-4</div></div><br><!-- 笔记4 --><!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。 --><div class="row">  <div class="col-md-4" style="border: 1px solid #40413E;">.col-md-4</div>  <div class="col-md-4 col-md-offset-4" style="border: 1px solid #40413E;">.col-md-4 .col-md-offset-4  向有偏移4格</div></div><br><!-- 笔记5 了解下就行--><!-- 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。 --><div class="row">  <div class="col-md-9 col-md-push-3" style="border: 1px solid #40413E;">.col-md-9 .col-md-push-3</div>  <div class="col-md-3 col-md-pull-9" style="border: 1px solid #40413E;">.col-md-3 .col-md-pull-9</div></div><br><!-- 笔记6 --><!-- <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 --><h1>h1. Bootstrap heading <small>Secondary text</small></h1><br><br><!-- 笔记7 --><!-- 带被删除线的文本使用 <del>或者 <s> 标签 --><del>This line of text is meant to be treated as deleted text.</del><br><s>This line of text is meant to be treated as deleted text.</s><br><br><!-- 笔记8 --><!-- 下划线文本使用<ins>或<u>标签。 --><ins>This line of text is meant to be treated as an addition to the document.</ins><br><u>This line of text will render as underlined</u><br><br><!-- 笔记9 --><!--内联列表: 通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。 --><ul class="list-inline">  <li>Lorem ipsum</li>  <li>Phasellus iaculis</li>  <li>Nulla volutpat</li></ul><br><!-- 水平排列的描述: .dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。 --><dl class="dl-horizontal">  <dt>标题</dt>  <dd>内容:大法师打发撒旦法撒旦法撒的发</dd>  <dt>标题</dt>  <dd>内容:大法师打发撒旦法撒旦法撒的发</dd>  <dd>内容:大法师打发撒旦法撒旦法撒的打双丰收发</dd>  <dt>标题</dt>  <dd>内容:大法师打发撒旦法撒旦法撒的发</dd>  <dd>内容:大法师打发撒旦法撒旦法撒的打双丰收发</dd></dl><br><table class="table table-bordered table-hover">  <tr>  <td class="active">发斯蒂芬斯蒂芬</td>  <td class="success">是东方故事的发给</td>  <td class="warning">发斯蒂芬斯蒂芬</td>  <td class="danger">是东方故事的发给</td>  <td class="info">是东方故事的发给</td>  </tr>  <tr>  <td>发斯蒂芬斯蒂芬</td>  <td>是东方故事的发给</td>  <td>发斯蒂芬斯蒂芬</td>  <td>是东方故事的发给</td>  <td>啊撒旦法撒旦法撒的</td>  </tr>  <tr>  <td class="success">发斯蒂芬斯蒂芬</td>  <td class="success">是东方故事的发给</td>  <td class="success">发斯蒂芬斯蒂芬</td>  <td class="success">是东方故事的发给</td>  <td class="success">是东方故事的发给</td>  </tr></table>    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="js/bootstrap.min.js"></script>  </body></html><!-- 放设置尺寸css文件内的/*sm->小屏幕(平板，大于等于 768px);*//*md->中等屏幕(桌面显示器，大于等于 992px);*//*lg->大屏幕(大桌面显示器，大于等于 1200px);*/@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... } -->
阅读全文
0 0