0
6 개의 직사각형 패널 (3 X 2) 그리드를 만들 계획입니다. 각 패널은 시스템 내에서 다른 모듈을 열 수있는 버튼 역할을합니다. 마우스 오버 또는 마우스 오버에 대한 효과를 찾고 각 패널에 적용하여 실제로 패널을 클릭하기 전에 패널이 상호 작용 중임을 알릴 수 있습니다. (클릭 만 가능하고 단지 읽기 전용 데이터가 아니라는 것을 보여줄 것입니다). 예를 들어, 실제로 패널을 클릭하기 전에 패널에 "눌려진"효과를주는 무언가가 좋을 것입니다. (나는 다른 제안에 열려있다).앵귤러 부트 스트랩 버전 0.13.4를 사용하여 패널에 "눌려진"효과 만들기
현재 앵글 부트 스트랩 버전 0.13.4를 사용 중입니다.
<div
data-ng-if="vb.isAuthorized('ROLE_STAFF','ROLE_SRPROFESSOR')">
<div class="panel panel-default panelAttributes panel-snap"
data-ng-click="vb.change('classmodule')">
<div class="panel-body" id="content">
<div class="row col-md-12">
<img src="/WebContent/img/[email protected]" alt=""
class="img-responsive resize" /> <br> <span
class="classText Placement">Class Module</span>
</div>
<div class="col-md-6">
<p class="numericalText divContent">5</p>
<p class="infoText divContent">Community Colleges</p>
</div>
<div class="col-md-6">
<p class="numericalText divContent">28</p>
<p class="infoText divContent">Counties <br>Served</p>
</div>
</div>
</div>
</div>
날 어떤 좋은 제안으로 알려 주시기 바랍니다 :
는 여기에 내가에 적용됩니다 패널에 대한 코드입니다! 나는 이런 식으로 어떤 디자인 컨벤션이 기대하는지 모르겠다. 그래서 나는 여기있는 사람들이 어떤 아이디어를 갖고 있는지 알고 싶었다.
나는 현재 그림자 효과를 사용하고:
.panel-snap {
background-image: -webkit-linear-gradient(top, #FF5A00, #FFAE00);
background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
box-shadow: 3px 3px 5px 6px #A9A9A9;
}
가, 감사 나에게 어떤 질문으로 알려 주시기 바랍니다를!