bootstrap框架--css布局

顺晟科技

2021-08-19 11:34:58

132

css布局语法是bootstrap三大核心内容的基础
- 优点：通过最基础、最简单的组合来实现；快速的制作出精美的页面；
class="lead"加粗，字体变大
给其他标签加上h1-h6的class，标签怎会变成相应的标题标签
list-unstyled 取出点
list-online 浮动到一行
dl-horizontal 可以让dl列表水平排列
container具有居中的效果，所以要想实现元素居中，可以给元素外面套一个class为container的div
按钮风格：
- btn-default(默认)白色
- btn-primary(视觉加重)深蓝
- btn-success(成功)绿色
- btn-info(提示信息)浅蓝
- btn-warning(警告)橘黄
- btn-danger(危险)红色
- btn-link(看起来像链接)
- disabled禁用不可点击
- active激活状态，会有阴影效果
table：
- table
- table-striped各行变色
- table-bordered边框
- table-condensed紧凑型
- table-hover鼠标hover时背景色提示
form
- form-control宽度设置成
- form-group组与组间的margin值加大
- input组建
  - <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="请输入">
    </div>
  - 输入框前面后面或者是两边加上文字或按钮，只支持文本输入框input，不能将表单组或栅格列表类直接混用

导航：堆叠式/胶囊式/自适应式/选项卡式

 1 <!-- 导航 -->
 2         <!-- 选项卡式导航 -->
 3         <nav class="nav nav-tabs">
 4             <li class="active"><a href="#">首页</a></li>
 5             <li><a href="#">详情页</a></li>
 6             <li><a href="#">默认页</a></li>
 7             <li><a href="#">我们</a></li>
 8             <li><a href="#">购物车</a></li>
 9             <li><a href="#">关于我们</a></li>
10         </nav>
11         <!-- 胶囊式导航 -->
12         <nav class="nav nav-pills">
13             <li class="active"><a href="#">首页</a></li>
14             <li><a href="#">详情页</a></li>
15             <li><a href="#">默认页</a></li>
16             <li><a href="#">我们</a></li>
17             <li><a href="#">购物车</a></li>
18             <li><a href="#">关于我们</a></li>
19         </nav>
20         <!-- 堆叠式导航 -->
21         <nav class="nav nav-stacked">
22             <li class="active"><a href="#">首页</a></li>
23             <li><a href="#">详情页</a></li>
24             <li><a href="#">默认页</a></li>
25             <li><a href="#">我们</a></li>
26             <li><a href="#">购物车</a></li>
27             <li><a href="#">关于我们</a></li>
28         </nav>
29         <!-- 自适应式 最常用 -->
30         <nav class="nav nav-justified nav-pills">
31             <li class="active"><a href="#">首页</a></li>
32             <li><a href="#">详情页</a></li>
33             <li><a href="#">默认页</a></li>
34             <li><a href="#">我们</a></li>
35             <li><a href="#">购物车</a></li>
36             <li><a href="#">关于我们</a></li>
37         </nav>

可用图标Glyphicons字体图标
- 备注：需要将fonts的文件夹引入进去，放入的位置要和css js 同级放置
下拉菜单
- 定义dropdown 或者dropup样式的大容器。dropdown-menu是放在菜单li的容器。open可以控制菜单展开与否

按钮组 btn-group

按钮组配合下拉菜单一起使用时，要将div最外层的dropdown改成btn-group
垂直分组按钮：将btn-group改成btn-group-vertical

分离式菜单dropdown-toggle可以将直角变成圆角，

 1 <!-- 分离式菜单 -->
 2         <div class="btn-group">
 3             <button class="btn btn-info">下拉菜单1</button>
 4             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
 5                 <span class="caret"></span>
 6             </button>
 7             <ul class="dropdown-menu">
 8                 <li>
 9                     <a href="#"><span class="glyphicon glyphicon-star"></span>klsdjfk</a>
10                 </li>
11                 <li>
12                     <a href="#"><span class="glyphicon glyphicon-film"></span>klsdjfk</a>
13                 </li>
14                 <li>
15                     <a href="#"><span class="glyphicon glyphicon-envelope"></span>klsdjfk</a>
16                 </li>
17                 <li>
18                     <a href="#"><span class="glyphicon glyphicon-search"></span>klsdjfk</a>
19                 </li>
20             </ul>
21         </div>

btn-group-justified：可以实现按钮自适应，不过这个类只能使用于a标签，如果想要适配button，就必须在button外面加一层div 且div类名为btn-group

按钮组尺寸：btn-group-xs/btn-group-sm/btn-group-lg

 1 <!-- 按钮组 -->
 2         <div class="btn-toolbar">
 3             <div class="btn-group btn-group-lg">
 4                 <div class="btn-group btn-group-lg">
 5                     <button class="btn btn-primary" data-toggle="dropdown">left
 6                         <span class="caret"></span>　caret可以出现下拉的三角
 7                     </button>
 8                     <ul class="dropdown-menu">
 9                         <li>
10                             <a href="#"><span class="glyphicon glyphicon-star"></span>klsdjfk</a>
11                         </li>
12                         <li>
13                             <a href="#"><span class="glyphicon glyphicon-film"></span>klsdjfk</a>
14                         </li>
15                         <li>
16                             <a href="#"><span class="glyphicon glyphicon-envelope"></span>klsdjfk</a>
17                         </li>
18                         <li>
19                             <a href="#"><span class="glyphicon glyphicon-search"></span>klsdjfk</a>
20                         </li>
21                     </ul>
22                 </div>
23                 <button class="btn btn-success">center</button>
24                 <buttn class="btn btn-warning">right</buttn>
25             </div>
26             <div class="btn-group btn-group-sm">
27                 <button class="btn btn-primary">left</button>
28                 <button class="btn btn-success">center</button>
29                 <buttn class="btn btn-warning">right</buttn>
30             </div>
31             <div class="btn-group btn-group-xs">
32                 <button class="btn btn-primary">left</button>
33                 <button class="btn btn-success">center</button>
34                 <buttn class="btn btn-warning">right</buttn>
35             </div>
36         </div>

上一篇：实现jq CSS赛马等效果的轮盘抽奖下一篇：的CSS框架- bootstrap

网站建设

Css

bootstrap框架--css布局