[開発] 今更ながらのWebフロント技術の勉強 - Bootstrap

bootstrap

css framework
getbootstrap.com
required: HML/CSS/JavaScript/jQuery
tool: texteditor, browser

download
https://getbootstrap.com/docs/4.0/getting-started/download/
bootstrap-4.0.0-beta-dist.zip
解凍して任意のフォルダに移動

Starter template
https://getbootstrap.com/docs/4.0/getting-started/introduction/
上記と同じにhtmlとして保存

ページを日本語化

titleを追記
# viewport はモバイル対応の為のもの

bootstrapstudy.html // --------------------
<'!DOCTYPE html>
<'html lang="ja">
<'head>
<'!-- Required meta tags -->
<'meta charset="utf-8">
<'meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <'!-- Title -->
  <'title>Bootstrap Study<'/title>
  
<'!-- Bootstrap CSS -->
<'link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<'/head>
<'body>
<'h1>Hello, world!<'/h1>

  <'div id="header" class="container" style="background:salmon;">header<'/div>
  
  <'div class="container" style="padding:20px 0">
    <'div class="row">
      <'div class="col-sm-3 hidden-xs" style="background:skyblue;">leftside<'/div>
      <'div class="col-sm-6 col-xs-8">
        main
        <'table class="table table-bordered table-hover table-condensed"><'!-- table-striped -->
          <'thead>
            <'tr><'th>ID<'/th><'th>Score<'/th><'/tr>
          <'/thead>
          <'tbody>
            <'tr><'td>hoge<'/td><'td>100<'/td><'/tr>
            <'tr><'td>piyo<'/td><'td>200<'/td><'/tr>
            <'tr class="warning"><'td>higo<'/td><'td>300<'/td><'/tr>
          <'/tbody>
        <'/table>
        
        <'form>
          <'div class="form-group has-error">
            <'label class="control-label" for="email">Email<'/label>
            <'input type="text" id="email" class="form-control" placeholder="email">
            <'span class="help-block">Error!<'/span>
          <'/div>
          <'div class="form-group">
            <'input type="submit" value="submit" class="btn btn-primary">
          <'/div>
        <'/form>
        
        <'form class="form-inline">
          <'div class="form-group">
            <'label class="sr-only control-label" for="name">name<'/label>
            <'input type="text" id="name" class="form-control" placeholder="name">
          <'/div>
          <'div class="form-group">
            <'input type="submit" value="submit" class="btn btn-primary">
          <'/div>
        <'/form>

        <'form class="form-horizontal" style="margin-bottom:15px;">
          <'div class="form-group">
            <'label class="control-label col-sm-2" for="homephone">homephone<'/label>
            <'div class="cal-sm-4">
              <'input type="text" id="homephone" class="form-control" placeholder="name">
            <'/div>
          <'/div>
          <'div class="form-group">
            <'label class="control-label col-sm-2" for="cellphone">cellphone<'/label>
            <'div class="cal-sm-4">
              <'input type="text" id="cellphone" class="form-control" placeholder="name">
            <'/div>
          <'/div>
          <'div class="form-group">
            <'div class="col-sm-offset-2 col-sm-4">
              <'input type="submit" value="submit" class="btn btn-primary">
            <'/div>
          <'/div>
        <'/form>
        
        <'div class="container" style="padding:20px 0">
          <'p><'i class="glyphicon clyphicon-book"><'/i> Book<'/p>
          <'button class="btn btn-primary"><'i class="glyphicon clyphicon-book"><'/i> book btn<'/button>

          <'div class="btn-group">
            <'button class="btn btn-primary">btn<'/button>
            <'button class="btn btn-success">btn<'/button>
            <'button class="btn btn-info">btn<'/button>
          <'/div>
        <'/div>
        
        <'div class="container" style="padding:20px 0">
          <'div class="btn-group">
            <'button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              btn <'span calss="caret"><'/span>
            <'/button>
            <'ul class="dropdown-menu">
              <'li><'a href="">aaa<'/a><'/li>
              <'li><'a href="">bbb<'/a><'/li>
              <'li class="divider"><'/li>
              <'li><'a href="">ccc<'/a><'/li>
            <'/ul>
          <'/div>
        <'/div>
        
        <'div class="container" style="padding:20px 0">
          <'div class="btn-group">
            <'button class="btn btn-primary">btn<'/button>
            <'button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              <'span calss="caret"><'/span>
            <'/button>
            <'ul class="dropdown-menu">
              <'li><'a href="">ddd<'/a><'/li>
              <'li><'a href="">eee<'/a><'/li>
              <'li class="divider"><'/li>
              <'li><'a href="">fff<'/a><'/li>
            <'/ul>
          <'/div>
        <'/div>
        
        <'div class="container" style="padding:20px 0">
          <'ul class="breadcrumb">
            <'li><'a href="">Home<'/a><'/li>
            <'li><'a href="">User<'/a><'/li>
            <'li class="active">Piyo<'/li>
          <'/ul>
          
          <'ul class="pagination">
            <'li><'a href="">«<'/a><'/li>
            <'li class="diabled"><'a href="">0<'/a><'/li>
            <'li><'a href="">1<'/a><'/li>
            <'li class="active"><'a href="">2<'/a><'/li>
            <'li><'a href="">3<'/a><'/li>
            <'li><'a href="">0<'/a><'/li>
            <'li><'a href="">»<'/a><'/li>
          <'/ul>
          
          <'ul class="pager">
            <'li class="previous"><'a href="">前へ<'/a><'/li>
            <'li class="next"><'a href="">次へ<'/a><'/li>
          <'/ul>

          
        <'/div>

        <'div class="container" style="padding:20px 0">
        
        <'/div>



        
      <'/div>
      <'div class="col-sm-3 col-xs-4" style="background:lightblue;">rightside<'/div>
    <'/div>
  <'/div>
    
  <'div id="footer" class="container" style="background:plum;">footer<'/div>
  
<'!-- Optional JavaScript -->
<'!-- jQuery first, then Popper.js, then Bootstrap JS -->
<'script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><'/script>
<'script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><'/script>
<'script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><'/script>
<'/body>
<'/html>
-------------------- // bootstrapstudy.html

tag : Bootstrap

2017-09-08 12:57 : 開発 : コメント : 0 : トラックバック : 0 :
コメントの投稿
非公開コメント

« next  ホーム  prev »

search

ad



counter


tag cloud

category cloud