bootstrap学习笔记

这篇是笔记篇，估计只有我自己看明白，~~~~ 有点乱。。。bootstrap加入react。  所以说呢，刷到建议直达 bootstarp

import React,{Component} from 'react';

//bootstrap
//import '../bootstrap/css/bootstrap.css';
//可以在本地服务目录下直接引入


//start studying bootsrap-3
//2018.3.20

//删格系统
//如果出现 - - 连字符时， 在react组件中要以字符串的形势输出， 因为括号对把它当成js语句去执行
import '../css/greet.css';
import '../bootstrap/css/bootstrap.min.css';
//import '../css/bootstrap.less';

//布局组件
class Buju extends Component {
    constructor(...args) {
        super(...args)
    }

     render() {
         //1.删格布局
         return (
          <div>     
            <div className='row'>
                <div className='col-md-2 bg1'>1</div>
                <div className='col-md-4 bg2'>2</div>
                <div className='col-md-4 bg3'>3</div>
                <div className='col-md-2 bg4'>4</div>
            </div>
                <br/>
            <div className='row'>
                <div className='col-md-2 bg1'>1</div>
                <div className='col-md-10 bg2'>2</div>
            </div>
            <br/>
            <div className='row'>
                <div className='col-xs-12 col-md-8 bg1'>1</div>
                <div className='col-xs-6 col-md-4 bg2'>2</div>
            </div>
            <br/>
            <div className='row'>
                <div className='col-xs-6 col-md-4 bg1'>1</div>
                <div className='col-xs-6 col-md-4 bg2'>2</div>
                <div className='col-xs-6 col-md-4 bg3'>3</div>

            </div>
            <br/>
            <div className='row'>
                <div className='col-xs-6 bg1'>1</div>
                <div className='col-xs-6 bg2'>2</div>
                
            </div>
            <br/>
            <div className='row'>
                <div className='col-xs-12 col-sm-6 col-md-8 bg1'>1</div>
                <div className='col-xs-6 col-md-4 bg2'>2</div>
            </div>
            <br/>
            <div className='row'>
                <div className='col-xs-6 col-sm-4 bg1'>1</div>
                <div className='col-xs-6 col-sm-4 bg2'>2</div>
                <div className='clearfix visible-xs-block bg3'>3</div>
                <div className='col-xs-6 col-sm-4 bg4'>4</div>
            </div>
            <br/>
            <div className='row'>
                <div className='col-xs-9 bg1'>1</div>
                <div className='col-xs-4 bg2'>2</div>
                <div className='col-xs-6 bg3'>3</div>
            
            </div>
            <br/>
            <div className='row'>
                <div className='col-md-2 bg1'>1</div>
                <div className='col-md-4 bg2'>2</div>
                <div className='col-md-4 bg3'>3</div>
                <div className='col-md-2 col-md-offset-1 bg4'>4</div>
            </div>
            <br/>
            <div className='row'>
                <div className='col-md-2 bg1'>
                0
                   <div className='row'>
                           <div className='col-md-4 bg2 col-md-push-1'>1</div>
                           <div className='col-md-4 bg3 col-md-pull-0'>2</div>
                   </div>
                </div>
            </div>
            <br/>

           <div className='wrapper'>
                <div className='content-main'></div>
                <div className='content-secondary'></div>
           </div>
           
         </div>    
         );

     }
} 
//clearfix versibale-xs-block
//9+4>12 another cloumn
//-offset set pianyi liang
//嵌套row布局时，依据父元素
//-push 往后推 -pull 往前推




class Paiban extends Component {
    render() {
        return (
            <div>
                <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
                <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
                <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
                <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
                <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
                <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
                <br/>
                <p className='lead'>1111111<mark>mark</mark></p>
                <br/>
                <del>deleate</del>
                <s>no usefule</s>
                <ins>text ins</ins>
                <br/>
                <u>underline text</u>
                <small>smaller</small>
                <strong>111</strong>
                <em>em...sas</em>
                <br/>

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

                <br/>
                <p className='text-lowercase'>Lowercase text</p>
                <p class="text-uppercase">Uppercased text.</p>
                <p class="text-capitalize">Capitalized text.</p>

                <abbr title='atributes'>at</abbr>
                <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
                
                <blockquote className='blockquote-reverse'>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
                <br/>

                <ul className='list-unstyled'>
                     <li>1111</li>
                     <li>1111</li>
                     <li>1111
                         <ul className='list-unstyled list-inline'>
                         <li>222</li>
                         <li>3333</li>
                         </ul>
                     </li>
                </ul>

                <ol>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                </ol>

                <dl className='dl-horizontal'>
                    <dt>.head.</dt>
                    <dd>.content.</dd>
                </dl>
            </div>
        )
    }
}

//small yongyu fubiaoti
// tag mark
//tag del s
//tag  ins u

//small text  <small>
//tag strong
//tag em

//capitalize shouzimu daxie
//tag abbr .initialism
//tag  address
//yinyong  blockquote in=>  <footer  <cite title=''   another style:.class: blockquote-reverse

//ul .class  list-unstyled  inline-  list-inline
// dl  inline-   dl-horizontal



//Codes styles

class Codes extends Component {
    render() {
        return(
            <div>
                <code>
                    <section>&lt;section&gt;</section>
                    &lt;h1&gt;
                </code>
                <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
                <kbd>cd</kbd>
                <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
                <samp>This text is meant to be treated as sample output from a computer program.</samp>
                <var>counts 1</var>
                <br/><br/>
            </div>
        )
    }
}

// &lt <  &gt >  in tag <code
// tag pre

// keypress style  <kbd></kbd>

// samp  system output codes

//tag  var



class Tables extends Component {
    render() {
        return (
        <div>
            <div className='table-responsive'>
                <table className="table table-striped table-bordered table-hover">
                 <thead>
                  <tr>
                      <th>mounth</th>
                      <th>days</th>
                      <th>mounth</th>
                      <th>days</th>
                  </tr>
                  </thead>

                  <tbody>
                  <tr>
                      <td className='active'>wwwww</td>
                      <td className='success'>hhhhh</td>
                      <td className='info'>wwwww</td>
                      <td className='warning'>hhhhh</td>
                      <td className='danger'>wwwww</td>
                      <td>hhhhh</td>
                  </tr>
                  </tbody>
                  <tbody>
                  <tr>
                      <td>wwwww</td>
                      <td>hhhhh</td>
                      <td>wwwww</td>
                      <td>hhhhh</td>
                      <td>wwwww</td>
                      <td>hhhhh</td>
                  </tr>
                  </tbody>
                </table>
                <br/>

                <br/>
               </div>
                <form className='form-inline'>
                    <div className='form-group'>
                    <label for="exampleInputName2" className='sr-only'>Name</label>
                    <input type="text" className="form-control" id="exampleInputName2" placeholder="Jane Doe" />
                    </div>

                    <div className='form-group'>
                    <label for="exampleInputEmail2">Email</label>
                    <input type="email" className="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" />
                    </div>

                    <button type="submit" className="btn btn-default">Send invitation</button>

                    <div className='form-group'>
                        <div className='input-group'>
                            <div className='input-group-addon'>$</div>
                            <input type='text' className='form-control' placeholder='amount' />
                            <div className='input-group-addon'>.00</div>
                            <button type="submit" class="btn btn-primary">Transfer cash</button>
                        </div>
                    </div>
                </form>
                <br/><br/>

                <form className="form-horizontal">
                    <div className="form-group form-group-lg">
                        <label for="inputEmail3" className="col-sm-2 control-label">Email</label>
                        <div className="col-sm-10">
                        <input type="email" className="form-control" id="inputEmail3" placeholder="Email" />
                        </div>
                    </div>
                    <div className="form-group form-group-sm">
                        <label for="inputPassword3" className="col-sm-2 control-label">Password</label>
                        <div className="col-sm-10">
                        <input type="password" className="form-control" id="inputPassword3" placeholder="Password" />
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                        <div className="checkbox">
                            <label>
                            <input type="checkbox" /> Remember me
                            </label>
                        </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                        <button type="submit" className="btn btn-info btn-lg active" disabled>Sign in</button>
                        </div>
                    </div>
                    </form>
            </div>
        )
    }
}

//div> .table-responsive  has scroll  and when condensed none

//table table-striped table-bordered table-hover table-condensed
//active >huise   success >lu se   info> lan se  warning> huang se  danger > hongse

//form -inline  > div class='form-group'>  input>.form-control
//.sr-only 可用于label标签进行辅助  将其隐藏
// btn btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-link 
//btn-lg >big button      btn-sm    btn-xs
//100% into parentnode  btn-block
//hihuo (an xia qu) btn.active
//
//>>>>a
/* <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a> */



//form-horizontal  bing pai //.row
//form-group-lg  -sm



class Kongjian extends Component {
    render() {
        return (
            <div>
                <input type="text" className="form-control" placeholder="Text input" />
                <textarea className="form-control" rows="3"></textarea>
                <div className='checkbox'>
                <label>
                    <input type="checkbox" value="" />
                    Option one is this and that&mdash;be sure to include why it's great
                </label>
                </div>
                <div className='radio disabled'>
                <label>
                    <input type="radio" value="" disabled /> 
                    Option two is disabled
                </label>
                </div>
                <br/>
                <label className='checkbox-inline'>
                    <input type='checkbox' value='option1' /> 1
                </label>
                <label className='checkbox-inline'>
                <input type="checkbox" id="inlineCheckbox2" value="option2" /> 2
                </label>
                <label className='checkbox-inline'>
                <input type="checkbox" id="inlineCheckbox2" value="option2" /> 2
                </label>
                    <br/>
                <label className="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" /> 1
                </label>
                <label className="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /> 2
                </label>
                <label className="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /> 2
                </label>
                <br/>

                <div className='checkbox'>
                    <label>
                        <input type='checkbox' id='1' value='op1' aria-label='...' />
                    </label>
                </div>
                      <br/>

                <select className="form-control" multiple>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
                <br/>
                <form className="form-horizontal">
                <fieldset>
                <div className="form-group has-success has-feedback">
                    <label className="col-sm-2 control-label">Email</label>
                    <div className="col-sm-10">
                    <p className="form-control-static">email@example.com</p>
                    </div>
                </div>
                <div className="form-group has-warning has-feedback">
                    <label for="inputPassword" className="col-sm-2 control-label">Password</label>
                    <div className="col-sm-10">

                    <input type="text" className="form-control" id="inputPassword" placeholder="Password" aria-descripedby='inputSuccess2Status' />
                    <span className='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>

                    <label className="label-control" for="inputHelpBlock">Input with help text</label>
                <input type="text" id="inputHelpBlock" className="form-control" aria-describedby="helpBlock" />
                ...
                <span id="helpBlock" className="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
                    </div>
                </div>
                <div className="form-group has-error">
                    <label for="inputPassword" className="col-sm-2 control-label">Password</label>
                    <div className="col-sm-10">
                    <input type="password" className="form-control" id="inputPassword" placeholder="Password" disabled/>
                    </div>
                </div>
                </fieldset>
                </form>
                <br/>
                <label className="label-control" for="inputHelpBlock">Input with help text</label>
                <input type="text" id="inputHelpBlock" className="form-control" aria-describedby="helpBlock" />
                ...
                <span id="helpBlock" className="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

                <input className="form-control input-lg" type="text" placeholder=".input-lg"/>
                <input className="form-control" type="text" placeholder="Default input"/>
                <input className="form-control input-sm" type="text" placeholder=".input-sm"/>

                <select className="form-control input-lg">...</select>
                <select className="form-control">...</select>
                <select className="form-control input-sm">...</select>
            </div>
        )
    }
}

//huan hang 
//checkbox radio > div.checkbox |disabled>  <label> >input >something   radio also
//checkbox- arial-label
//multiple default block more
//inline  -  p>.form-control-static
// fieldset.disbaled
//readonly
//input> aria-describedby  helpBlock help-block

//div>form-group has-success-error-warning  ---(label/input/textarea/span.help-block )
//div>.has-feedback input>.aria-descripedby    span>.aria-hidden='true'
//glyphicon glyphicon-ok form-control-feedback

//glyphicon glyphicon-warning-sign form-control-feedback
//glyphicon glyphicon-remove form-control-feedback


//control height
//.input-lg-*   input-sm 
//column  kuan   > div.col-xs-2 >input  in warpping





class Images extends Component {
    render() {
        return (
            <div>
                <img src="images/4d01e600.7.jpg" className="img-responsive center-block" alt="Responsive image"/>
                <img src="images/4d01e600.7.jpg" className="img-responsive center-block img-rounded" alt="Responsive image"/>
                <img src="images/4d01e600.7.jpg" className="img-responsive center-block img-circle" alt="Responsive image"/>
                <img src="images/4d01e600.7.jpg" className="img-responsive center-block img-thumbnail" alt="Responsive image"/>
            </div>
        )
    }
}

//img-responsive img-circle -rounded -thumbnail  center-block


class Texts extends Component {
    render() {
        return (
            <div>
                <p className="text-muted">..lll.</p>
                <p className="text-primary">.kkkk..</p>
                <p className="text-success">..sss.</p>
                <p className="text-info">.sss..</p>
                <p className="text-warning">..ss.</p>
                <p className="text-danger">.sss..</p>

                <button type="button" className="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>

                <span className="caret"></span>
            </div>
        )
    }
}

// text-muted -.....

//bg-primary .....

//btn-  .close aria-label  span>.aria-hidden &times;

//span>. caret


//响应式： 可以用visble-xs-block /inline-block  -inline 
// v-sm-   v-md-  v-lg 

//hidden-sm   hidden-lg  -xs -md 


//或者用css
//@media screen and (max-width : ***px) {   ...}




//1.container use container
//2container-fluid use all 100% viewport

const BootstrapPage = () => (
    <div className='container'>
        <Buju />
        <Paiban />
        <Codes />
        <Tables />
        <Kongjian />
        <Images />
        <Texts />
    </div>
)



export default BootstrapPage;