임베디드 | 라즈베리파이 | ARM | 리눅스 | Qt | 딥러닝

bootstrap 윈도우에서 설치방법

웹관련정보2014. 11. 23. 22:53

http://nodejs.org/

node.js 에서 다운로드 받아 node.js를 설치한다.



http://gruntjs.com/getting-started

npm install -g grunt-cli

gruntjs를 설치한다.

js와 css를 컴파일하기 위해 사용된다.


Available Grunt commands

grunt dist (Just compile CSS and JavaScript)

Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

grunt watch (Watch)

Watches the Less source files and automatically recompiles them to CSS whenever you save a change.

grunt test (Run tests)

Runs JSHint and runs the QUnit tests headlessly in PhantomJS.

grunt docs (Build & test the docs assets)

Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve.

grunt (Build absolutely everything and run tests)

Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires Jekyll. Usually only necessary if you're hacking on Bootstrap itself.


https://github.com/twbs/bootlint   설치한다.

npm install -g bootlint

Bootlint is a tool that checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures.







위에것 다필요없다.

부트스트랩 사이트에서 

http://getbootstrap.com/ 프로그램 다운받은후 css, js 파일 올려준후 아래와 같이 적용한다음 코드 사용하면 끝!

<!DOCTYPE html>
<html lang="en">
  <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 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>



위와같이 기본 소스코드를 적용한다.












저작자표시

'웹관련정보' 카테고리의 다른 글

MAMP mysql 기본 password  (0) 2015.07.04
티스토리 기본 푸터 소스  (0) 2014.12.06
heroku node.js 연동하기 서버구동  (0) 2014.07.11
웹사이트 제작시 필요한 credit card 이미지  (0) 2014.07.03
관리하고있는 사이트에 스팸 처리방법  (0) 2014.06.28

티스토리툴바