Bootstrap 4学習(一)

25710 ワード

本文は主にhttp://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
チュートリアルの前半のまとめと練習.
1.インストール使用
BootstrapではHTML 5ファイルタイプを使用する必要があり、HTML 5 doctype宣言を追加する必要があります.
Bootstrapが開発したウェブサイトがモバイルデバイスに友好的で、適切な描画とスケールを確保するためにviewport metaラベルを追加する必要があります.width=device-widthは幅がデバイス画面の幅であり、initial-scale=1は初期のスケーリング率である.
BootCDN上のライブラリを使うと便利です.


<html>
<head>
  <title>Bootstrap   title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js">script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js">script>
head>
<body>

2.グリッドシステム
1.容器:
Webコンテンツは、container(固定幅)またはcontainer-fluid(フルスクリーン幅)クラスのコンテナに配置する必要があります.
グリッド・システムの場合、システムは自動的に最大12列に分けられます.
2.水平列グループの作成方法:を使用して、列グループを含めます.
3.グリッドクラス:
スーパスモールデバイス
フラットパネル
デスクトップディスプレイ
大デスクトップディスプレイ
超大型デスクトップディスプレイcol col-sm- col-md- col-lg- col-xl-
オフセットクラス例:offest-md-34.適用:
クラスのみを説明する場合は、幅は明記されていません.Bootstrapでは、幅の等しい列を自動的にレイアウトできます.
次のように設定します.


3. 
1. HTML h1 h6 。
2.Display  。
 4 Display 。
 
3. ラベルとクラス::より さいサイズのテキストを します.
<h1>h1    <small>   small>h1>
 : の を し、マウスを に するとテキストが されます.<p>The <abbr title="World Health Organization">WHOabbr> was founded in 1948.p>
  ：           。 
   
    
     
        
        
     
    
    
     
     font-weight-bold/normal/light 
       、  、      
     
     
     font-italic 
          
     
     
     small 
            
     
     
     text-left/center/right 
            
     
     
     text-justify/nowrap 
                、    
     
     
     list-unstyled 
                     
     
     
     list-inline 
               
     
    
   
  4.   
  1.   ： 
  text-primary       
  text-success/warning/danger  
  text-white/dark/light  
  2.     ： 
  bg- 
  5.   
  1.     
  <table class="table">
    <thead>
        <tr>
            <th>      th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>      td>
        tr>
    tbody>
table>
  
2.その の  の :table-stripedストライプを  table-bordered  の  table-hoverマウスのサスペンション  を  table-blackブラックバックグラウンド
  の クラスを  して、 の またはセルに を  できます.table-primary/success/danger/info/warning/active/secondary/light/dark  
 の  :
  thead-dark/lightは、それぞれヘッダーに とグレーのバックグラウンドを  します.table-smは、  マージンの  が さいテーブルを らすために  されます.table-responsiveは、992 px  の   で  スクロールバーを  する  テーブルを  するために  されます.table-responsive-sm/md/lg/xlスクリーン は576、768、992、1200  です.
6.  roundedフィレットエフェクトrounded-circle    float-right/left  えまたは  えimg-fluid    の  
7.  ボックスとヒントボックス
1.  ボックスjumbotron きなグレーの  ボックスを  
フィレットなしのフルスクリーンを  するには、 の  に います.<div class="jumbotron jumbotron-fluid">
  <div class="container">
      <h1>  h1> 
  div>
div>
  
2.プロンプトボックスalertにalert-       を えると、ヒントボックスの  が られます.alert-linkプロンプトボックスにリンクを  します.  <div class="alert alert-success">
  <strong>  !strong>         <a href="#" class="alert-link">    a>
  div>
  
プロンプトボックスのアニメーション  :alert-dismissableおよびclass="close"、data-dismiss="alert"は、プロンプトボックスのクローズ  を  する.fadeおよびshowのクラス  プロンプトボックスは、 じたときにフェードアウト  を します.&timesは、クローズ  を すHTMLエンティティ  です.<div class="alert alert-success alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">×button>
    <strong>  !strong>           。
  div>
  
8.ボタン
1.buttonクラス
  ボタン: btn-       btn-outline-       の  btn-lg/sm きい、 さい  を  するbtn-blockブロックボタンの  activeクリック のボタンdisabledクリック  ボタン
2.その の  に  :  <a href="#" class="btn btn-info" role="button">    a>
  <button type="button" class="btn btn-info">  button>
  <input type="button" class="btn btn-info" value="     ">
  <input type="submit" class="btn btn-info" value="    "> 
  
3.ボタングループ             ，btn-group-vertical  なボタングループを  します.btn-group-lg/smボタングループのサイズを  します.
9.バッジ    でバッジを  します.badge-pill は、  の をしたバッジを  するために  される.
10.ページングactive  のページをハイライト  します.<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1a>li>
    <li class="page-item active"><a class="page-link" href="#">2a>li>
ul>
  
  :
 、  、   、ヒント 、ボタン、バッジを  して、Webページを  します.
  する な  は  が  していないことであり、  を べてから く  がある.
  を  するには(2つの    が なくなった):
  
コード:
<head>
  <title>         title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js">script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js">script>
head>

<body>
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="text-primary text-center text-nowrap"><strong>         strong>h1>
        <h4 class="text-success text-right text-nowrap">      h4>
    div>
div>

<table class="table table-bordered table-hover table-striped">
    <thead class="thead-light">
        <tr>
            <th>    th>
            <th>  th>
        tr>
    thead>
    <tbody>
        <tr  class="table-info">
            <td>   td>
            <td>    td>
        tr>
        <tr  class="table-danger">
            <td>     td>
            <td>    td>
        tr>
        <tr  class="table-primary">
            <td>     td>
            <td>    td>
        tr>
        <tr  class="table-warning">
            <td>    td>
            <td>    td>
        tr>
        <tr  class="table-success">
            <td>   td>
            <td>    td>
        tr>
    tbody>
table>

<div class="row">
    <div class="col-6">
    <img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=c56a2a62386d55fbd1cb7e740c4b242f/14ce36d3d539b600d90e490bec50352ac75cb74e.jpg"
     class="rounded img-fluid">
    div>
    <div class="col-6">
        <div class="alert alert-warning alert-dismissible fade show">
            <button type="button" class="close" data-dismiss="alert">×button>
            <strong>  ！strong>    ！
        div>
        <span class="badge badge-pill badge-danger">  span>
        <span class="badge badge-pill badge-primary">  span><br/><br/>
        <button type="button" class="btn btn-success">      button>   
    div>
div>
div>
body>


`font-weight-bold/normal/light`	、、
`font-italic`
`small`
`text-left/center/right`
`text-justify/nowrap`	、
`list-unstyled`
`list-inline`

cocos-js、メモリ管理1---参照カウント方式

ActiveRecordから取得したデータを日付別のハッシュにする