boottstrap 입문 절차
65200 단어 전단
boottstrap 은 사실 하나의 프로젝트 이거 나 프레임 워 크 라 고 하 는데 자체 적응 플랫폼 을 만 들 수 있 고 한 페이지 는 디 스 플레이 장치 의 해상도 에 따라 디 스 플레이 방식 을 자동 으로 조정 할 수 있 습 니 다.
1. 초대형 해상도 모니터 1920 2. 일반 1024 – 1920 3. ipad 768 X 1024 4. 핸드폰
개발 도구: eclipse netbeans vs webstrom
1. boottstrap 을 로 컬 로 다운로드 하여 압축 풀기http://www.bootcss.com
Bootstrap 은 장치 화면 해상 도 를 몇 가지 @ media (min - width: 1200 px) @ media screen and (max - width: 767 px) @ media (min - width: 768 px) @ media (max - device - width: 480 px) and (orientation: landscape) 로 나 누 었 습 니 다.
bootstrap ， ，
bootstrap 12 col-md-1
col-md-2 col-md-6
col-md-*
col-xs-*
col-lg-*
col-sm-*
Bootstrap 은 장 치 를 크기 를 나 눈 후에 모든 장치 에 대해 기본 적 인 스타일 을 썼 습 니 다. 우 리 는 재 구성 만 하면 됩 니 다.
Bootstrap 은 화면 을 12 개의 등 폭 열 로 나 누 었 습 니 다.
일반적인 PC 쪽 에 서 는 각 열 이 col - md - 1 로 대응 하 는 화면 에 대응 하 는 열 형식 을 선택 합 니 다. boottstrap 은 css 스타일 이 화면 에 자동 으로 적응 하기 때 문 입 니 다.
대응 하 는 화면 에 대응 하 는 열의 종 류 를 선택 하려 면 가로 스크롤 바 가 영원히 없습니다. boottstrap 은 css 스타일 이 화면 에 자동 으로 적응 하기 때 문 입 니 다.
app (andriod ios html 5) 사용자 수: 제품 (빠 르 고 선불금 은 제품 이 나 오지 않 으 면 죽지 않도록 합 니 다 (전화 걸 기 인터넷)
boottstrap 버 전 차이 boottstrap 파일 구조: 1: boottstrap. css: 최 적 화 된 css 스타일 파일 이 없 으 면 2: boottstrap. maincss: 최 적 화 된 css 스타일 은 제품 성형 후 3: botstrap. js: JavaScript 파일 4: boottstrap. main. js: 제품 성형 후 사용 하 는 js 파일 5: boottstrap 을 사용 하려 면 js 특수 효 과 를 사용 하려 면 의존 해 야 합 니 다.jquery 및 jquery 는 boottstrap. js 전에 js 파일 역할 을 가 져 옵 니 다. 특수효과 banner 재생: 마우스 포인트 텍스트 상자, 텍스트 상자 알림 사라 짐 메뉴 에 드 롭 다운 메뉴 가 나타 나 면 jquery 파일 버 전 을 가 져 옵 니 다.
boottstrap 작업 원리 1: 하나의 화면 등 은 12 열 로 나 뉘 어 12 개의 열 을 제어 하여 레이아웃 디자인 을 한다.
2: 이미 많은 좋 은 효 과 를 주 었 습 니 다. 그의 스타일 만 사용 하면 됩 니 다.
bootdtrap 의 클래스 스타일: container 기본 가운데 사용 하기
boottstrap: form table banner 그림 전환 javascript 작성 모듈 로 직접 사용 할 수 있 습 니 다.
a 탭 의 hover 를 설정 할 때 줄 스타일 을 추가 하지 마 십시오. 그렇지 않 으 면 표시 되 지 않 습 니 다.
table: 배경 관리 에 많이 사용
코드
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
<script src="bootstrap/js/bootstrap.js">script>
<script src="bootstrap/js/jquery-3.1.0.min.js">script>
<style>
/* */
.container{margin:0;}
.row{padding:0;margin:0;}
.col-md-1{border:solid red 1px;}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
bootstrap
div>
<div class="col-md-4">
bootstrap
div>
<div class="col-md-4">
bootstrap
div>
div>
div>
<hr/>
<div class="container">
<div class="row">
<div class="col-md-1">
1
div>
<div class="col-md-1">
2
div>
<div class="col-md-1">
3
div>
<div class="col-md-1">
4
div>
<div class="col-md-1">
5
div>
<div class="col-md-1">
6
div>
<div class="col-md-1">
7
div>
<div class="col-md-1">
8
div>
<div class="col-md-1">
9
div>
<div class="col-md-1">
10
div>
<div class="col-md-1">
11
div>
<div class="col-md-1">
12
div>
div>
div>
<hr/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="images/huoying.jpg" class="img-responsive"/>
bootstrap
div>
<div class="col-sm-4">
bootstrap
div>
<div class="col-sm-4">
bootstrap
div>
div>
div>
body>
html>탐색 표시 줄 코드
<nav class="navbar navbar-default hidden-xs navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href=""> a>
div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>
<li><a href="#">Linka>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>li>
ul>
li>
ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
div>
<button type="submit" class="btn btn-default">Submitbutton>
form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Linka>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
ul>
li>
ul>
div>
div>
nav>
배 너 이미지 전환 코드
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
<li data-target="#carousel-example-generic" data-slide-to="1">li>
<li data-target="#carousel-example-generic" data-slide-to="2">li>
<li data-target="#carousel-example-generic" data-slide-to="3">li>
ol>
<div class="carousel-inner" role="listbox" >
<div class="item active">
<img src="images/huoying.jpg" alt=" " title="no1" style="width:100%;height:600px;">
<div class="carousel-caption">
<p> 1p>
div>
div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p> 2p>
div>
div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p> 3p>
div>
div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p> 4p>
div>
div>
div>
div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
<span class="sr-only">Previousspan>
a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
<span class="sr-only">Nextspan>
a>표 의 일반 배경 은 표 전단 을 사용 하지 않도록 합 니 다.
<div class="container">
<div class="row">
<table class="table table-bordered table-hover table-responsive">
<thead>
<tr class="warning">
<th>IDth>
<th>nanmeth>
<th>sexth>
<th>addressth>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>nikitatd>
<td> td>
<td> HDAKSJHKLSDHJFLAKSJHDFLAKSDHJLAJtd>
tr>
<tr>
<td>2td>
<td>nikitatd>
<td> td>
<td> td>
tr>
<tr>
<td>3td>
<td>nikitatd>
<td> td>
<td> td>
tr>
<tr>
<td>4td>
<td>nikitatd>
<td> td>
<td> td>
tr>
tbody>
<tfoot>
<tr class="active">
<td colspan="4" class="text-center" >
<nav>
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
td>
tr>
<tr>
<td colspan="4" >
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="margin:0 auto;width:300px;">
<div class="btn-group">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-remove">span>button>
div>
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1button>
<button type="button" class="btn btn-default">2button>
<button type="button" class="btn btn-default">3button>
<button type="button" class="btn btn-default">4button>
div>
<div class="btn-group">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-remove">span>button>
div>
div>
td>
tr>
tfoot>
table>
div>
div>폼 폼
<div class="row">
<div class="col-md-3">
div>
<div class="col-md-6">
<form action="" >
<div class="form-group">
<label for="ExampleInputEmail"> label>
<input type="text" name="username" class="form-control"/>
div>
<div class="form-group">
<label>Email:label>
<input type="email" name="stuemail" placeholder="email" class="form-control" />
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 outlabel>
<label><input type="checkbox"> Check me outlabel>
div>
<button type="submit" class="btn btn-default">Submitbutton>
form>
div>
<div class="col-md-3">
div>
div>
밑바닥
<style>
.list-group-item{border:0;padding:6px 10px;}
style>
<div class="row" style="border-top: solid #ccc 1px;margin-top:100px;">
<div class="container" >
<div class="col-md-5" >
<h4> h4>
<p> p>
div>
<div class="col-md-7">
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item"><h4> h4>li>
<li class="list-group-item"> li>
<li class="list-group-item"> li>
<li class="list-group-item"> li>
ul>
div>
<div class="col-md-4">
<ul class="list-group">
<a href="" class="list-group-item"><h4> h4>a>
<a href="" class="list-group-item"> a>
<a href="" class="list-group-item"> a>
<a href="" class="list-group-item"> a>
ul>
div>
div>
div>
div>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
