Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Spring Boot Java Discussion :

Spring Boot + Bootsrap + Thymeleaf


Sujet :

Spring Boot Java

  1. #1
    Membre régulier
    Spring Boot + Bootsrap + Thymeleaf
    Salut tout le monde,

    Je me lance dans un nouveau défi en essayant de réaliser un petit site web avec les frameworks cités dans le titre.
    J'avais déjà réalisé un site web static avec Bootstrap en codant simplement les pages en HTML. Là, j'augmente donc le niveau .
    Mais je rencontre quelques problèmes surtout au niveau de Bootstrap ... Mais glif icône n'apparaisse pas et certain style de Bootstrap ne sont pas prises en compte à croire que Thymeleaf ou Spring Boot bloquent des styles de Boostrap à moins que mes imports ne sont pas corrects ... J'ai un peu de mal à comprendre et je suis preneur de toute idée/aides ^^.

    Merci d'avance !

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8" />
    <title>Nécromongers Empire</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     
    <!-- See configuration in WebMvConfig.java css de bootstrap-->
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"
    	media="screen" />
     
    <!-- Css du site -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
     
    <script th:src="@{/jquery/jquery.min.js}"></script>
    <script th:src="@{/popper/popper.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
     
    </head>
     
    <body>
    	<!-- Brand: Direct child of ".navbar" -->
    	<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    		<a class="navbar-brand" href="#"><img th:src="@{images/logo.png}"
    			class="img-responsive" id="insigne" /></a>
    		<div class="container-fluid">
    			<div class="navbar-header">
    				<a class="navbar-brand" href="#">Nécromongers Empire</a>
    				<!-- Toggler/collapsibe Button -->
    				<button class="navbar-toggler" type="button" data-toggle="collapse"
    					data-target="#navbarcollapse">
    					<span class="navbar-toggler-icon"></span>
    				</button>
    			</div>
    			<div id="navbarcollapse" class="collapse navbar-collapse">
    				<!-- Left -->
    				<ul class="navbar-nav mr-auto">
    					<li class="nav-item"><a class="nav-link">Java</a></li>
    					<li class="nav-item"><a class="nav-link">C/C++</a></li>
    				</ul>
    				<!-- Right -->
    				<ul class="navbar-nav ml-auto">
    					<li class="nav-item"><a class="nav-link"><i
    							class="glyphicon glyphicon-home"></i>Tom</a></li>
    					<li class="nav-item"><a class="nav-link">Logout</a></li>
    				</ul>
    			</div>
    		</div>
    	</nav>
     
    	<div class="container">
    		<h1>Content1</h1>
    		<h2>Content2</h2>
    		<h3>Content3</h3>
    		<h4>Content4</h4>
    		<h5>Content5</h5>
    		<h1>Content6</h1>
    		<h2>
    			<span class="glyphicon glyphicon-zoom-in"></span>Content7
    		</h2>
    		<a href="#" class="btn btn-default"> <span
    			class="glyphicon glyphicon-plus"></span> Create new product
    		</a>
    	</div>
     
     
    	<!-- Footer -->
    	<footer class="page-footer font-small stylish-color-dark pt-4">
     
    		<!-- Footer Links -->
    		<div class="container text-center text-md-left">
     
    			<!-- Grid row -->
    			<div class="row">
     
    				<!-- Grid column -->
    				<div class="col-md-4 mx-auto">
     
    					<!-- Content -->
    					<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Footer
    						Content</h5>
    					<p>Here you can use rows and columns here to organize your
    						footer content. Lorem ipsum dolor sit amet, consectetur
    						adipisicing elit.</p>
     
    				</div>
    				<!-- Grid column -->
     
    				<hr class="clearfix w-100 d-md-none">
     
    				<!-- Grid column -->
    				<div class="col-md-2 mx-auto">
     
    					<!-- Links -->
    					<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
     
    					<ul class="list-unstyled">
    						<li><a href="#!">Link 1</a></li>
    						<li><a href="#!">Link 2</a></li>
    						<li><a href="#!">Link 3</a></li>
    						<li><a href="#!">Link 4</a></li>
    					</ul>
     
    				</div>
    				<!-- Grid column -->
     
    				<hr class="clearfix w-100 d-md-none">
     
    				<!-- Grid column -->
    				<div class="col-md-2 mx-auto">
     
    					<!-- Links -->
    					<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
     
    					<ul class="list-unstyled">
    						<li><a href="#!">Link 1</a></li>
    						<li><a href="#!">Link 2</a></li>
    						<li><a href="#!">Link 3</a></li>
    						<li><a href="#!">Link 4</a></li>
    					</ul>
     
    				</div>
    				<!-- Grid column -->
     
    				<hr class="clearfix w-100 d-md-none">
     
    				<!-- Grid column -->
    				<div class="col-md-2 mx-auto">
     
    					<!-- Links -->
    					<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
     
    					<ul class="list-unstyled">
    						<li><a href="#!">Link 1</a></li>
    						<li><a href="#!">Link 2</a></li>
    						<li><a href="#!">Link 3</a></li>
    						<li><a href="#!">Link 4</a></li>
    					</ul>
     
    				</div>
    				<!-- Grid column -->
     
    			</div>
    			<!-- Grid row -->
     
    		</div>
    		<!-- Footer Links -->
     
    		<hr>
     
    		<!-- Call to action -->
    		<ul class="list-unstyled list-inline text-center py-2">
    			<li class="list-inline-item">
    				<h5 class="mb-1">Register for free</h5>
    			</li>
    			<li class="list-inline-item"><a href="#!"
    				class="btn btn-danger btn-rounded">Sign up!</a></li>
    		</ul>
    		<!-- Call to action -->
     
    		<hr>
     
    		<!-- Social buttons -->
    		<ul class="list-unstyled list-inline text-center">
    			<li class="list-inline-item"><a class="btn-floating btn-fb mx-1">
    					<i class="fab fa-facebook-f"> </i>
    			</a></li>
    			<li class="list-inline-item"><a class="btn-floating btn-tw mx-1">
    					<i class="fab fa-twitter"> </i>
    			</a></li>
    			<li class="list-inline-item"><a
    				class="btn-floating btn-gplus mx-1"> <i
    					class="fab fa-google-plus-g"> </i>
    			</a></li>
    			<li class="list-inline-item"><a class="btn-floating btn-li mx-1">
    					<i class="fab fa-linkedin-in"> </i>
    			</a></li>
    			<li class="list-inline-item"><a
    				class="btn-floating btn-dribbble mx-1"> <i
    					class="fab fa-dribbble"> </i>
    			</a></li>
    		</ul>
    		<!-- Social buttons -->
     
    		<!-- Copyright -->
    		<div class="footer-copyright text-center py-3">
    			© 2018 Copyright: <a
    				href="https://mdbootstrap.com/education/bootstrap/">
    				MDBootstrap.com</a>
    		</div>
    		<!-- Copyright -->
     
    	</footer>
    	<!-- Footer -->
    </body>
    </html>

  2. #2
    Membre éprouvé
    le standard est d'avoir un répertoire static et un autre templates dans ton répertoire resources

    dans static tu devrais avoir

    css
    img
    js
    i18n
    ...

    sachant cela, par exemple pour ton css de bootstrap

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
    Aillez le courage de justifier vos -1.
    http://www.laboiteaprog.com/ - http://www.solutions-norenda.com/