![How to use Bootstrap
/*------------------------------------------------------------------
[ Global ]
*/
body {
background: #ffffff;
font-family: 'Lucida Grande', Meiryo, sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------------
[ Navbar ]
*/
.navbar {
min-height: 36px;
border-radius: 0;
border-radius: 0 !important;
}
.navbar .navbar-header .navbar-brand {
color: #ffffff;
padding: 8px;
font-size: 14px;
}
/*----------------------------------------------------
--------------
[ Table ]
*/
table td,
table th {
vertical-align: middle;
font-family : 'Lucida Grande', Meiryo, sans-serif;
font-size : 12px;
word-wrap: break-word;
word-break: break-all;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #d9edf7;
border-color: #c9e2b3;
}
.table-condensed > tbody > tr {
height: 28px;
}
manager/css/lib/persimmon.css
Look at the CSS rule that is defined in the Bootstrap, I will
continue to customize more and more :-)](https://image.slidesharecdn.com/implementationofguiframeworkpart2-140912020147-phpapp02/85/Implementation-of-gui-framework-part2-8-320.jpg)
Implementation of gui framework part2
- 1. Implementation of GUI Framework Part2 : How to use Bootstrap Masahiro Okubo @ HDE
- 2. Table of Contents Part1 : Overview of the GUI framework Part2 : How to use Bootstrap (Today’s session) Part3 : Introduction of GUI Components using JavaScript Part4 : Communitation with the server using Ajax and JSON Part5 : How to convert a POJO (Plain Old Java Object) JSON Part6 : Web application architecture on the server side I am glad to see you again to everyone. I would like to describe how to use Bootstrap in our products, today.
- 3. GUI Framework Architecture Client Side Server Side Application program Custom JavaScript Library (GUI Components) jQuery Custom CSS Bootstrap Modern Web Browsers (Ex. IE9,Firedox,Chome) Data Access Framework Service Framework JSONIC Apache Click Apache Tomcat We designed the administrator screen of our products using Bootstrap and customized original CSS. RDB
- 4. What is Bootstrap? http://getbootstrap.com/ https://wrapbootstrap.com/ I think you already know, Bootstrap is the most popular web development framework. Initially, Bootstrap has been developed and provided by Twitter Inc., but the main developers of this project has left the Twitter Inc. in September 2012 and It was an open- source project now. In addition, there are a lot of themes that extend the bootstrap, you can also purchase the design of cool administrator screen.
- 5. Ｗｈｙ do we adopted Bootstrap? There are many JavaScript based framework for developing web applications. I think these are a great tool, but the processing logic and screen design are closely related, therefore, be designed freely screen design is difficult. In addition, there were also problems such as learning costs. I examined the various frameworks, but ultimately, I adopted the Bootstrap for the following reasons. ・Goodness of unity as a page. ・Provides only screen design. ・Ease of design screen and customization. ・Learning cost and license
- 6. How to use Bootstrap http://getbootstrap.com/examples/sticky-footer-navbar/ First, from the site of the bootstrap, looking for a template close to the image of the screen that I want to create, and then download it. Since I wanted a footer and navbar that is fixed, I chose a template of the above.
- 7. How to use Bootstrap <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Sticky Footer Navbar Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="manager/css/ext/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="manager/css/lib/persimmon.css" rel="stylesheet"> Next, in order to customize the CSS, include the custom CSS file. CSS rules can be changed by overwriting, you can without having to change the Bootstrap itself, to customize the design.
- 8. How to use Bootstrap /*------------------------------------------------------------------ [ Global ] */ body { background: #ffffff; font-family: 'Lucida Grande', Meiryo, sans-serif; font-size: 12px; } /*------------------------------------------------------------------ [ Navbar ] */ .navbar { min-height: 36px; border-radius: 0; border-radius: 0 !important; } .navbar .navbar-header .navbar-brand { color: #ffffff; padding: 8px; font-size: 14px; } /*---------------------------------------------------- -------------- [ Table ] */ table td, table th { vertical-align: middle; font-family : 'Lucida Grande', Meiryo, sans-serif; font-size : 12px; word-wrap: break-word; word-break: break-all; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #d9edf7; border-color: #c9e2b3; } .table-condensed > tbody > tr { height: 28px; } manager/css/lib/persimmon.css Look at the CSS rule that is defined in the Bootstrap, I will continue to customize more and more :-)
- 9. How to use Bootstrap Firefox Web development tools CSS rules have been applied correctly, it can be identified using the Web development tools of Firefox. This tool is very useful, it allows you to directly edit the CSS rule, and see the results.
- 10. How to use Bootstrap Customized Bootstrap Finally, change the CSS rules became volume of about 800 Step / 13.5KBytes. table, navbar, dropdown-menu, tab, pager, hlist, modal etc… I'm modifications to most parts. (Although it is mostly my hobby) The CSS rules of Bootstrap is considered really well, it is a great web development tool.
- 11. Next Part1 : Overview of the GUI framework Part2 : How to use Bootstrap (Today’s session) Part3 : Introduction of GUI Components using JavaScript Part4 : Communitation with the server using Ajax and JSON Part5 : How to convert a POJO (Plain Old Java Object) JSON Part6 : Web application architecture on the server side Thank you for your attention. Screen design was completed by using the Bootstrap, but to operate as a web application, processing logic that receives a value from the form, to check, to control the screen is required. Next time, I will describe the implementation of this processing logic.