bootstrap簡単チュートリアル

46708 ワード
AS.NET
bootstrapの学習は非常に簡単で、提供されているスタイルは非常に美しいです.少しでも簡単に勉強すれば、きれいなページを作ることができます.
bootstrap中国語ネット:http://v3.bootcss.com/  
bootstrapは3種類のダウンロードを提供しています.
-------------------------------------------------------------
生産環境用Bootstrap
コンパイルして圧縮したCSS、JavaScript、フォントファイル.ドキュメントとソースファイルは含まれません.
Bootstrapソース
Less、JavaScript、フォントファイルのソースコードで、ドキュメントがあります.Lessコンパイラといくつかの設定作業が必要です.
Sass
これは、Rails、Compass、またはSassのみのプロジェクトに迅速に導入するためのBootstrapのLessからSassへのソースコード移植プロジェクトです.
------------------------------------------------------------
bootstrapをダウンロードしなくても使えます
Bootstrap中国語網はBootstrapのために独自の無料CDN加速サービスを構築した.国内のクラウドメーカーのCDNサービスに基づいて、アクセス速度が速く、加速効果がより顕著で、速度と帯域幅の制限がなく、永久無料である.
base.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">
    
    <title>Bootstrap 101 Templatetitle>

    
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
  head>
  <body>
    <h1>  ，bootstrap！h1>

    
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js">script>
    
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
  body>
html>


 base.htmlにはbootstrapが導入されており、保存するとbootstrapが提供するスタイルを使用することができます.
 
フォントアイコン
bootstrapのデフォルトでは、200以上のアイコンが用意されています.これらのアイコンはspanラベルで使用できます.
    <h3>  h3>   
    <span class="glyphicon glyphicon-home">span>
    <span class="glyphicon glyphicon-signal">span>
    <span class="glyphicon glyphicon-cog">span>
    <span class="glyphicon glyphicon-apple">span>
    <span class="glyphicon glyphicon-trash">span>
    <span class="glyphicon glyphicon-play-circle">span>
    <span class="glyphicon glyphicon-headphones">span>


bootstrap 简单教程_第1张图片
 
ツールバーの
ラベルはボタンを作成するために使用され、bootstrapは豊富なボタンスタイルを提供します.
    <h3>  h3>
    <button type="button" class="btn btn-default">  button>
    <button type="button" class="btn btn-primary">primarybutton>
    <button type="button" class="btn btn-success">successbutton>
    <button type="button" class="btn btn-info">infobutton>
    <button type="button" class="btn btn-warning">warningbutton>
    <button type="button" class="btn btn-danger">dangerbutton>
    
    <h3>    h3>
    <button type="button" class="btn btn-default">  button>
    <button type="button" class="btn btn-primary btn-lg">primarybutton>
    <button type="button" class="btn btn-success btn-sm">successbutton>
    <button type="button" class="btn btn-info btn-xs">infobutton>

    <h3>         h3>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home">span>    button>


ボタンにはデフォルトのサイズに加えてbootstrapは、btn-lg、btn-sm、btn-xsの3つのパラメータを提供します.
bootstrap 简单教程_第2张图片
 
ドロップダウンメニュー
ドロップダウンメニューは最も一般的なインタラクションの一つで、bootstrapはきれいなスタイルを提供しています.
     <h3>    h3>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret">span>
      button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Actiona>li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another actiona>li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else herea>li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated linka>li>
      ul>
    div>


  bootstrap 简单教程_第3张图片
 
入力ボックス
ラベルで入力ボックスを作成します.
    <h3>   h3>
    <div class="input-group">
      <span class="glyphicon glyphicon-user">span>
      <input type="text" placeholder="username">
    div>

    <div class="input-group">
      <span class="glyphicon glyphicon-lock">span>
      <input type="password" placeholder="password">
    div>


  bootstrap 简单教程_第4张图片
 
ナビゲーションバー
ナビゲーションバーは、Webサイト全体のガイドとして欠かせません.
    <h3>   h3>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Homea>li>
            <li><a href="#about">Abouta>li>
            <li><a href="#contact">Contacta>li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret">span>a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Actiona>li>
                <li><a href="#">Another actiona>li>
                <li class="divider">li>
                <li class="dropdown-header">Nav headerli>
                <li><a href="#">Separated linka>li>
              ul>
            li>
          ul>
        div>
      div>
    nav>


  bootstrap 简单教程_第5张图片
  
フォーム＃フォーム＃
人とシステム間のデータの伝達はフォームに頼って行わなければならない.登録/登録情報の提出、照会条件の提出など.ラベルでフォームを作成します.
   <h3>  h3>
    <form>
    <div class="form-group">
      <span class="glyphicon glyphicon-user">span>
      <input type="email" id="exampleInputEmail1" placeholder="Enter email">
    div>
    <div class="form-group">
      <span class="glyphicon glyphicon-lock">span>
      <input type="password" id="exampleInputPassword1" placeholder="Password">
    div>
    <div class="form-group">
      <label for="exampleInputFile">File inputlabel>
      <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">Submitbutton>
  form>


  bootstrap 简单教程_第6张图片
 
警告ボックス
警告ボックスは,システムがユーザに情報を伝達し,導きを提供する重要な手段である.警告ボックスに対するラベルはなく、bootstrapが提供するスタイルで瞬時にきれいな警告ボックスを作ることができます.
    <h3>   h3>
    <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×span>button>
       <strong>Warning!strong> Better check yourself, you're not looking too good.
    div>
    <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">success!a>
    div>
    <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">info!a>
    div>
    <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">warning!a>
    div>
    <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">danger!a>
    div>


   bootstrap 简单教程_第7张图片
 
進捗バー
システムの処理プロセスは往々にしてユーザーが待つ必要があり、進捗バーはユーザーにシステムの処理プロセスを感知させ、それによって許容度を増加させることができる.
    <h3>   h3>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        70%
      div>
    div>


 
 
 
=========================終了===============================終了
1、先端は芸術のようなものだと思います.人々は美しいものに対して意見の相違を生んだことがありません.先端は技術を通じて美しさを示すようだ.
2、フロントエンド技術の学習は見ただけで得られ、ラベルとその属性を任意に修正することができ、すぐに修正後の効果を見ることができます.
3、bootstrapにとって、ラベルの最も重要な属性はclassです.異なるclass属性値を使用すると、ラベルスタイルの色を変えることができます.
4、この文章は簡単で、最も基本的なページ要素の構成を羅列しているだけです.bootstrapのより多くの学習:http://v3.bootcss.com/
Cポインタを関数パラメータとして参照
Path.Combine(a, b, c)をUnityで