Bootstarp
- 网站自适应(缩小网站图片变小),响应式(缩小网站布局发生变化)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http
与file
file:///C:/Users/Desktop
协议是file表示这只是个前端页面,没有与Tomcat交互的- https://blog.csdn.net协议是http,规定了浏览器与服务器数据库交互的协议
- 引入Bootstrap
引入bootstrap放到lib文件中
在index.html文件中引入css,jQuery,js文件
jquery的引入要放到js的前面,bootstrap所有的插件都依赖于jQuery
4. 流布局中的两种:container
居中显示,container-fluid
铺满屏幕
<style>
.container {
background-color: pink;
}
.container-fluid {
background-color: green;
}
</style>
</head>
<body>
<div class="container">
...
</div>
<div class="container-fluid">
...
</div>
- 栅格系统(当不设置超小屏,超小屏独占12份)
<!-- 1.流布局 -->
<div class="container">
<!-- 2.栅格系统 -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-12" style=" background-color: pink;">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4" style="background-color: greenyellow;">.col-xs-6 .col-md-4</div>
</div>
</div>