jQuery+Bootstrap


12/28/2018 所有文章 前端 语言基础 web

WARNING

听从了老师的建议转用了iView
不用bootstrap和jQ了
不过好像差不多

jQuery+Bootstrap

jQuery

咕咕咕~

接下来是Bootstrap

首先是可视化构建网站

这个是中文的好像不如英文的全
这是英文的,反正都可以直接复制代码对于不专注前端的这些就够用,elementUI不能拖拽(遂弃之
中文站的一些代码复制到template的时候会失效,报错是
Uncaught DOMException: Failed to execute 'querySelector' on 'Document'无效的selector
英文版的没有出现,不知道是哪个地方冲突了希望后面不要有坑
哪个好心的程序猿解决了评论吱一声
image.png

基本知识

  1. bootstrap提供的额外标签
<mark></mark>文字描边加重<br/>
<del></del>文字带有删除线<br/>
<ins></ins>文字带有下划线<br/>
<strong></strong>加重<br/>
<small></small>减轻<br/>
<em></em>斜体<br/>
  1. 文字对齐类
<p class="text-left" ></p>文字左对齐<br/>
<p class="text-center" ></p>文字左对齐<br/>
<p class="text-right" ></p>文字左对齐<br/>

<p class="text-lowercase" ></p>文字左对齐<br/>
<p class="text-uppercase" ></p>文字左对齐<br/>
<p class="text-capitalize" ></p>文字左对齐<br/>

元素属性

.pul-left元素浮动到左边
.pul-right元素浮动到右边
.center-block 设置元素为display:block 并居中显示
.clearfix清除浮动
.show强制元素显示
.hidden强制元素隐藏
.sr-only除了屏幕阅读器外,其他设备上隐藏元素
.sr-only-focusable|与.sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户)
.text-hide将页面元素所包含的文本内容替换为背景图
.close显示关闭按钮
.caret显示下拉式功能

  1. 表格样式
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>头行
        <th>头标1</th>
        <th>头标2</th>
        <th>头标3</th>
        <th>头标4</th>
      </tr>
    </thead>
    <tbody>
    <tr class="danger">
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>

    <tr class="warning">新开一行
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>

    <tr class="info">
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr class="success">
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    </tbody>

这是警告黄

柔和灰(text-muted)
主要蓝(text-primary)
成功绿(text-success)
信息蓝(text-info)
警告黄(text-warning)
危险红(text-danger)
这一行(列)都会变成这样,bootstrap的颜色也大部分是这样来的

  1. 表单 用一个div包裹起来的表单对div进行改变样式即可
    form-contorl是表单的样式
<from class="form-inline">#加了这个class 就会横向排列啦
<div class="form-group">
<input type="text" class="form-control" placeholder="这是一个输入框" input-lg>有input-lg就会变大sm就会变小
</div>
<div class="form-group has-success">#会改变颜色
<label for="">这是一个选择框:</Label>
<select class="form-control" name="" id="" >
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
</select>
</div>
<div class="form-group">
<label for="">这是一个文本框:</label>
<textarea class="form-control" name=""  id="" cols="30" rows=1"10"></textarea>
</div>
</from>
  1. 按钮
    需要更多样式直接去bootstrap官网找找
<button class="btn btn-default btn-1g">这是一个按钮</button>
<button class="btn btn-success btn-sm">这是一个按钮</button>
<button class="btn btn-primary activel">这是一个按钮</button>
<button class="btn btn-info btn-blockl">这是一个按钮</button>
<button class="btn btn-warning"disabled="disabled">这是一个按钮</button>
<button class="btn btn-danger">这是一个按钮</button>
<button class="btn btn-link">这是一个按钮</button>
<a class="btn btn-danger" href="">这是a标签所写的按钮效果</a>

对应的按钮效果

Last Updated: 11/8/2019, 7:50:25 AM