bootstrap_開始

時間 2019-11-08

標籤 bootstrap 開始欄目 Bootstarp 简体版

原文原文鏈接

bootstrapjavascript

一個移動設備優先 UI 庫，底層是用 less 寫的，依賴於 jQuery。css

面試點：html

bootstrap 的全部盒子都是怪異盒子模型（box-sizing: border-box）
bootstrap 不管是流體容器，仍是固定容器，都有左右 padding 15px
bootstrap 的固定容器左右 margin 會自適應變化，由於在範圍內固定了 width，並居中了
bootstrap 經過三個點將屏幕分紅 4 個區域

www.bootcss.com bootstrap3 目前最經常使用，有 bootstrap2 、bootstrap4（less 轉換成了 sass）html5

思想上的框架 MVC MVVMjava

應用上的框架jquery

《JavaScript 編程思想》webpack

《你不知道的 JavaScript》web

《JavaScript 高級編程》三部曲面試

jekyll 或者 hexo 搭建我的博客算法

Yarn 依賴 NPM 管理工具

webpack 代碼打包壓縮構建工具

bootstrap 可視化佈局 Layoutlt

bootCDN 提供免費的 CDN 加速服務（同時支持 http 和 https）

基本模版
index.html

<!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.0,
                                   maximum-scale=1.0,
                                   minimum-scale=1.0,
                                   user-scalable=no">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->

    <title>Bootstrap </title>

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

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!--[if lt IE 9]>
      <script src="./js/html5shiv.min.js"></script>
      <script src="./js/respond.min.js"></script>
    <![endif]-->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
  </head>
  <body>
    <h1>你好，世界！</h1>
    
    
    
    
    <script src="./js/jquery.min.js"></script><!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="./js/bootstrap.js"></script><!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <!-- javascript代碼 -->
    <script src="./js/index.js.js"></script>
    <script type="text/javascript">
        
    </script>
  </body>
</html>

index.less

.unSelectedAble {
    /* 內容不能夠被選中 */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

@screen-lg-min: 1024px;

@screen-md-max: 1024px;
@screen-md-min: 992px;

@screen-sm-max: 992px;
@screen-sm-min: 768px;

@screen-xs-max: 768px;
/* 公共樣式 超小屏幕（手機，小於 768px）Bootstrap 中是默認的是移動設備優先 */
body {
    background: #96b377;
}

/* 小屏幕（平板，大於等於 768px） */
@media screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    body {
        
    }
}

/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    body {
        
    }
}

/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media screen and (min-width: @screen-lg-min) {
    body {
        
    }
}

Normalize.css 重置 css 樣式
class="container-fluid" 流體容器（橫向充滿屏幕）
class="container" 固定容器在必定範圍內 width 固定 1170 970 750

柵格系統

經過一系列的行（class="row"）與列（class="column"）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中

.row 必須在 .container 或者 .container-fluid 中

列 6 爲屏份數默認共 12 屏份

.col-lg-6 （large）大屏區域

.col-md-6 （middle）

.col-sm-6 （small）

.col-xs-6 （extra small）

一行若是多於 12 列，則多於的列另起一行（可是真正佈局時，不能利用這個特色進行佈局）

響應式列重疊

當列多餘 12 列時，另起一行的盒子，規規矩矩的另起一行

實現：在一行與一行之間添加 <div class="clearfix visible-xs-block"></div>

列偏移

class="col-md-offset-1" 當前列元素向右偏移1

列排序

class="col-md-push-1" 在元素左邊推 1 列（若是和下一元素重疊，則會跑到下一元素的下面）

class="col-md-poll-2" 在元素左邊拉 2 列

寫 <h1> 時，嵌套一個 <small>比父元素稍微小一點，灰色</small>
<p class="lead">字體黑大，讓此段落突出顯示</p>
<mark>高亮</mark>
<abbr title="attrtibute">attr</abbr>

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

<ul class="list-unstyled">       <!-- 無樣式列表 --> 
  <li>...</li>
</ul>

按鍵樣式

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

代碼塊

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

程序輸出
<table class="table"> bootstrap 美化表格
<table class="table table-straped table-hover table-bordered table-condensed"> bootstrap 條紋隔行變色表格
響應式表格（將任何 .table 元素包裹在 ... ... 內，元素內，當屏幕太小時，出現滾動條）

<container .table-responsive>

<container-fluid .table-responsive>

bootstrap 表單

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
              <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>